Mouse Actions - Hover & Move

Move the mouse cursor and trigger hover effects using moveToElement

Concept

In this practice lab, you will learn how to simulate mouse movement and hover interactions with Selenium using the Actions class.

Hover actions are essential for testing UI elements that appear or change based on mouse position:

Trigger dropdown menus that appear on hover
Display tooltips and additional information
Activate CSS hover effects and animations
Reveal hidden elements or expanded content

moveToElement Fundamentals

The moveToElement() method moves the mouse to the center of the specified element without clicking. This simulates a user hovering their mouse over an element, triggering any CSS :hover styles or JavaScript mouse enter events.

moveToElement(element)

Moves the mouse to the in-view center of the element without performing any click.

Triggers CSS :hover pseudo-class
Fires JavaScript mouseenter and mouseover events
Essential for dropdown menus and tooltips

Best Practice

Always ensure the element is in the viewport before hovering. Use explicit waits to verify hover-triggered elements appear.

Hover Assertions

After hovering, verify that the expected behavior occurred:

isDisplayed() - Check if hidden elements became visible
getCssValue() - Verify CSS properties changed (background-color, opacity, etc.)
getText() - Read tooltip or menu text that appeared

Best Practice

Combine moveToElement() with waits to ensure hover effects have time to render before making assertions.

Common Hover Use Cases

Dropdown Menus

Navigation menus that expand when hovering over menu items

Tooltips

Information popups that appear when hovering over icons or text

Image Galleries

Overlay controls or zoom effects triggered by mouse hover

Interactive Practice

Imagine a page called "Hover Playground" with the following interactive elements:

Hover Playground

1. Hover Card:

2. Tooltip Trigger:

Hover for tooltip

3. Dropdown Menu:

Interact with these elements directly to see how Selenium's hover actions would work!

Manual interaction (student mental model)

If you were doing this with a real mouse:

Move your mouse over the Hover Card to see it change color and display the message.
Hover over the Tooltip Trigger to reveal the tooltip popup.
Move your mouse over the Products Menu to expand the dropdown menu.

Your Selenium code will automate these exact behaviors using moveToElement().

Java Code Example

MouseHoverActions.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
WebElement hoverCard = driver.findElement(By.id("hover-card"));
WebElement tooltipTrigger = driver.findElement(By.id("tooltip-trigger"));
WebElement menuTrigger = driver.findElement(By.id("menu-trigger"));

Actions actions = new Actions(driver);

// 1. Hover over the hover card
actions.moveToElement(hoverCard).perform();

// 2. Hover over the tooltip trigger
actions.moveToElement(tooltipTrigger).perform();

// Wait for tooltip to appear and verify
WebElement tooltip = driver.findElement(By.cssSelector(".tooltip"));
assert tooltip.isDisplayed();

// 3. Hover over the menu to expand dropdown
actions.moveToElement(menuTrigger).perform();

// Wait for menu and click a menu item
WebElement menuItem = driver.findElement(By.linkText("Product 1"));
actions.click(menuItem).perform();

driver.quit();

Code Breakdown

driver.findElement(By.id("hover-card")): Locates the Hover Card element that changes appearance on mouse hover.
driver.findElement(By.id("tooltip-trigger")): Finds the element that triggers a tooltip when hovered.
driver.findElement(By.id("menu-trigger")): Locates the Products Menu trigger element.
actions.moveToElement(hoverCard).perform();: Moves the mouse to the center of the Hover Card, triggering CSS hover effects and JavaScript mouse events.
actions.moveToElement(tooltipTrigger).perform();: Hovers over the tooltip trigger, causing the tooltip to appear on the screen.
assert tooltip.isDisplayed();: Verifies that the tooltip became visible after hovering. This is a common pattern for validating hover interactions.
actions.moveToElement(menuTrigger).perform();: Hovers over the menu trigger to expand the dropdown menu, revealing the menu items.
actions.click(menuItem).perform();: After the menu expands, clicks on a specific menu item. This demonstrates a common pattern: hover to reveal, then click.
driver.quit();: Closes the browser and ends the WebDriver session.

Pro Tip

Element Must Be Visible

Ensure the target element is in the viewport before using moveToElement(). If the element is off-screen, Selenium may fail to hover correctly. Scroll the element into view first if needed.

Wait for Hover Effects

After hovering, use explicit waits to ensure hover-triggered elements (tooltips, menus) have time to appear before making assertions or clicks. CSS animations may take time to complete.

Hover Then Click Pattern

