How To Drag And Drop An Element In Selenium WebDriver

When we talk about drag and drop kind of tricky operations, We need to use Advanced User Interactions API of selenium WebDriver. It Is not so simple and at the same time not too much hard. We need to write multiple syntax to perform drag and drop action because you need to take multiple actions like pick the element by clicking and holding mouse then move mouse to destination place and then drop element by releasing mouse. Same thing you have to perform In webdriver.

Selenium WebDriver has Advanced User Interactions API (Actions class) to perform this kind of advanced user interactions for rich applications. We can use Actions class and It different methods like dragAndDrop, clickAndHold, moveToElement, release and build to composite all the actions of drag and drop operation as shown In bellow given example. At last perform method will perform the action.

package Testing_Pack;

import java.util.concurrent.TimeUnit;
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.Action;
import org.openqa.selenium.interactions.Actions;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;

public class DragAndDrop {
 
 WebDriver driver = null;
 
 @BeforeTest
    public void setup() throws Exception {  
  driver = new FirefoxDriver();
         driver.manage().window().maximize();
         driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
         driver.get("http://only-testing-blog.blogspot.com/2014/09/drag-and-drop.html");
    } 
 
 @Test
 public void dragAndDrop() {
  //Locate element which you wants to drag.
  WebElement dragElementFrom = driver.findElement(By.xpath("//div[@id='dragdiv']"));
  //Locate element where you wants to drop.
  WebElement dropElementTo = driver.findElement(By.xpath("//div[@id='dropdiv']"));
  
  //Use Actions class and Its members of WebDriver API to perform drag and drop operation.
  Actions builder = new Actions(driver);
        Action dragAndDrop = builder.clickAndHold(dragElementFrom)
            .moveToElement(dropElementTo)
            .release(dropElementTo)
            .build();
        dragAndDrop.perform();        
 }
}

Above example will drag the small square element on big square element. This Is just example. You can use this example as a reference to perform drag and drop operation In your web application. If you wants to by specific X-Y pixel offset then you can view THIS POST.

You can find more tutorials links HERE to start learning selenium WebDriver from basic.

In above example, We have written total 6 lines to drag and drop an element. If you wants convert those 6 lines In only 1 line then you can do It as bellow. Replace bellow given 1 line with 6 lines of above example. It will do same thing.

new Actions(driver).dragAndDrop(dragElementFrom, dropElementTo).build().perform();

So this Is the way to perform drag and drop an element Using selenium WebDriver.

<< PREVIOUS || NEXT >>