Drag and Drop Operation using Selenium WebDriver

“Drag and Drop” is another mouse operation which means grabbing a WebElement and dropping it at another location. Selenium WebDriver provides Actions class to perform all mouse operations, and the method id dragAndDrop();

This operation can also we performed in another way. Let us understand both ways with an example:

Scenario:

1. Navigate to https://jqueryui.com/droppable/
2. There are two WebElements “Drag me to my target” and “Drop here”
3. Grab the first WebElement, move it other and drop there.

Refer below image:

Refer the code here:

package com.edureka.day8;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class DragAndDrop {

	public static void main(String[] args) {
		ChromeDriver Driver;
		
		System.setProperty("webdriver.chrome.driver", 
				"C:\\workspace\\libs\\chromedriver.exe");
		Driver = new ChromeDriver();
		
		//Maximizing the browser
		Driver.manage().window().maximize();
		
		//To delete(by-pass) all the cookies from browser
		Driver.manage().deleteAllCookies();
		
		Driver.manage().timeouts().pageLoadTimeout(90, TimeUnit.SECONDS);
		
		Driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
		
		String url = "http://jqueryui.com/droppable/";
		Driver.get(url);
		
		WebElement frame = Driver.findElement(By.className("demo-frame"));
		Driver.switchTo().frame(frame);
		
		WebElement source = Driver.findElement(By.id("draggable"));
		
		WebElement target = Driver.findElement(By.id("droppable"));
		
		Actions action = new Actions(Driver);
		
		action.dragAndDrop(source, target).build().perform();
		

	}

}

Here, in the above code, the two Web Elements “Draggable” and “Dropable” are in a frame. So we have to first switch to a frame before performing the further operations.

WebElement frame = Driver.findElement(By.className("demo-frame"));
		Driver.switchTo().frame(frame);

Identify both Web Elements:

WebElement source = Driver.findElement(By.id("draggable"));
		
WebElement target = Driver.findElement(By.id("droppable"));

Perform Drag and Drop Operation: Actions class provides a method called dragAndDrop(source, target);

Actions action = new Actions(Driver);
		
action.dragAndDrop(source, target).build().perform();

Drag and Drop can also be performed in another way, see below code:

Actions action = new Actions(Driver);
		
action.moveToElement(source).clickAndHold().moveToElement(target).release().build().perform();

First, we are moving to a particular WebElement, click and hold this web element, then move to other WebElement and then release it.

I hope you enjoyed this article, I tried to explain it with a simple example.

For any questions, queries, or feedback feel free to write us at support@qatechhub.com or saurabh@qatechhub.com. Happy Learning 🙂