How to perform Mouse Hover Action in Selenium
By Jash Unadkat, Technical Content Writer at BrowserStack - February 1, 2021
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.
How to perform mover hover in Selenium?
Prerequisite: One needs to be familiar with the different locator strategies in Selenium to locate specific web elements before being able to automate the mouse hover.
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.
However, it isn’t feasible for every organization to set up in-house device 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 2000+ real devices and browsers to run manual or automated selenium tests on the BrowserStack cloud. 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.