For dropdown menus, use the pattern: moveToElement(menu).perform()then click(menuItem).perform(). This ensures the menu expands before clicking items.

Concept

In this practice lab, you will learn how to simulate mouse movement and hover interactions with Selenium using the Actions class.

Hover actions are essential for testing UI elements that appear or change based on mouse position:

Trigger dropdown menus that appear on hover

Display tooltips and additional information

Activate CSS hover effects and animations

Reveal hidden elements or expanded content

moveToElement Fundamentals

moveToElement(element)

Moves the mouse to the in-view center of the element without performing any click.

Triggers CSS :hover pseudo-class
Fires JavaScript mouseenter and mouseover events
Essential for dropdown menus and tooltips

Best Practice

Always ensure the element is in the viewport before hovering. Use explicit waits to verify hover-triggered elements appear.

Hover Assertions

After hovering, verify that the expected behavior occurred:

isDisplayed() - Check if hidden elements became visible
getCssValue() - Verify CSS properties changed (background-color, opacity, etc.)
getText() - Read tooltip or menu text that appeared

Best Practice

Combine moveToElement() with waits to ensure hover effects have time to render before making assertions.

Common Hover Use Cases

Dropdown Menus

Navigation menus that expand when hovering over menu items

Tooltips

Information popups that appear when hovering over icons or text

Image Galleries

Overlay controls or zoom effects triggered by mouse hover

Interactive Practice

Imagine a page called "Hover Playground" with the following interactive elements:

Hover Playground

1. Hover Card:

2. Tooltip Trigger:

Hover for tooltip

3. Dropdown Menu:

Interact with these elements directly to see how Selenium's hover actions would work!

Manual interaction (student mental model)

If you were doing this with a real mouse:

Move your mouse over the Hover Card to see it change color and display the message.
Hover over the Tooltip Trigger to reveal the tooltip popup.
Move your mouse over the Products Menu to expand the dropdown menu.

Your Selenium code will automate these exact behaviors using moveToElement().

Java Code Example

MouseHoverActions.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
WebElement hoverCard = driver.findElement(By.id("hover-card"));
WebElement tooltipTrigger = driver.findElement(By.id("tooltip-trigger"));
WebElement menuTrigger = driver.findElement(By.id("menu-trigger"));

Actions actions = new Actions(driver);

// 1. Hover over the hover card
actions.moveToElement(hoverCard).perform();

// 2. Hover over the tooltip trigger
actions.moveToElement(tooltipTrigger).perform();

// Wait for tooltip to appear and verify
WebElement tooltip = driver.findElement(By.cssSelector(".tooltip"));
assert tooltip.isDisplayed();

// 3. Hover over the menu to expand dropdown
actions.moveToElement(menuTrigger).perform();

// Wait for menu and click a menu item
WebElement menuItem = driver.findElement(By.linkText("Product 1"));
actions.click(menuItem).perform();

driver.quit();

Code Breakdown

driver.findElement(By.id("hover-card")): Locates the Hover Card element that changes appearance on mouse hover.
driver.findElement(By.id("tooltip-trigger")): Finds the element that triggers a tooltip when hovered.
driver.findElement(By.id("menu-trigger")): Locates the Products Menu trigger element.
actions.moveToElement(hoverCard).perform();: Moves the mouse to the center of the Hover Card, triggering CSS hover effects and JavaScript mouse events.
actions.moveToElement(tooltipTrigger).perform();: Hovers over the tooltip trigger, causing the tooltip to appear on the screen.
assert tooltip.isDisplayed();: Verifies that the tooltip became visible after hovering. This is a common pattern for validating hover interactions.
actions.moveToElement(menuTrigger).perform();: Hovers over the menu trigger to expand the dropdown menu, revealing the menu items.
actions.click(menuItem).perform();: After the menu expands, clicks on a specific menu item. This demonstrates a common pattern: hover to reveal, then click.
driver.quit();: Closes the browser and ends the WebDriver session.

Pro Tip

Element Must Be Visible

Ensure the target element is in the viewport before using moveToElement(). If the element is off-screen, Selenium may fail to hover correctly. Scroll the element into view first if needed.

Wait for Hover Effects

After hovering, use explicit waits to ensure hover-triggered elements (tooltips, menus) have time to appear before making assertions or clicks. CSS animations may take time to complete.

Hover Then Click Pattern

For dropdown menus, use the pattern: moveToElement(menu).perform()then click(menuItem).perform(). This ensures the menu expands before clicking items.