moveToElement() method in Selenium Java with Examples

moveToElement() method in Selenium helps move a mouse cursor to a specific element on the webpage. It’s part of the Actions class, which provides a way to perform complex user interactions with the web page. This post will discuss the moveToElement() method of the Actions class in detail.

Actions class provides two implementations of the moveToElement() method –

public Actions moveToElement(WebElement target)
public Actions moveToElement(WebElement target, int xOffset, int yOffset)

Let’s discuss them one by one.

public Actions moveToElement(WebElement target)

It moves the mouse to the middle of the element passed in the argument. Let’s pick one element from our selenium playground website and use the moveToElement() method on it.

We will first locate the highlighted element using the findElement() method. If we inspect the highlighted element, we see that the id attribute value is “colorChangeOnHover” and can be used to find the element.

After finding the element, we can use the moveToElement() method to move the mouse over the element, as shown below.

		// finding the element
		WebElement webElement = driver.findElement(By.id("colorChangeOnHover"));

		// move to the element
		Actions actions = new Actions(driver);
		actions.moveToElement(webElement).perform();

The below code will move the mouse cursor on the element passed in the moveToElement() function.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class CodekruTest {

	public static void main(String[] args) {

		// pass the path of the chromedriver location in the second argument
		System.setProperty("webdriver.chrome.driver", "E:\\chromedriver.exe");
		WebDriver driver = new ChromeDriver();

		driver.get("https://testkru.com/Elements/Buttons");

		// finding the element
		WebElement webElement = driver.findElement(By.id("colorChangeOnHover"));

		// move to the element
		Actions actions = new Actions(driver);
		actions.moveToElement(webElement).perform();

	}

}

Note: moveToElement() is normally used to perform a hover action over an element.

Internal implementation of the moveToElement(WebElement target) method

  public Actions moveToElement(WebElement target) {
    return moveInTicks(target, 0, 0);
  }

moveToElement() internally uses the moveInTicks() method to move the cursor to a specific web element. It passed zero ( 0 ) in the 2nd and 3rd arguments, representing the offset from the middle of the element. As the offsets are passed as 0, the cursor will move to the middle of the element.

public Actions moveToElement(WebElement target, int xOffset, int yOffset)

It also moves the mouse cursor to the specified element but with x and y offsets.

What are these offsets?

xOffset and yOffset are the deviations we want from the middle of the element.

negative (-) xOffset means an offset left of the middle point of the element.
negative (-) yOffset means an offset above the middle point of the element.

xOffset and yOffset in moveToElement method

Let’s move to the same element but this time with x and y offsets.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class CodekruTest {

	public static void main(String[] args) {

		// pass the path of the chromedriver location in the second argument
		System.setProperty("webdriver.chrome.driver", "E:\\chromedriver.exe");
		WebDriver driver = new ChromeDriver();

		driver.get("https://testkru.com/Elements/Buttons");

		// finding the element
		WebElement webElement = driver.findElement(By.id("colorChangeOnHover"));

		// move to the element
		Actions actions = new Actions(driver);
		actions.moveToElement(webElement, -10, -10).perform();
	}

}

Internal implementation of the moveToElement(WebElement target, int xOffset, int yOffset) method

  public Actions moveToElement(WebElement target, int xOffset, int yOffset) {
    return moveInTicks(target, xOffset, yOffset);
  }

So, moveToElement(element) is the same as moveToElement(element, 0, 0).

The What If scenarios

Q – What if we passed an offset value which is outside the viewport?

We will pass -1000000 as the xOffset value, and let’s observe the result.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class CodekruTest {

	public static void main(String[] args) {

		// pass the path of the chromedriver location in the second argument
		System.setProperty("webdriver.chrome.driver", "E:\\chromedriver.exe");
		WebDriver driver = new ChromeDriver();

		driver.get("https://testkru.com/Elements/Buttons");

		// finding the element
		WebElement webElement = driver.findElement(By.id("colorChangeOnHover"));

		// move to the element
		Actions actions = new Actions(driver);
		actions.moveToElement(webElement, -1000000, 10).perform();
	}

}

Output –

Exception in thread "main" org.openqa.selenium.interactions.MoveTargetOutOfBoundsException: move target out of bounds
  (Session info: chrome=109.0.5414.121)
Build info: version: '4.8.0', revision: '267030adea'
System info: os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '15.0.1'
Driver info: org.openqa.selenium.chrome.ChromeDriver

Here we got a MoveTargetOutOfBoundsException. This is because we tried to move to a position outside the viewport. You might get these exceptions while working with the moveToElement() method, so always make sure you move your cursor to a position inside the viewport.

Q – What if we passed null in the moveToElement() method?

We will get an IllegalArgumentException, as illustrated below.

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

public class CodekruTest {

	public static void main(String[] args) {

		// pass the path of the chromedriver location in the second argument
		System.setProperty("webdriver.chrome.driver", "E:\\chromedriver.exe");
		WebDriver driver = new ChromeDriver();

		driver.get("https://testkru.com/Elements/Buttons");

		// move to the element
		Actions actions = new Actions(driver);
		actions.moveToElement(null).perform();
	}

}