How To Perform Mouse Hover Action In Selenium?

Upendra Prasad Mahto

Posted On: June 18, 2024

view count131853 Views

Read time12 Min Read

Mouse hover actions are crucial in web automation testing, partiularly for interactive user interfaces. In quick-commerce or e-commerce platforms, for example, hovering over a product can reveal real-time stock levels or delivery options. In fintech applications, hovering over charts or financial instruments can display detailed analytics or historical data. Using Selenium WebDriver’s Actions Class, you can automate these interactions to validate hover-based functionalities, ensuring the web application behaves correctly when users interact with it.

This article explores the concept and importance of mouse hover in Selenium, demonstrates Python implementation, and shares best practices for effective automation testing.

What is Mouse Hover in Selenium?

Mouse hover in Selenium is an automated action that simulates a user moving the mouse pointer over a specific web element without clicking. This action triggers any hover effects or interactive elements designed to appear or change when a user hovers over them, such as dropdown menus, tooltips, additional information, or other dynamic content.

In Selenium for Python binding, mouse hover actions are implemented using the ActionChains class. This class provides a method called move_to_element(), which moves the mouse to the center of the specified element, activating any hover effects. This is particularly useful for testing websites where hovering over elements reveals critical functionality or content that needs to be validated during automated testing.

As you may see from the image attached below, the home page of Flipkart (as it looks while writing this blog), Electronics is one of the broad categories listed on this e-commerce website. When you hover over this category or element, it will display or render the sub-category list on the DOM. Further, when you hover over the Gaming sub-category, it displays or renders the following list of items on the DOM. This kind of use case is part of a UI that interacts well with the user.

Mouse Hover in Selenium

Importance of Mouse Hover in Selenium

Mouse hover in Selenium is highly valuable for various scenarios in automation testing, as listed below:

  • It allows testers to ensure that dropdown menus work properly when the mouse hovers over them and that all menu options are functional.
  • Testers can also verify tooltips and information that appear when hovering over certain elements.
  • Mouse hover in Selenium enables the validation of hidden or dynamic elements, making sure they become visible and interactive when the mouse hovers over specific areas.
Info Note

Automate your tests on a Selenium Grid of 3000+ real browsers. Try LambdaTest Today!

How to Perform Mouse Hover in Selenium?

To perform mouse hover in Selenium for the Python binding; we use the ActionChains Class from the Selenium WebDriver API. The class can be imported from the selenium.webdriver.common.action_chains module.

ActionChains Class offers a range of methods that enable the simulation of complex user interactions, including Mouse Hover Action, Clicking, Double-clicking, Dragging, Releasing, Holding an element, and many more. It is bundled in the Selenium WebDriver API and comes pre-installed with Selenium binding for Python.

Follow the below steps to use the ActionChains class

  • Import the webdriver module from the Selenium package.
  • Import the ActionChains Class from the selenium.webdriver.common.action_chains module.

After importing, the code snippet looks like this.

selenium.webdriver.common.action_chains module

Let’s take an example to understand mouse hover in Selenium using the ActionChains class in Python.

We will use automation demos, a demo website maintained by LambdaTest for illustrations.

Scenario-1:

Here, we demonstrate how to use Selenium to perform a mouse hover action over the “Resources” element which fetches the related links, highlighted in yellow contour(check the screenshot below) and wait for up to 5 seconds and quit the browser session.

Perform Mouse Hover in Selenium

Automation Code for scenario-1:

Scenario-2:

We will extend the first scenario further, and this time, we pick the “Learning Hub” element before quitting the browser and performing the click() action.

 Perform Mouse Hover in Selenium Scenario-2:

Automation Code for scenario-2:

As shown in the above example, we first hover over the Resources using their XPath and wait for 5 seconds, then hover over Learning Hub and wait again for 5 seconds. After that, we perform the click() action on Learning Hub and wait for 5 seconds, which fires up the Learning Hub page before quitting the browser.

If you want to use Java as your primary language to perform the mouse hover action in Selenium, you can use the Actions class in Java. You may watch the tutorial video to learn in depth.

Let’s now dive deeper into our comprehension by exploring the various methods and properties offered by the ActionChains class in detail.

Methods and Properties of ActionChains Class

The ActionChains class in Selenium for Python binding has various methods and properties, which we will look at in this section with code examples.

move_to_element(WebElement element)

Moves the mouse cursor to the center of the specified web element.

Syntax:

Methods and Properties of ActionChains Class

Let’s understand this through an example.

In the above example, we have used the move_to_element() method. Firstly, we hover over the Platform and then move to Selenium Testing, as shown below.

move_to_element()

move_to_element()

click(WebElement element):

Clicks the specified web element.

Syntax:

click(WebElement element)

Let’s understand this through an example.

In the above example, we used the click() method where we first hover over the element Sign Up and then perform a click() action on it.

 Sign Up and then perform a click() actio

click(WebElement element)

click_and_hold(WebElement element)

Clicks and holds the specified web element. This function also needs the release() method to get the desired functionality.

Syntax:

click_and_hold(WebElement element)

release(WebElement element)

Releases the mouse button previously held on the specified web element.

Syntax:

release(WebElement element)

Let’s take an example where we want to hover over an element(Book a Demo) and want to use click_and_hold() and release() methods.

In the above example, we have performed a mouse hover over the “Book a Demo” element after 3 seconds of opening the page and used the click_and_hold() on the element for 3 seconds. Subsequently, we release the element using the release() method, maintaining the release for 5 seconds. This sequence of actions simulates user interaction and allows us to observe the effects on the “Book a Demo” element during the specified timeframes.

 "Book a Demo" element

(You can see as we hover over the element “Book A Demo”, the border gets thicker.)

Book A Demo form

