12/13/2018 Drag and Drop action in Selenium: dragAndDrop, dragAndDropBy

(https://www.guru99.com/)

Home (/) Testing

SAP Web Must Learn! Big Data

Live Projects AI Blog (/blog/)

Drag and Drop ac on in Selenium: dragAndDrop,

dragAndDropBy
Some web application, have a functionality to drag web elements and drop them on defined
area or element. We can automate drag and drop of such elements using Selenium
Webdriver.

Syntax for drag and drop.

The Actions class has two methods that support Drag and Drop. Let's study them-

Actions.dragAndDrop(Sourcelocator, Destinationlocator)

In dragAndDrop method, we pass the two parameters -

1. First parameter "Sourcelocator" is the element which we need to drag

2. Second parameter "Destinationlocator" is the element on which we need to drop the first
element

Actions.dragAndDropBy(Sourcelocator, x-axis pixel of Destinationlocator, y-axis pixel of De

stinationlocator)

dragAndDropBy method we pass the 3 parameters -

1. First parameter "Sourcelocator" is the element which we need to drag

2. The second parameter is x-axis pixel value of the 2nd element on which we need to drop
the first element.
3. The third parameter is y-axis pixel value of the 2nd element on which we need to drop the
first element.

https://www.guru99.com/drag-drop-selenium.html 1/13
12/13/2018 Drag and Drop action in Selenium: dragAndDrop, dragAndDropBy

(/images/1/102717_0423_DragandDrop1.png)

Let's practically show you the drag and drop of an element using the selenium webdriver
with following 3 scenarios

Scenario 1: BANK element is dragged and dropped on the specific element by

DragAndDrop method.
Scenario 2: BANK element is dragged and dropped on the specific element by
DragAndDrop method.
Scenario 3: Few elements are dragged and dropped and then verify the message is
displayed or not.

Scenario 1: BANK element is dragged and dropped on the specific cell by

DragAndDrop method.
In the following code, we launch the given URL in Firefox browser and then drag the BANK
element and drop on the DEBIT SIDE block through dragAndDrop method.

https://www.guru99.com/drag-drop-selenium.html 2/13
12/13/2018 Drag and Drop action in Selenium: dragAndDrop, dragAndDropBy

(/images/1/102717_0423_DragandDrop2.png)

https://www.guru99.com/drag-drop-selenium.html 3/13
12/13/2018 Drag and Drop action in Selenium: dragAndDrop, dragAndDropBy
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;
import org.testng.annotations.Test;

public class DragAndDrop {

WebDriver driver;

@Test
public void DragnDrop()
{
System.setProperty("webdriver.chrome.driver"," E://Selenium//Selenium_Jars//chrome
driver.exe ");
driver= new ChromeDriver();
driver.get("http://demo.guru99.com/test/drag_drop.html");

//Element which needs to drag.

WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));

//Element on which need to drop.

WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li"));

//Using Action class for drag and drop.

Actions act=new Actions(driver);

//Dragged and dropped.

act.dragAndDrop(From, To).build().perform();
}
}

Code Explanation: In the above code we launch the given URL in Firefox browser and then
drag the BANK element and drop on the DEBIT SIDE block through dragAndDrop method.
Explained briefly below:

First, we capture the 1st element which we need to drag in variable "From."

WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));

Second, we capture the 2nd element on which we need to drop the 1st element in variable
"To".

WebElement To=driver.findElement(By.xpath("//*[@id='bank']/li"));

https://www.guru99.com/drag-drop-selenium.html 4/13
 Third,
12/13/2018 we create object of Actions class
Drag asaction
and Drop weinuse methods
Selenium: of Actions
dragAndDrop, class.
dragAndDropBy

Actions act=new Actions(driver);

For drag and drop element we use dragAndDrop method of Actions class and passes the
parameters as the first element(Sourcelocator) "From" and the second
element(Destinationlocator) "To". Below line will drag the 1st element and drop it on the 2nd
element.

act.dragAndDrop(From, To).build().perform();

Execution of the script.

Now you can execute the above script one by one from eclipse as shown in below
screenshot.

(/images/1/102717_0423_DragandDrop3.png)

Here is the output when you run the script

https://www.guru99.com/drag-drop-selenium.html 5/13
12/13/2018 Drag and Drop action in Selenium: dragAndDrop, dragAndDropBy

(/images/1/102717_0423_DragandDrop4.gif)

Scenario 2: BANK element is dragged and dropped on the specific cell by

DragAndDrop method.
In this scenario, we launch the given URL in the browser and then drag the BANK element
and drop on the DEBIT SIDE block through dragAndDropBy method. To dragAndDropBy, we
need to find the pixel of the element.

How to find Pixel?

Open the URL in Chrome or FireFox and click on the Blue color arrow.

