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