Drag-and-drop is a common user interface action in web applications that involves selecting an element and moving it to another location. Selenium WebDriver provides support for simulating drag-and-drop interactions using the Actions class. This article will demonstrate how to implement drag-and-drop in Selenium with Java, covering the key steps and providing code examples.

1. What is Drag and Drop in Selenium?

Drag and drop in Selenium refers to automating the action of selecting an element, dragging it to a new location, and dropping it there. This is achieved using the Actions class, with methods like dragAndDrop(), clickAndHold(), and moveToElement(). It is commonly used to test interactive UI elements such as sortable lists, file uploads, or draggable components, ensuring that the drag-and-drop functionality works correctly across different browsers.

2. Setting Up Your Selenium Environment

Before exploring the drag-and-drop functionality, you must have a Java IDE like Netbeans IDE, IntelliJ IDEA, or Eclipse, the Selenium WebDriver dependencies included in your project, and a browser driver such as ChromeDriver properly installed.

Here is a simple Maven dependency for Selenium:

<dependency>
 <groupId>org.seleniumhq.selenium</groupId>
 <artifactId>selenium-java</artifactId>
 <version>4.27.0</version>
</dependency>
<dependency>
 <groupId>io.github.bonigarcia</groupId>
 <artifactId>webdrivermanager</artifactId>
 <version>5.9.2</version>
</dependency>

3. Example: Drag and Drop in Selenium

In this article, we are using the demo page from https://jqueryui.com/droppable/ to perform and test the drag-and-drop functionality. The following code sets up a Selenium WebDriver instance, navigates to the test page containing drag-and-drop elements, and initializes the Actions class.

public class SeleniumDragAndDropDemo {

 public static void main(String[] args) {
 // Initialize the WebDriver
 WebDriver driver = new ChromeDriver();
 try {
 // Navigate to the drag-and-drop demo page
 driver.get("https://jqueryui.com/droppable/");
 driver.manage().window().maximize();

 // Switch to the iframe containing the draggable elements
 driver.switchTo().frame(driver.findElement(By.className("demo-frame")));

 // Locate the draggable and droppable elements
 WebElement source = driver.findElement(By.id("draggable"));
 WebElement target = driver.findElement(By.id("droppable"));

 // Initialize the Actions class
 Actions actions = new Actions(driver);

 // Perform drag-and-drop action
 actions.dragAndDrop(source, target).perform();
 System.out.println("Drag-and-drop action performed successfully!");
 } finally {
 driver.quit();
 }
 }
}

This code initializes a Selenium WebDriver using ChromeDriver and navigates to the drag-and-drop demo page. After maximizing the browser window, it switches to an iframe containing the draggable elements using the driver.switchTo().frame() method. The draggable and droppable elements are located using driver.findElement() with their respective IDs, “draggable” and “droppable”.

The Actions class is then initialized to simulate the drag-and-drop action, with the dragAndDrop() method applied to the source (draggable element) and target (droppable element). After performing the action with perform(), a success message is printed. Finally, the driver.quit() method ensures the browser is closed once the operation completes, even if an exception occurs.

4. Example: Using Click-and-Hold for Drag-and-Drop

In some scenarios, the dragAndDrop() method might not work due to custom JavaScript implementations on the webpage. In such cases, we can use the clickAndHold(), moveToElement(), and release() methods to achieve the same result.

// Perform drag-and-drop using click-and-hold
actions.clickAndHold(source)
 .moveToElement(target)
 .release()
 .build()
 .perform();

In the above code snippet, the clickAndHold() method starts a click-and-hold action on the source element, followed by moveToElement() which moves the cursor to the target element. The release() method then releases the mouse button, completing the drag and drop process. Finally, build() constructs the action chain, and perform() executes the entire action sequence.

5. Conclusion

In this article, we explored how to implement drag-and-drop functionality in Selenium using the Actions class. We covered the essential steps, including initializing the WebDriver, locating draggable and droppable elements, and performing the drag-and-drop action using methods like dragAndDrop(), clickAndHold(), and moveToElement(). By automating drag-and-drop actions, Selenium enables efficient and reliable testing of web applications, ensuring that dynamic elements behave as expected across various browsers.

6. Download the Source Code

This article focused on implementing drag-and-drop actions using Selenium.