How to automate rollovers

You can use the Rollover element step to trigger a mouse hover or rollover event, for example, on a drop-down menu.

# Automate rollovers with the "Rollover element" step

To automate rollovers, use the Step Finder to search for "roll" and then add the "Rollover element" step.

How
  1. Select - Choose the HTML element you want to hover over.

# Automate a Rollover with Javascript

Javascript can also be used in axiom.ai to trigger a rollover, here is one example:

# HTML Structure the example is based on

<nav>
    <ul>
        <li class="menu-item">
            <a href="#" class="your-hover-element">Menu</a>
            <ul class="submenu">
                <li><a href="#">Option 1</a></li>
                <li><a href="#">Option 2</a></li>
                <li><a href="#">Option 3</a></li>
            </ul>
        </li>
    </ul>
</nav>

# Example of Javascript you could use

// Select the menu item
const menuItem = document.querySelector('.your-hover-element');

// Trigger mouseover event
const mouseOverEvent = new MouseEvent('mouseover', {
    bubbles: true,
    cancelable: true,
    view: window
});

menuItem.dispatchEvent(mouseOverEvent);

// Optionally, click the first submenu option after hover
setTimeout(() => {
    const firstOption = document.querySelector('.submenu li a');
    if (firstOption) {
        firstOption.click();
    }
}, 1000);

Suppose you want to automate the rollover effect on a dropdown menu that reveals additional options when hovered over. This script triggers a rollover effect on the menu, revealing the submenu, and then clicks the first option after a delay.

Prev: How to automate ticking a checkbox
Next: How to automate select lists