Next click on any element for which you want to know the pixel.

You will find the pixel above the element as shown in below screenshot.

https://www.guru99.com/drag-drop-selenium.html 6/13
12/13/2018 Drag and Drop action in Selenium: dragAndDrop, dragAndDropBy

(/images/1/102717_0423_DragandDrop5.png)

https://www.guru99.com/drag-drop-selenium.html 7/13
12/13/2018 Drag and Drop action in Selenium: dragAndDrop, dragAndDropBy
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;
import org.testng.annotations.Test;

public class DragAndDrop {

WebDriver driver;
@Test
public void DragnDrop()
{
System.setProperty("webdriver.chrome.driver","E://Selenium//Selenium_Jars//chromed
river.exe");
driver= new ChromeDriver();
driver.get("http://demo.guru99.com/test/drag_drop.html");

//Element(BANK) which need to drag.

WebElement From=driver.findElement(By.xpath("//*[@id='credit2']/a"));

//Using Action class for drag and drop.

Actions act=new Actions(driver);

//Drag and Drop by Pixel.

act.dragAndDropBy(From,135, 40).build().perform();
}
}

NOTE: The pixels values change with screen resolution and browser size. This method is
hence not reliable and not widely used.

Scenario 3: Few elements are dragged and dropped and then verify the
message is displayed or not.
In the following code, we launch the given URL in the browser and then drag the elements
like BANK, SALES, 500 and drop on the respective block. Once done we verify the output
message.

https://www.guru99.com/drag-drop-selenium.html 8/13
12/13/2018 Drag and Drop action in Selenium: dragAndDrop, dragAndDropBy
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;
import org.testng.annotations.Test;

public class DragAndDrop {

WebDriver driver;
@Test
public void DragnDrop()
{
System.setProperty("webdriver.chrome.driver"," E://Selenium//Selenium_Jars//chrome
driver.exe");
driver= new ChromeDriver();
driver.get("http://demo.guru99.com/test/drag_drop.html");

//Element(BANK) which need to drag.

WebElement From1=driver.findElement(By.xpath("//*[@id='credit2']/a"));

//Element(DEBIT SIDE) on which need to drop.

WebElement To1=driver.findElement(By.xpath("//*[@id='bank']/li"));

//Element(SALES) which need to drag.

WebElement From2=driver.findElement(By.xpath("//*[@id='credit1']/a"));

//Element(CREDIT SIDE) on which need to drop.

WebElement To2=driver.findElement(By.xpath("//*[@id='loan']/li"));

//Element(500) which need to drag.

WebElement From3=driver.findElement(By.xpath("//*[@id='fourth']/a"));

//Element(DEBIT SIDE) on which need to drop.

WebElement To3=driver.findElement(By.xpath("//*[@id='amt7']/li"));

//Element(500) which need to drag.

WebElement From4=driver.findElement(By.xpath("//*[@id='fourth']/a"));

//Element(CREDIT SIDE) on which need to drop.

WebElement To4=driver.findElement(By.xpath("//*[@id='amt8']/li"));

//Using Action class for drag and drop.

Actions act=new Actions(driver);

//BANK drag and drop.

https://www.guru99.com/drag-drop-selenium.html 9/13
12/13/2018 act.dragAndDrop(From1, Drag
To1).build().perform();
and Drop action in Selenium: dragAndDrop, dragAndDropBy

//SALES drag and drop.

act.dragAndDrop(From2, To2).build().perform();

//500 drag and drop debit side.

act.dragAndDrop(From3, To3).build().perform();

//500 drag and drop credit side.

act.dragAndDrop(From4, To4).build().perform();

//Verifying the Perfect! message.

if(driver.findElement(By.xpath("//a[contains(text(),'Perfect')]")).isDisplayed())

{
System.out.println("Perfect Displayed !!!");

}
else
{
System.out.println("Perfect not Displayed !!!");

}
}

Output analysis

In Output, you can see the element is dragged and dropped on the defined element. You can
check the GIF of the output.

0:00 / 0:01

Summary

In the above tutorials, we illustrate the drag and drop functionality of the web application
through Action methods in Webdriver:
dragAndDrop(Sourcelocator, Destinationlocator)
https://www.guru99.com/drag-drop-selenium.html 10/13
 dragAndDropBy(Sourcelocator,
12/13/2018 Drag x-axis pixelinof
and Drop action Destinationlocator,
Selenium: y-axis
dragAndDrop, dragAndDropBy pixel of
Destinationlocator)
To drag and drop the element first we used DragAndDrop method from the Actions class
in which we pass the 2 parameters, 1st parameter is the element which we need to drag,
and 2nd parameter is the element on which we need to drop the 1st element.
Second, we used the dragAndDropBy method from the Actions class in which we pass
the 3 parameters, the 1st parameter is the element which we need to drag, 2nd parameter
is the x-axis pixel value of the 2nd element, 3rd parameter is the y-axis pixel value of the
2nd element.

 Prev (/using-cucumber-selenium.html) Report a Bug

Next  (/selenium-csharp-tutorial.html)

YOU MIGHT LIKE:

SELENIUM SELENIUM SELENIUM

(/selenium-csharp- (/handling-cookies- (/ssl-certificate-error-

tutorial.html) selenium-webdriver.html)
(/selenium-csharp- (/handling-cookies-
tutorial.html) selenium-
Selenium C# Webdriver webdriver.html)
Tutorial for Beginners Cookie Handling in
(/selenium-csharp- Selenium WebDriver
tutorial.html) (/handling-cookies-
selenium-webdriver.html)
handling-selenium.html)
(/ssl-certificate-
error-handling-
selenium.html)
SSL Cer ficate Error
Handling in Selenium
(/ssl-certificate-error-
handling-selenium.html)

SELENIUM SELENIUM SELENIUM

(/checkbox-and-radio- (/click-on-image-in- (/xslt-report-

button-webdriver.html) selenium.html) selenium.html)
(/checkbox-and- (/click-on-image-in- (/xslt-report-
radio-button- selenium.html) selenium.html)
webdriver.html) How to Click on Image in XSLT Report in Selenium
How to Select CheckBox and Selenium Webdriver (/xslt-report-selenium.html)
Radio Bu on in Selenium (/click-on-image-in-
WebDriver selenium.html)
(/checkbox-and-radio-
button-webdriver.html)

Selenium Tutorials
https://www.guru99.com/drag-drop-selenium.html 11/13
 42) SSL
12/13/2018 Certificate Error Handling (/ssl-certificate-error-handling-selenium.html)
Drag and Drop action in Selenium: dragAndDrop, dragAndDropBy

43) Handling Ajax call (/handling-ajax-call-selenium-webdriver.html)

45) Execute JavaScript based code (/execute-javascript-selenium-webdriver.html)

46) Using Selenium with Python (/selenium-python.html)

