Mouse hover (move_to_element) in Selenium Python - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Selenium Python code snippet?

Consider the following Selenium Python code that performs a mouse hover action. What will be printed after execution?

Selenium Python

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

class DummyElement:
    def __init__(self):
        self.hovered = False
    def get_attribute(self, attr):
        if attr == 'class':
            return 'hovered' if self.hovered else 'not-hovered'

# Simulate hover effect by setting hovered to True

def hover_element(element):
    element.hovered = True

# Test code

element = DummyElement()
actions = ActionChains(None)  # driver is None for simulation
hover_element(element)
print(element.get_attribute('class'))

A AttributeError

B not-hovered

C None

D hovered

💡 Hint

Think about what happens to the element's state after the hover_element function is called.

The hover_element function sets the element's hovered attribute to True. The get_attribute method returns 'hovered' if hovered is True, so the output is 'hovered'.

❓ assertion

intermediate

Which assertion correctly verifies the hover effect on a web element?

You want to check if a web element has the CSS class 'active' after a mouse hover. Which assertion is correct?

Selenium Python

element = driver.find_element(By.ID, 'menu-item')
actions = ActionChains(driver)
actions.move_to_element(element).perform()

# Assertion options:

A assert element.is_displayed() == 'active'

B assert element.text == 'active'

C assert 'active' in element.get_attribute('class')

D assert element.get_attribute('id') == 'active'

💡 Hint

Check the element's class attribute after hover.

The CSS class 'active' is part of the class attribute string. Checking if 'active' is in element.get_attribute('class') correctly verifies the hover effect.

❓ locator

advanced

Which locator is best to find a menu item that appears only after mouse hover?

A submenu item appears only after hovering over a main menu. Which locator strategy is best to find this submenu item reliably?

A By.XPATH, '//ul[@class="submenu" and contains(@style, "display: block")]//li[1]'

B By.ID, 'submenu-item'

C By.CSS_SELECTOR, 'ul.submenu > li.visible'

D By.CLASS_NAME, 'submenu-item'

💡 Hint

Consider that the submenu is only visible after hover and may have a style change.

Using XPath to check the submenu's style attribute for 'display: block' ensures the submenu is visible before locating the item, making it reliable after hover.

🔧 Debug

advanced

Why does this mouse hover test fail to reveal the submenu?

This Selenium Python code tries to hover over a menu but the submenu does not appear. What is the likely cause?

Selenium Python

menu = driver.find_element(By.ID, 'menu')
actions = ActionChains(driver)
actions.move_to_element(menu)
# Missing perform()
submenu = driver.find_element(By.ID, 'submenu')
assert submenu.is_displayed()

A The perform() method is missing after move_to_element, so hover is not executed

B The submenu element does not exist in the DOM

C The menu locator is incorrect

D The assert statement is wrong syntax

💡 Hint

Check if the action chain is actually executed.

Without calling perform(), the move_to_element action is not sent to the browser, so the hover does not happen and submenu remains hidden.

❓ framework

expert

How to implement a reliable mouse hover test with explicit wait in Selenium Python?

You want to hover over a menu and wait until the submenu is visible before asserting. Which code snippet correctly implements this?

Selenium Python

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

menu = driver.find_element(By.ID, 'menu')
actions = ActionChains(driver)

# Choose the correct code to hover and wait for submenu:

A

actions.click(menu).perform()
WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.ID, 'submenu')))
assert driver.find_element(By.ID, 'submenu').is_displayed()

B

actions.move_to_element(menu).perform()
WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.ID, 'submenu')))
assert driver.find_element(By.ID, 'submenu').is_displayed()

C

actions.move_to_element(menu)
WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.ID, 'submenu')))
assert driver.find_element(By.ID, 'submenu').is_displayed()

D

actions.move_to_element(menu).perform()
time.sleep(10)
assert driver.find_element(By.ID, 'submenu').is_displayed()

💡 Hint

Remember to perform the hover and use explicit wait for visibility.

Option B correctly performs the hover action, then waits explicitly for the submenu to be visible before asserting. Option B misses perform(), C uses sleep instead of explicit wait, and A clicks instead of hover.

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