How to Drag and Drop Using Action Class in Java Selenium?

In this post, we are going to learn about another feature of action class which is drag and drop in selenium. Also, we are going to learn how to implement this in selenium using action class?

This feature is mostly used in the windows application, but nowadays you can get the same feature in web application also. For example, you can take Gmail, when you are composing a mail at that time when you click on the attachment, there you can for upload you can drag a file and drop in the upload window.

When you are doing automation, to perform this drag and drop operation using selenium, there is no direct method available for this. For performing this, we can make use of the Actions class which have various methods to do such operations.

In Action class, there are some methods for drag and drop:

• dragAndDrop(elementsource, elementtarget)
• dragAndDropBy(elementsource, int xOffset, int yOffset)

Drag and Drop Action in Selenium

dragAndDrop(elementsource, elementtarget): When we use this method, this method click and hold on the source element and moves the source element to the target location element after that it release the mouse click.

Let’s see what happens internally when invoke the perform() method above

• Click And Hold Action: dragAndDrop() method first performs click-and-hold at the location of the source element
• Move Mouse Action: Then source element gets moved to the location of the target element
• Button Release Action: Finally, it releases the mouse
• Build: build() method is used to generate a composite action containing all actions. But if you observe, we have not invoked it in our above command. The build is executed in the perform method internally
• Perform: perform() method performs the actions we have specified. But before that, it internally invokes build() method first. After the build, the action is performed

Find below the steps of the scenario to be automated:

• Launch the web browser and launch our practice page https://demoqa.com/droppable/
• Find the required source element, i.e. ‘Drag me to my target’ object in our sample
• Find the required target element, i.e. ‘Drop Here’ object in our sample
• Now Drag and Drop ‘Drag me to my target’ object to ‘Drop Here’ object
• Verify message displayed on ‘Drop Here’ to verify that source element is dropped at the target element
• Close the browser to end the program

package com.toolsqa.tutorials.actions;

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.Actions;

public class DragAndDrop1 {

public static void main(String[] args) throws InterruptedException {

//Note: Following statement is required since Selenium 3.0,
//optional till Selenium 2.0
//Set system properties for geckodriver
System.setProperty("webdriver.gecko.driver", "C:\\Selenium\\Toolsqa\\lib\\geckodriver.exe");

WebDriver driver = new FirefoxDriver();

String URL = "https://demoqa.com/droppable/";

driver.get(URL);

// It is always advisable to Maximize the window before performing DragNDrop action
driver.manage().window().maximize();

driver.manage().timeouts().implicitlyWait(10000, TimeUnit.MILLISECONDS);

//Actions class method to drag and drop
Actions builder = new Actions(driver);

WebElement from = driver.findElement(By.id("draggable"));

WebElement to = driver.findElement(By.id("droppable"));
//Perform drag and drop
builder.dragAndDrop(from, to).perform();

//verify text changed in to 'Drop here' box
String textTo = to.getText();

if(textTo.equals("Dropped!")) {
System.out.println("PASS: Source is dropped to target as expected");
}else {
System.out.println("FAIL: Source couldn't be dropped to target as expected");
}

driver.close();

}

}

DragAndDropBy Used In Selenium

This method also works like dragAndDrop method, but this dragAndDropBy method is to work a little bit different. In dragAndDrop technique, it moves the source element to a specified location. Still, by using dragAndDropBy, we can move the source element to a specific coordinate by giving the X and Y coordinates. Where X represents horizontal movement and Y represents the vertical movement.

Scenario:

• Launch the web browser and launch our practice page https://demoqa.com/droppable/
• Find the required source element, i.e. ‘Drag me to my target’ object in our sample
• Calculate required xOffset and yOffset to drag source element in the horizontal and vertical direction, respectively [For this, calculate xOffset by getting the difference between x location of the source and target element.
• Similarly, get yOffset by getting the difference between y location of the source and target element]
• Now Drag and Drop ‘Drag me to my target’ object to ‘Drop Here’ object
• Verify message displayed on ‘Drop Here’ to verify that source element is dropped at the target element
• Close the browser to end the program

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.Actions;

public class DragAndDrop2 {

public static void main(String[] args) throws InterruptedException {

//Note: Following statement is required since Selenium 3.0,
//optional till Selenium 2.0
//Set system properties for geckodriver
System.setProperty("webdriver.gecko.driver", "C:\\Selenium\\Toolsqa\\lib\\geckodriver.exe");
WebDriver driver = new FirefoxDriver();

String URL = "https://demoqa.com/droppable/";

driver.get(URL);

// It is always advisable to Maximize the window before performing DragNDrop action
driver.manage().window().maximize();

driver.manage().timeouts().implicitlyWait(10000, TimeUnit.MILLISECONDS);

//Actions class method to drag and drop
Actions builder = new Actions(driver);

WebElement from = driver.findElement(By.id("draggable"));

WebElement to = driver.findElement(By.id("droppable"));

//Here, getting x and y offset to drop source object on target object location
//First, get x and y offset for from object
int xOffset1 = from.getLocation().getX();

int yOffset1 = from.getLocation().getY();

System.out.println("xOffset1--->"+xOffset1+" yOffset1--->"+yOffset1);

//Secondly, get x and y offset for to object
int xOffset = to.getLocation().getX();

int yOffset = to.getLocation().getY();

System.out.println("xOffset--->"+xOffset+" yOffset--->"+yOffset);

//Find the xOffset and yOffset difference to find x and y offset needed in which from object required to dragged and dropped
xOffset =(xOffset-xOffset1)+10;
yOffset=(yOffset-yOffset1)+20;

//Perform dragAndDropBy
builder.dragAndDropBy(from, xOffset,yOffset).perform();

//verify text changed in to 'Drop here' box
//Get text value of 'to' element
String textTo = to.getText();

if(textTo.equals("Dropped!")) {
System.out.println("PASS: Source is dropped at location as expected");
}else {
System.out.println("FAIL: Source couldn't be dropped at location as expected");
}

driver.close();

}
}

Drag Drop Using Action Class: How to Drag Drop Using Action Class in Java Selenium Example Program?

package com.selenium.actions;
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.Actions;
import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;
public class Action_DragNDrop 
{
   WebDriver driver=new FirefoxDriver();
   Actions act=new Actions(driver);
   @BeforeTest
   public void openwebsite()
   {
      driver.manage().window().maximize();
      driver.get("http://jqueryui.com/resources/demos/droppable/default.html");
      driver.manage().timeouts().implicitlyWait(15000, TimeUnit.SECONDS);
   }
   @Test
   public void operation() throws InterruptedException
   {
      Actions act=new Actions(driver);
      WebElement Source=driver.findElement(By.xpath(".//*[@id='draggable']"));
      WebElement Destination=driver.findElement(By.xpath(".//*[@id='droppable']"));
      act.dragAndDrop(Source, Destination).build().perform();	
   }
   @AfterTest
   public void close() throws InterruptedException
   {
      Thread.sleep(5000);
      driver.close();
   }
}