Mouse Hover Action

How it works

Hovering has no WebElement method. You build it with the Actions class: new Actions(driver).moveToElement(element).perform() moves the mouse pointer to the centre of the element, and the page reacts exactly as it would to a real pointer, with :hover styles and mouseover handlers.

Actions are queued, not sent. moveToElement() and build() only add steps to a sequence, and nothing reaches the browser until perform(). Without it the hover button on the Buttons page keeps its original background, rgba(255, 186, 0, 1).

The pointer stays where you left it. After the hover the button's background settles at rgba(8, 111, 109, 1) and keeps that colour until the mouse moves elsewhere. The page animates the change over 0.15 s, so a value read immediately after perform() can be an in-between colour; wait for the final value before asserting it.

About the assignment

The Buttons page has a button that changes colour while the mouse is over it. You read its label, hover over it with Actions, and report that the hover ran.

What you will do

1. 1Find the hover button by the id from the task and print its text after the label Button text:.
2. 2Create an Actions object for the driver, call moveToElement() with the button and finish with perform().
3. 3Print the confirmation line from the task.

Common mistakes

• Forgetting perform()

  The code compiles and runs, but the mouse never moves. Every Actions chain must end in perform().

• Asserting the hover without checking the effect

  Printing a line proves the code ran, not that the page reacted. In a real test, read getCssValue("background-color") after the hover and compare it.

• Hovering over something out of reach

  moveToElement() scrolls an element below the fold into view on its own, but an element laid out outside the page, like the sidebar links at a negative x position in the default 780x580 window, throws MoveTargetOutOfBoundsException. Resize the window so it is on screen.

In a real test suite

Related lessons

• Get CSS Value with getCssValue()Read the colour a hover changes with getCssValue().
• Double Click ActionDouble-click with the same Actions class.
• Scroll to Element with JavaScriptScroll with JavaScript when an element must be in view for a check or a screenshot.

To try one of these calls on any page without a task, open the Online Selenium Java Compiler.

Starter code

The editor above opens with this code. Fill in the TODO lines, then run and submit it.

import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class Main {
    public static void main(String[] args) throws Exception {
        WebDriver driver = new ChromeDriver();
        driver.get("https://testkru.com/Elements/Buttons");
        
        // TODO: Find the colorChangeOnHover button
        // TODO: Print its text
        // TODO: Use Actions to hover over it
        // TODO: Print "Hovered successfully"
        
        driver.quit();
    }
}