Mouse hover (move_to_element) in Selenium Python - Build an Automation Script

Verify tooltip text appears on mouse hover over info icon

Preconditions (2)

Step 1: Move mouse cursor over the info icon element with id 'info-icon'

Step 2: Wait for the tooltip element with class 'tooltip-text' to appear

Step 3: Read the text displayed inside the tooltip

✅ Expected Result: Tooltip text 'More product details available' is displayed when mouse hovers over the info icon

Automation Requirements - Selenium with Python

Assertions Needed:

Verify tooltip element is visible after hover

Verify tooltip text equals 'More product details available'

Best Practices:

Use explicit waits to wait for tooltip visibility

Use ActionChains for mouse hover

Use By.ID and By.CLASS_NAME locators

Keep test steps clear and maintainable

Automated Solution

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# Setup WebDriver (assuming chromedriver is in PATH)
driver = webdriver.Chrome()

try:
    # Navigate to product details page
    driver.get('https://example.com/product/123')

    # Wait until info icon is visible
    wait = WebDriverWait(driver, 10)
    info_icon = wait.until(EC.visibility_of_element_located((By.ID, 'info-icon')))

    # Perform mouse hover on info icon
    actions = ActionChains(driver)
    actions.move_to_element(info_icon).perform()

    # Wait for tooltip to appear
    tooltip = wait.until(EC.visibility_of_element_located((By.CLASS_NAME, 'tooltip-text')))

    # Verify tooltip text
    tooltip_text = tooltip.text
    assert tooltip_text == 'More product details available', f"Expected tooltip text to be 'More product details available' but got '{tooltip_text}'"

finally:
    driver.quit()

This script starts by opening the Chrome browser and navigating to the product page URL.

It waits explicitly for the info icon element to be visible using WebDriverWait and EC.visibility_of_element_located.

Then it uses ActionChains to move the mouse cursor over the info icon, simulating a hover.

After hovering, it waits for the tooltip element to appear and become visible.

Finally, it reads the tooltip text and asserts it matches the expected string.

The try-finally block ensures the browser closes even if the test fails.

Common Mistakes - 4 Pitfalls

Using time.sleep() instead of explicit waits

Using incorrect locator types or brittle XPath for the info icon

{'mistake': 'Not using ActionChains for mouse hover', 'why_bad': "Without ActionChains, the hover event may not trigger, so tooltip won't appear.", 'correct_approach': 'Use ActionChains.move_to_element().perform() to simulate mouse hover properly.'}

Not closing the browser after test

Bonus Challenge

Now add data-driven testing to verify tooltips for 3 different icons with their expected texts

Show Hint

Practice

1. What is the primary purpose of using move_to_element() in Selenium Python?

easy

A. To scroll the page down

B. To click on a web element

C. To input text into a field

D. To simulate mouse hover over a web element

Solution

1. Step 1: Understand the function of move_to_element()

   This method is used to move the mouse pointer over a specific web element, simulating a hover action.

2. Step 2: Differentiate from other actions

   Clicking, scrolling, and typing are different actions and require other methods like click(), scroll(), or send_keys().

3. Final Answer:

   To simulate mouse hover over a web element -> Option D

4. Quick Check:

   move_to_element() = hover [OK]

Hint: Hover means moving mouse pointer over element [OK]

Common Mistakes:

• Confusing hover with click action
• Using move_to_element() to input text
• Assuming move_to_element() scrolls the page

2. Which of the following is the correct syntax to perform a mouse hover on an element stored in variable element using Selenium Python?

easy

A. ActionChains(driver).move_to_element(element).perform()

B. ActionChains.move_to_element(element).perform()

C. driver.move_to_element(element).perform()

D. ActionChains(driver).hover(element).perform()

Solution

1. Step 1: Recall correct ActionChains usage

   ActionChains requires the driver instance to be passed when creating the object, then call move_to_element(element) and finally perform().

