How does Selenium perform mouse hover over an element?

In today’s era of advancement, where everything has become or is in the process of becoming self-automated, Selenium is one of the most popular automation tools seen to be used for performing such tasks. It is a free, open-source testing tool that is used for web automation and testing. Since it deals with the web, it also possesses various web elements. These web elements are nothing but a representation of HTML elements. These web elements can be a button, checkbox, dropdown list, radio button, text area, etc. One such functionality related to this is the “mouse hover over an element”.

In this comprehensive article, we will read about the different techniques and methods that Selenium provides to perform mouse hover actions over an element. We’ll also explore practical examples of how to perform mouse hover over an element using Selenium, some of the basic concepts related to mouse hover actions using the ‘ActionChains‘ class, and their importance in GUI testing.

What is a Mouse Hover Action?

“Hovering” or “mouseover” is also known as mouse hover action. Mouse hover action is said to be an interaction of users with the GUI interface (a webpage or an application) where the mouse pointer performs different actions. Each mouse pointer action triggers a new event, such as an alteration in appearance, display of any additional information, or any functionality activation associated with that action.

Moreover, there are some common use cases associated with the mouse hover actions. Those include:

1. Tooltips: In this instance, users get a ‘tooltip’, or, say a pop-up window appears when one tries to mouse hover over an element, i.e., icons or links. On doing so, it easily brings all the additional information about that element.
2. Menus and submenus: In this circumstance, while navigating through the web, if any user gets to interact with any menu and hovers over it, they receive another submenu with other options and links.
3. Image galleries: Hovering over image galleries is the very basic action that everyone performs while checking out any image or gallery on the web. On hovering, the respective image tends to appear larger, as compared to its previous dimensions.
4. Interactive elements: Similarly, when one interacts with any of the web elements like buttons, checkboxes, etc., they also show some changes in color, size, etc.

Importance of Mouse Hover Actions in GUI Testing:

Mouse hover actions are also very important for GUI (Graphical User Interface) testing as they play a significant role for several reasons, such as:

1. Simulating User Interaction: Mouse hover actions are one of the frequent methods used for simulating users’ interactions with the various web elements present in the GUI interface. It is said to be the crucial method of testing to check whether the program runs as intended or not.
2. Checking Responsiveness: Software responsiveness can also be checked and tested with mouse hover actions. Responsiveness here, which bothers the audience is the change in the appearance and display of the web elements or the contents present on the web when hovered over.
3. User Interface Consistency: Consistency in GUI testing with the user interface is also essential, as any inconsistency, such as the appearance or response of the same hovered element again and again, creates much confusion and frustration among the users while working with it.
4. Bug Detection: Bugs like broken or unauthorized links, any missing tooltip, unresponsive buttons, or other unexpected behaviour can be identified, tested, rectified or reported by the testers or developers with the help of GUI testing or mouse hover actions, leading to the early development process.
5. Compatibility Testing: Compatibility testing of various browsers or platforms is also done with mouse hover actions. This deals with performance issues that occurred due to different browsers’ performance dependencies, which later got uncovered and handled.

Overview of ActionChains Class:

The ‘ActionChains’ class is a part of the Selenium WebDriver library. It chains a series of actions that are used to perform various complex and advanced interactions, such as any mouse or keyboard actions, with the webpage or an application. These actions include mouse hover, click, double-click, context-click, drag and drop and key presses, which are briefly discussed below:

• Mouse hover: In this, the mouse pointer simply hovers over the web elements on the webpage or an application.
• Click: This action starts or simulates a mouse click over the web elements, such as checkboxes, text areas, links, buttons, radio buttons, etc.
• Double-click: Similar to click, this action just simulates a double-click over any of the web elements.
• Context-click: This action helps in simulating a right-click over a web element.
• Drag and drop: As the name says, this action helps to drag and drop a particular web element from one place to another place on the webpage or an application.
• Key presses: This action simulates any keyboard actions, such as text typing or pressing any keys on the keyboard.

Method of ActionChains Class:

The ‘ActionChains’ class in Selenium also provides several methods that help in performing various actions and interactions on a webpage. Some of them are discussed below:

1. move_to_element(to_element): This method allows the mouse pointer to move over to a specified element.
2. move_to_element_with_offset(to_element, xoffset, yoffset): This method helps in moving the mouse pointer to the specified element containing an optional offset, but from the top-left corner.
3. click(on_element=None): In this, the method helps the mouse pointer to click either on the current mouse position or on the specified element but, only if the element is provided.
4. context_click(on_element=None): In this too, the method helps the mouse pointer to simulate a double-click either on the current mouse position or on any specified element, but only if the element is provided properly.
5. double_click(on_element=None): Similarly, here the method allows the mouse pointer to generate or simulate a double-click, either on the current mouse pointer position or on any specified element, given the element is provided properly.
6. drag_and_drop(source, target): Here, the method helps to drag an element from the source to the target element.
7. key_down(value, element=None): This method simulates a key press and holds it down. The ‘value’ parameter specifies the key to be pressed, and the optional ‘element’ parameter specifies the element to send the key event to.
8. key_up(value, element=None): This method helps in releasing a key that was previously held down. The ‘value’ parameter specifies the key to be released, and the optional ‘element’ parameter specifies the element to send the key event to.
9. send_keys(*keys_to_send): This method sends a sequence of key presses and releases. One can also provide multiple sequences of keys as arguments.
10. pause(seconds): This method adds a pause (in seconds) to the action sequence, causing a delay between actions.
11. reset_actions(): This method clears all the actions that have been queued, allowing you to start building a new sequence.
12. perform(): This method executes the actions that have been queued in the action sequence.

Steps to Perform Mouse Hover Over an Element:

To perform a mouse hover over an element using Selenium, you can use the ‘ActionChains’ class, which allows you to perform complex interactions with a web page, including mouse hover actions. Here’s a step-by-step guide on how to do it in Python with Selenium:

1. Install Selenium

To start performing with Selenium, you need to first install Selenium into your system. You can do so with the help of the pip command in your command prompt, as given below

pip install selenium

This will install Selenium into your system.

2. Import the Necessary Modules

After installing Selenium, import the necessary modules with the help of any of your code editors.

from selenium import webdriver

from selenium.webdriver import ActionChains, Keys

from selenium.webdriver.common.by import By

import time

3. Create a Webdriver Instance and Navigate to the Webpage

In this step, create an instance for a WebDriver (here, Chrome is used) and navigate to the URL of the webpage with the help of the get() method.

driver = webdriver.Chrome()driver.maximize_window()driver.get(“https://www.geeksforgeeks.org/python-programming-language/”)

In this example, the geeks for geeks python-programming-language page is accessed.

4. Locate the Elements to Hover Over

Now, locate the element you want to hover over using Selenium’s element locating methods (e.g., find_element_by_id, find_element_by_xpath, etc.).

5. Perform the Mouse Hover Action

Now, use ActionChains to perform the mouse hover action. On creation of an ActionChains object, use the move_to_element method to specify the element you want to hover over, and finally, call the perform() to execute the hover action. After performing the hover action, you can continue with any other interactions you need on the hover-over menu or elements that become visible after the hover.

6. Close the WebDriver

At last, close the driver.

driver.quit()

Here’s a complete Python example to show the actual implementation:

Python3

from selenium import webdriver
from selenium.webdriver import ActionChains, Keys
from selenium.webdriver.common.by import By
import time

# create a webdriver instance and navigate to the webpage
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://www.geeksforgeeks.org/python-programming-language/")

# will hover to Tutorials and wait for 3 seconds
Tutorials = driver.find_element(By.XPATH,"/html/body/nav/div/div[1]/ul[1]/li[2]/span")

time.sleep(3)

actions = ActionChains(driver)
actions.move_to_element(Tutorials).perform()
time.sleep(3)

# After 3 seconds, this will hover to ML & Data Science and wait for 3 seconds
ML_and_DataScience = driver.find_element(By.XPATH,"/html/body/nav/div/div[1]/ul[1]/li[2]/ul/li[2]/span")
actions.move_to_element(ML_and_DataScience).perform()
time.sleep(3)

# Again, after 3 seconds, it will hover to Machine Learning and wait for 3 seconds
Machine_Learning = driver.find_element(By.XPATH,"/html/body/nav/div/div[1]/ul[1]/li[2]/ul/li[2]/ul/li[2]")
actions.move_to_element(Machine_Learning).perform()
time.sleep(3)

# After next 3 seconds, it will hover to Machine Learning Tutorial and wait for 3 seconds
ML_tutorial = driver.find_element(By.XPATH,"/html/body/nav/div/div[1]/ul[1]/li[2]/ul/li[2]/ul/li[2]/ul/li[1]/a")
actions.move_to_element(ML_tutorial).perform()
time.sleep(3)

# After the last 3 seconds, it will close the webdriver
driver.quit()

Output:

Output to show mouse hover over elements using Selenium

Explanation:

• As shown above, the mouse first hovers over the “Tutorials” tag.
• With this, a dropdown menu appears.
• Over there, the mouse first hovers over the “ML & Data Science” section.
• This opens another dialogue box where the mouse first hovers over the “Machine Learning” section, followed by “Machine Learning Tutorial”.
• Also, note that the time taken between all these transitions is 3 seconds.

Conclusion:

As a conclusion, mastering the art of performing various operations related to Selenium, for example, the one mentioned above, i.e., “mouse hover over an element”, has become an essential part of ongoing or upcoming innovations, as it opens new doors in the field of automation and web testing. This crucial ability would also help testers and developers to delve deep into the new upcoming technologies, to uncover their hidden challenges and contents for the outer world to interact with them.