Selenium WebDriver : Drag And Drop Element By Pixel(X, Y) Offset using javascriptexecutor

In horizontal direction or 100 pixel offset In Vertical direction or both the directions at the same time then you can use dragAndDropBy method of webdriver’s Actions class for drag and drop selenium.

Drag And Drop Selenium Element In Horizontal Direction By 100 Pixel

new Actions(driver).dragAndDropBy(dragElementFrom, 100, 0).build() .perform();

Drag And Drop Element In Vertical Direction By 100 Pixel in Selenium

new Actions(driver).dragAndDropBy(dragElementFrom, 0, 100).build() .perform();

Drag And Drop Element In Horizontal And Vertical Direction By -100 Pixel Selenium

new Actions(driver).dragAndDropBy(dragElementFrom, -100, -100).build() .perform();

Full practical example to perform all above three operations Is as bellow.

drag and drop selenium java Example

package Testing_Pack;

import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
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() throws InterruptedException {
  //Locate element which you wants to drag.
  WebElement dragElementFrom = driver.findElement(By.xpath("//div[@id='dragdiv']"));
    
  //To drag and drop element by 100 pixel offset In horizontal direction X.
  new Actions(driver).dragAndDropBy(dragElementFrom, 100, 0).build() .perform();
  
  //To generate alert after horizontal direction drag and drop. VIEW EXAMPLE
  JavascriptExecutor javascript = (JavascriptExecutor) driver;
  javascript.executeScript("alert('Element Is drag and drop by 100 pixel offset In horizontal direction.');");
  Thread.sleep(5000);
  driver.switchTo().alert().accept();  
  
  //To drag and drop element by 100 pixel offset In Vertical direction Y.
  new Actions(driver).dragAndDropBy(dragElementFrom, 0, 100).build() .perform();  
 
  //To generate alert after Vertical direction drag and drop.
  javascript.executeScript("alert('Element Is drag and drop by 100 pixel offset In Vertical direction.');");
  Thread.sleep(5000);
  driver.switchTo().alert().accept();
  
  //To drag and drop element by -100 pixel offset In horizontal and -100 pixel offset In Vertical direction.
  new Actions(driver).dragAndDropBy(dragElementFrom, -100, -100).build() .perform();
 
  //To generate alert after horizontal and vertical direction drag and drop.
  javascript.executeScript("alert('Element Is drag and drop by -100 pixel offset In horizontal and -100 pixel offset In Vertical direction.');");
  Thread.sleep(5000);
  driver.switchTo().alert().accept();
 }
}

You can run It In your eclipse and observe the X Y direction movement of  software web element using selenium drag and drop java. So this Is another example of selenium webdriver’s advanced user Interactions using Actions class. This way you can perform drag and drop using javascript in selenium webdriver.


Alternatively you can use moveByOffset method of selenium WebDriver’s Advanced User Interactions API to move software web element by given pixel offset. Syntax Is as bellow.

new Actions(driver).clickAndHold(dragElementFrom).moveByOffset(100,100).release().perform();