2. Step 2: Identify incorrect syntax in other options

   ActionChains.move_to_element(element).perform() misses driver in constructor, C wrongly calls method on driver, D uses non-existent hover() method.

3. Final Answer:

   ActionChains(driver).move_to_element(element).perform() -> Option A

4. Quick Check:

   ActionChains(driver) + move_to_element + perform() [OK]

Hint: Always create ActionChains with driver first [OK]

Common Mistakes:

• Omitting driver in ActionChains constructor
• Calling move_to_element on driver instead of ActionChains
• Using non-existent hover() method

3. What will be the output of the following Selenium Python code snippet?

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains

driver = webdriver.Chrome()
driver.get('https://example.com')
element = driver.find_element('id', 'menu')

hover = ActionChains(driver).move_to_element(element).perform()
print('Hovered successfully')

medium

A. No output, script hangs

B. SyntaxError

C. Hovered successfully

D. ElementNotInteractableException

Solution

1. Step 1: Analyze code flow

   The code opens a Chrome browser, navigates to example.com, finds an element with id 'menu', and performs a mouse hover on it.

2. Step 2: Check for errors or exceptions

   Assuming the element exists and is interactable, the hover action will succeed and print statement executes.

3. Final Answer:

   Hovered successfully -> Option C

4. Quick Check:

   Correct hover prints message [OK]

Hint: If element exists, hover runs and prints [OK]

Common Mistakes:

• Assuming hover returns a value to print
• Ignoring element presence causing exceptions
• Confusing syntax errors with runtime errors

4. Identify the error in the following Selenium Python code that tries to hover over an element:

from selenium.webdriver.common.action_chains import ActionChains

hover = ActionChains.move_to_element(element).perform()

medium

A. ActionChains class used without driver instance

B. Missing import for ActionChains

C. Incorrect method name, should be hover_to_element

D. perform() should be called before move_to_element()

Solution

1. Step 1: Check how ActionChains is used

   ActionChains is a class that requires an instance with the driver passed before calling methods.

2. Step 2: Identify the mistake in method call

   The code calls move_to_element directly on the class, not on an instance, causing an error.

3. Final Answer:

   ActionChains class used without driver instance -> Option A

4. Quick Check:

   ActionChains needs driver instance [OK]

Hint: Always create ActionChains(driver) instance first [OK]

Common Mistakes:

• Calling methods on ActionChains class instead of instance
• Assuming perform() order is flexible
• Using wrong method names

5. You want to test a dropdown menu that appears only when you hover over a button with id menuBtn. Which Selenium Python code snippet correctly performs the hover and then clicks the first dropdown item with class dropdown-item?

hard

A. element = driver.find_element('id', 'menuBtn')
ActionChains(driver).move_to_element(element).click().perform()

B. element = driver.find_element('id', 'menuBtn')
ActionChains(driver).move_to_element(element).perform()
dropdown = driver.find_element('class name', 'dropdown-item')
dropdown.click()

C. element = driver.find_element('id', 'menuBtn')
ActionChains(driver).click(element).perform()
dropdown = driver.find_element('class name', 'dropdown-item')
dropdown.click()

D. element = driver.find_element('id', 'menuBtn')
dropdown = driver.find_element('class name', 'dropdown-item')
ActionChains(driver).move_to_element(dropdown).perform()
dropdown.click()

Solution

1. Step 1: Hover over the button to reveal dropdown

   Use move_to_element(element).perform() on the button to trigger the dropdown menu.

2. Step 2: Find and click the dropdown item

   After hover, locate the dropdown item by class name and call click() on it.

3. Final Answer:

   Hover button, then click dropdown item -> Option B

4. Quick Check:

   Hover button first, then click dropdown [OK]

Hint: Hover triggers menu, then find and click item [OK]

Common Mistakes:

• Hovering on dropdown item instead of button
• Clicking button instead of hovering
• Trying to click dropdown before hover