Add hover steps to assert and interact with elements that only appear on hover. Examples of interactions that use hovers include:
- Hovering over a navigation to activate a dropdown menu
- Hovering over a tooltip icon to display additional information
- Hovering over a product image to display different views or colors
This article outlines options for adding hover steps to your test:
Convert a click step into a hover step
To add a step that hovers over a specific element in the mabl Trainer, ensure the Record button is on and take the following steps:
- Click on the element that you want to hover over.
- Click on the edit pencil for the recorded click step.
- Change the Action from "Click" to "Hover over".
- Click OK.
Updating a click step to a hover step
Targeting the correct element
If you cannot target the correct element for a hover step, try adding Configure Find. If Configure Find does not work, try creating a custom find hover step using CSS or XPath.
The "record hovers" setting
Alternatively, you can use the "record hovers" setting to automatically record all hover steps:
- Click on the Trainer settings menu in the bottom right corner of the Trainer window.
- Check the "record hovers" checkbox.
- Close the settings window.
Accessing the Trainer settings menu
Using the "record hovers" setting
When "record hovers" is enabled, the mabl Trainer automatically adds hover steps for the elements that your mouse hovers over. As soon as you click on an element, the Trainer retroactively adds a hover step for every element that your mouse hovered over before the click step.
For example, if you open a dropdown navigation and click on a link with the "Record hovers" setting enabled, the Trainer records a hover step for every navigation link that your mouse passes over before clicking on the link.