47) Use intelliJ & Selenium (/intellij-selenium-webdriver.html)

52) Flash Testing with Selenium (/flash-testing-selenium.html)

54) Core Extensions (/selenium-core-extensions.html)

55) Using Apache Ant with Selenium (/using-apache-ant-with-selenium.html)

56) Using Selenium with Github (/selenium-github.html)

57) Handling Cookies (/handling-cookies-selenium-webdriver.html)

58) Using SoapUI with Selenium (/using-soapui-selenium.html)

59) XSLT Report in Selenium (/xslt-report-selenium.html)

60) Firefox Profile (/firefox-profile-selenium-webdriver.html)

61) Breakpoints and Startpoints (/breakpoints-startpoints-selenium.html)

62) Selenium Interview Questions (/top-100-selenium-interview-questions-answers.html)

63) Cucumber Selenium (/using-cucumber-selenium.html)

64) Drag & Drop Selenium (/drag-drop-selenium.html)

65) Selenium C# Webdriver (/selenium-csharp-tutorial.html)

66) Creating Object Repository (/object-repository-selenium.html)

67) Scroll UP or Down a page (/scroll-up-down-selenium-webdriver.html)

68) Sikuli Tutorial (/sikuli-tutorial.html)

71) Selenium vs HP UFT (QTP) (/alm-qtp-selenium-difference.html)

72) Selenium Alternatives (/selenium-alternatives.html)

 (https://www.facebook.com/guru99com/) 
(https://twitter.com/guru99com) 
(https://www.youtube.com/channel/UC19i1XD6k88KqHlET8atqFQ)

(https://forms.aweber.com/form/46/724807646.htm)

About
https://www.guru99.com/drag-drop-selenium.html 12/13
12/13/2018 Drag and Drop action in Selenium: dragAndDrop, dragAndDropBy
About US (/about-us.html)
Advertise with Us (/advertise-us.html)
Write For Us (/become-an-instructor.html)
Contact US (/contact-us.html)

Career Sugges on
SAP Career Suggestion Tool (/best-sap-module.html)
Software Testing as a Career (/software-testing-career-
complete-guide.html)
Certificates (/certificate-it-professional.html)

Interes ng
Books to Read! (/books.html)
Suggest a Tutorial
Blog (/blog/)
Quiz (/tests.html)
Review (/best-ergonomic-mouse.html)

Execute online
Execute Java Online (/try-java-editor.html)
Execute Javascript (/execute-javascript-online.html)
Execute HTML (/execute-html-online.html)
Execute Python (/execute-python-online.html)

© Copyright - Guru99 2018

Privacy Policy (/privacy-policy.html)

https://www.guru99.com/drag-drop-selenium.html 13/13