How to Move to Element and Click in Selenium

Move To Element is a kind of action on the web page in which the mouse cursor moves to a WebElement.

To move mouse cursor to a WebElement, we use the moveToElement() method of actions class in Selenium WebDriver.  The API syntax for moveToElement() method is as follows:
Syntax:
    public Actions moveToElement(WebElement toElement)
This method takes target WebElement as an input parameter on which the mouse should be moved.

Let’s understand moveToElement action by taking a scenario.
Scenario to Automate:
1. Launch the Firefox browser.
2. Open URL “https://selenium08.blogspot.com/2020/01/click-and-hold.html“.
3. Locate WebElements titleA and titleC by By.xpath.
4. Move the mouse cursor at the place of titleA.
5. Click and hold titleA.
6. Release titleA at the place of titleC.




Now, follow all the important steps in the below source code to automate the above scenario.
Program source code 1:

package moveToElementAction; 
import org.openqa.selenium.By; 
import org.openqa.selenium.WebDriver; 
import org.openqa.selenium.WebElement; 
import org.openqa.selenium.firefox.FirefoxDriver; 
import org.openqa.selenium.interactions.Actions; 

public class MoveToElement 
{ 
public static void main(String[] args) 
{ 
 WebDriver driver = new FirefoxDriver(); 
 driver.manage().window().maximize(); 
 String url = "https://selenium08.blogspot.com/2020/01/click-and-hold.html"; 
 driver.get(url); 

// Locate the element A by By.xpath. 
  WebElement titleA = driver.findElement(By.xpath("//li[text()= 'A']")); 
  WebElement titleC = driver.findElement(By.xpath("//li[text()= 'C']")); 

// Create an object of actions class and pass reference of WebDriver as a parameter to its constructor. 
   Actions actions = new Actions(driver); 
// Call moveToElement() method of actions class to move mouse cursor to a WebElement A. 
   actions.moveToElement(titleA); 
   actions.clickAndHold(); 
   actions.moveToElement(titleC); 
   actions.release().perform(); 
  } 
}

In this example code, we have moved to titleA, clicked and held it, and then moved titleA to the location of titleC by using the moveToElement() method of actions class. 

Here, release() method of actions class has been used to drop element titleA from the mouse at the location of titleC. The release() method release the left mouse button on the WebElement.

Final words
Hope that this tutorial has covered almost all important points related to how to move to element and click in Selenium WebDriver. I hope that you will have understood this easy topic and enjoyed coding.

Thanks for reading!!! 
Next ⇒ How to perform Drag and Drop action in Selenium⇐ PrevNext ⇒

Leave a Comment