double_click(WebElement element)

Performs a double-click action on the specified web element.

Syntax:

double_click(WebElement element)

Let’s understand this through an example.

In the above example, we used the double_click() method where we perform a double-click on the text ‘Playground‘, as you can see below.

'Playground'

Playground

context_click(WebElement element)

Performs a right-click (context-click) action on the specified web element.

Syntax:

context_click(WebElement element)

Let’s take an example to understand the context_click() method.

In the above program, we have performed the context_click() method. This method is nothing, but just like a right-click as shown below.

ontext_click() method

drag_and_drop(WebElement source, WebElement target)

Drags the source element and drops it onto the target element.

Syntax:

drag_and_drop(WebElement source, WebElement target)

Let’s take an example to understand the drag_and_drop() method.

]In the above program, we have performed the drag_and_drop() method. This method drags an element and drops it to the desired location.

drag_and_drop() method

drag_and_drop() method

pause(long duration)

Pauses the execution for the specified duration in milliseconds.

Syntax:

pause(long duration)

Let’s take an example to understand the pause() method.

In this example, we first hover over the Blogs and pause for 3 seconds, then perform the click() action on it.

build()

Create complex actions or perform multiple actions sequentially.

Syntax:

actions.build()

Let’s take an example to understand the build() method.

In the above example, we have used the build() method, which allows us to create a sequence of multiple actions more organized and concisely. This technique helps to perform complex interactions by chaining actions together. As shown in this example, we sequentially execute actions like move_to_element() and click() using the build() method.

First, we hover over the Resources. Then we hover over Blog using the move_to_element() method. At last, we performed the click() action. All the actions are performed sequentially.

performed the click() action

move_to_element() and click()

move_to_element() and click()

perform():

Executes the sequence of actions defined on the ActionChains class object.

Syntax:

perform()

Info Note

Automate your tests on a Selenium Grid of 3000+ real browsers. Try LambdaTest Today!

Best Practices for Mouse Hover Actions in Selenium

Following some best practices while performing mouse hover actions in Selenium is essential to ensure reliable and effective test automation. The following are some best practices for mouse hover actions in Selenium.

  • Use the ActionChains Class: The ActionChains class provides a high-level interface for performing mouse and keyboard actions. It offers methods like move_to_element(), click_and_hold(), etc., specifically designed for mouse actions. You may use this class to perform mouse hover actions effectively.
  • Locate Elements Accurately: To accurately locate the elements, you must use reliable and unique locators such as ID, Class, XPath, or CSS Selectors to identify the elements.
  • Use Explicit Waits: In some cases, elements may become visible only after a certain action or delay. You can handle such dynamic elements by using explicit waits and waiting for the element to be visible or clickable before performing the hover action. After opening the website, we locate the element using its XPath to perform any defined action.
  • Check out our blog on Selenium WebDriverWait to learn in depth.

  • Validate the Hover Effect: Verify that the expected changes or effects are reflected on the webpage after performing the mouse hover action. You can use assertions or other validation techniques to ensure the desired behavior.

    Code Example:

Output:

Validate the Hover Effect

We started by importing all the necessary modules from Selenium, including unittest, webdriver, By, ActionChains, and time.

In the setUp method, we first created a WebDriver instance (ChromeDriver in our case) is created. The script then navigates to the automation-demos website and maximizes the browser window.

In the test_hover_effect method, the element to perform the hover action on is located using its XPath, and a 3-second pause is introduced to ensure that the page is fully loaded before performing the action. Afterwards we created an instance of the ActionChains class as actions.

The move_to_element(element_to_hover) method is called on actions to perform the mouse hover action on the specified element.

Another 3-second pause is introduced to observe any effects of the hover action.

The sub-menu element is located using its XPath, and its visibility is checked using the is_displayed() method. Based on the visibility of the sub-menu, the script prints whether the sub-menu is visible or not after the hover action.

The tearDown method closes the browser and ends the test.

The program uses the ActionChains class to perform the hover action, then checks if the sub-menu is displayed using the is_displayed() method.

Conclusion

This blog equipped you with the necessary knowledge to perform hover over an element or mouse hover using Selenium Python binding. We started by understanding the concept of mouse hover in Selenium and its significance in automation testing. Next, we delved into the ActionChains class which plays a key role in achieving mouse hover actions, followed by practical examples.

After that, we explored the various methods and properties of the ActionChains through a detailed example. At last, we discussed essential best practices for executing mouse hover actions in Selenium.

If you would be interested in learning more about how to perform automated mouse and keyboard actions, consider checking out blogs on

  1. How To Perform Mouse Actions In Selenium WebDriver
  2. Tutorial On Handling Keyboard Actions In Selenium WebDriver

Frequently Asked Questions (FAQs)

What do you mean by mouse hover or hover over an element in Selenium?

In Selenium, “mouse hover” or “hover over an element” refers to simulating a mouse pointer hovering over a specific web element on a web page.

How to hover over an element in Selenium?

You can use the Actions class in case of Java and ActionChains class in case of Python of Selenium WebDriverAPI to hover over an element. However, you can also refer to the Implementation section of this article to know more about this.

How to perform “right-click” in Selenium?

You can use the context_click() method from the ActionChains class in case of Python and contextClick() method from the Actions class in case of Java to perform a right-click in Selenium.

Author Profile Author Profile Author Profile

Author’s Profile

Upendra Prasad Mahto

Upendra is a multidimensional individual with a strong interest in technology and innovation. He has set out to create a digital environment with a solid foundation in computer science fundamentals and a deep interest in programming. His knowledge enables him to address problems logically and analytically. He has an inherent ability for content creation, seamlessly weaving words together to create attractive articles.

Blogs: 12



linkedintwitter