How to perform Mouse Hover Action in Selenium

Hovering is a fundamental digital action that involves placing the mouse cursor on the target link or button. Users mainly use the mouse hover action to access sub-menu items. Submenus or sub-lists are standard for e-commerce websites like Amazon, Walmart, etc. This is a fundamental and frequently used action for more websites, and thus it must be created and tested to work perfectly for browsers and customers at all times.

In some instances, automating tests for child elements under sub-menus becomes challenging as they render in DOM only when the mouse hovers over the main (parent) element.

Let’s take an example.

In the screenshot above, “Products” is a parent element and once the mouse hovers over it, a sub-menu with child elements renders. For better visibility during test automation from the end user’s perspective, one needs to follow the parent-child hierarchy.

In simple terms, to automate tests for items in sub-menus, the webdriver needs to locate the parent element first, then locate and click on the target child element.

Thankfully, the hover operation can be automated in Selenium using the Actions class. This article will illustrate how one can automate the hover operation in Selenium with relevant code snippets.

How to perform mover hover in Selenium?

The first step for hovering over an element is to locate that particular element. Then, the tester can perform the hover operation using the Actions class.

Refer to the code snippet below:

WebElement ele = driver.findElement(By.xpath("<xpath>"));

//Creating object of an Actions class
Actions action = new Actions(driver);

//Performing the mouse hover action on the target element.
action.moveToElement(ele).perform();

Now let’s explore the process to perform hover and click operation for elements in the sub-menu.

The first step here would be to locate the main menu (AKA parent menu). Once that is done, the second step is to locate the desired element (child element) from the available options in the sub-menu. The final step would be to click on that child element.

Refer to the code snippet below:

// Locating the Main Menu (Parent element)
WebElement mainMenu = driver.findElement(By.xpath("<Xpath of the Main menu"));

//Instantiating Actions class
Actions actions = new Actions(driver);

//Hovering on main menu
actions.moveToElement(mainMenu);

// Locating the element from Sub Menu
WebElement subMenu = driver.findElement(By.xpath("<Xpath of the sub element>"));

//To mouseover on sub menu
actions.moveToElement(subMenu);

//build()- used to compile all the actions into a single step 
actions.click().build().perform();

The code above first locates the parent element and hovers over it and as soon as the sub-menu renders, it locates the child element from the sub-menu, hover, and finally performs the click operation on it.

The Role of Real Devices in Accurate Selenium Testing

The purpose of test automation is to obtain faster and accurate results so that teams can deliver robust applications. Bear in mind that obtaining accurate test results can only be derived from tests executed on real devices. Only tests executed in real user conditions will deliver equivalent test results similar to the one being used in the real world.

Although emulators and simulators are helpful for debugging and verifying quick fixes, they cannot yield 100% accurate results. After all, they too are software programs that just mimic the functionality of a device. Additionally, emulators or simulators are not available for every device-browser-OS combination in the market. Consequently, developers and QAs won’t be able to test their software programs comprehensively on emulators. Thus testing on real devices is non-negotiable.

Run Selenium Tests on Real Devices for Free

However, it isn’t feasible for every organization to set up in-house digital labs as it demands enormous investments. In such cases, teams can opt for cloud-based platforms like BrowserStack that provide them with the ideal test infrastructure. One can choose from 3000+ real devices and browsers to run manual or automated selenium tests on the BrowserStack Cloud Selenium Grid. Users simply need to sign up and get started for free by selecting the desired device-browser-OS combination to test on.

Identifying bugs is only possible when QA engineers interact with every single element on a website. For this, QA engineers need to replicate or simulate the end-user interactions by creating automated test scripts. The mouse hover operation in combination with the click command enables them to do this. This also helps QA teams comprehensively test and validate the functionality of web applications.