Skip to main content

Adding hovers

Eva Ferreira
  • Updated

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 working with hover steps in 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:

  1. Click on the element that you want to hover over.
  2. Click on the edit pencil for the recorded click step.
  3. Change the Action from “Click” to “Hover over”.
  4. Click OK.

Updating a click step to a hover step

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.

Asserting on elements that appear on hover

A common next step after adding a hover step is to assert on the element that the hover reveals, such as a tooltip, menu, or popup.

If the hovered element disappears before you can assert on it, try replaying the hover step:

  • Click on the three-dot menu for the hover step
  • Select Play this step
  • While the element revealed by the hover is visibly, add an assertion from the Trainer menu without moving your mouse base to the application window.

Some hovered elements are particularly tricky to capture in assertions. For alternative techniques to creating assertions, such as using the enter-key shortcut or a Find elements step, see asserting on hard-to-target elements.

The “record hovers” setting

Alternatively, you can use the “record hovers” setting to automatically record all hover steps:

  1. Click on the Trainer settings menu in the bottom right corner of the Trainer window.
  2. Check the “record hovers” checkbox.
  3. Close the settings window.

Accessing the Trainer settings menu

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.

Related articles