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

We can use Advanced User Interactions API of selenium webdriver software testing tool to drag the targeted element and drop It on destination element for drag and drop selenium using  javascriptexecutor. I have already described usage of dragAndDrop method with example In THIS POST for drag and drop selenium java. Now supposing, You have an element which you wants to drag and drop by 100 pixel offset

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

If you wants to drag and drop element by 100 pixel offset In horizontal direction then you can use syntax like bellow.

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

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

To drag and drop using javascriptexecutor in selenium to drag element by 100 pixel offset In vertical direction, You can use bellow given syntax In your software test case.

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

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

For selenium webdriver drag and drop element by -100 pixel offset In horizontal and vertical direction, You can write your software test case code as bellow. Here -X offset represents right to left direction and -Y offset represents bottom to top direction of web page.

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();

<< PREVIOUS || NEXT >>