Automating Drag and Drop Actions in Selenium WebDriver Java

Modern web applications often rely on interactive UI elements like drag-and-drop to enhance user experience. For test automation engineers using Selenium WebDriver with Java, handling such actions can be tricky—but entirely possible. In this blog, we’ll explore how to automate drag-and-drop interactions, understand common pitfalls, and implement robust test scripts.

Understanding Drag and Drop in Web Automation

Drag-and-drop is a complex UI action that typically involves a user:

Clicking and holding a draggable element,

Moving it to a target location,

Releasing the mouse button.

To automate this in Selenium, the Actions class is used, which simulates advanced user gestures such as mouse movements, clicks, and keyboard inputs.


Prerequisites

Ensure you have the following set up:

Java JDK installed

Maven or Gradle project with Selenium dependency

A browser driver (like ChromeDriver)

Maven Dependency:


xml


<dependency>

  <groupId>org.seleniumhq.selenium</groupId>

  <artifactId>selenium-java</artifactId>

  <version>4.19.1</version>

</dependency>

Basic Drag and Drop Using Actions Class

java

Copy

Edit

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;


public class DragAndDropExample {

    public static void main(String[] args) {

        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");


        WebDriver driver = new ChromeDriver();

        driver.get("https://jqueryui.com/droppable/");

        driver.switchTo().frame(0); // Switch to frame if required


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


        driver.quit();

    }

}

This example uses a classic drag-and-drop demo from jQuery UI. The Actions class method dragAndDrop(source, target) handles the complete process.


Alternative Approach: Click, Hold, Move, and Release

Sometimes, dragAndDrop() might fail due to JavaScript frameworks, CSS transforms, or Shadow DOMs. An alternative approach uses low-level actions:


java

Copy

Edit

Actions action = new Actions(driver);

action.clickAndHold(source)

      .moveToElement(target)

      .release()

      .build()

      .perform();

This method mimics a real user more precisely and is more effective on complex web apps like those built with React or Angular.


Handling Drag and Drop with JavaScript (Advanced)

In cases where the Actions class doesn’t work (like in HTML5 drag-and-drop), you can use JavaScript injection:


java


JavascriptExecutor js = (JavascriptExecutor) driver;

String script = "function createEvent(typeOfEvent) {" +

    "var event =document.createEvent(\"CustomEvent\");" +

    "event.initCustomEvent(typeOfEvent,true, true, null);" +

    "event.dataTransfer = {" +

    "data: {}," +

    "setData: function (key, value) {" +

    "this.data[key] = value;" +

    "}," +

    "getData: function (key) {" +

    "return this.data[key];" +

    "}" +

    "};" +

    "return event;" +

    "}" +

    "function dispatchEvent(element, event, transferData) {" +

    "if (transferData !== undefined) {" +

    "event.dataTransfer = transferData;" +

    "}" +

    "if (element.dispatchEvent) {" +

    "element.dispatchEvent(event);" +

    "} else if (element.fireEvent) {" +

    "element.fireEvent(\"on\" + event.type, event);" +

    "}" +

    "}" +

    "function simulateHTML5DragAndDrop(element, target) {" +

    "var dragStartEvent = createEvent('dragstart');" +

    "dispatchEvent(element, dragStartEvent);" +

    "var dropEvent = createEvent('drop');" +

    "dispatchEvent(target, dropEvent, dragStartEvent.dataTransfer);" +

    "var dragEndEvent = createEvent('dragend');" +

    "dispatchEvent(element, dragEndEvent, dragStartEvent.dataTransfer);" +

    "}" +

    "simulateHTML5DragAndDrop(arguments[0], arguments[1]);";


js.executeScript(script, source, target);

Best Practices

Always wait for elements to be visible and interactable before performing drag-and-drop.

Use WebDriverWait with expected conditions.

Consider browser-specific issues, as drag-and-drop might behave differently in Chrome vs Firefox.

Use headful mode (non-headless) for debugging complex interactions.


Conclusion

Automating drag-and-drop actions in Selenium WebDriver with Java is entirely possible using the Actions class, and sometimes JavaScript workarounds for advanced UIs. By understanding different techniques and applying best practices, testers can confidently automate even the most dynamic user interactions in modern web applications.


Learn Selenium with Java Training

Read More: Testing Responsive Web Design with Selenium Java

Read More: Handling Calendar and Date Pickers in Selenium Java
Read More: Parameterization in Selenium Java Using TestNG


Visit Our IHUB Talent Institute Hyderabad
Get Direction 

Comments

Post a Comment

Popular posts from this blog

How to Use Tosca's Test Configuration Parameters

Tosca by Tricentis is a powerful model-based test automation tool widely used in enterprise environments for end-to-end testing. One of its most useful features is Test Configuration Parameters (TCPs), which provide flexibility and control in managing test execution. TCPs enable testers to create reusable test cases by passing dynamic values without hardcoding them. This significantly enhances test maintenance, scalability, and efficiency. In this blog, we’ll explore what Test Configuration Parameters are, how to create and use them, and the best practices to follow when working with TCPs in Tosca. What Are Test Configuration Parameters? Test Configuration Parameters are custom-defined key-value pairs that can be associated with test cases, test case folders, or execution lists in Tosca. They help manage configuration data such as environment URLs, browser types, credentials, or any other variable data that may differ across test runs. By using TCPs, you can avoid duplicating test case...
Read more

Using Hibernate ORM for Fullstack Java Data Management

In the world of fullstack Java development, managing data efficiently and seamlessly across the application is critical. One of the most powerful tools in the Java ecosystem for handling database operations is Hibernate ORM (Object-Relational Mapping). Hibernate simplifies the interaction between Java applications and relational databases, reducing boilerplate code and improving maintainability. This blog explores how Hibernate ORM works, why it’s widely used, and how it fits into the data management strategy of a fullstack Java application. What is Hibernate ORM? Hibernate ORM is an open-source Java framework that provides a powerful and flexible mechanism for mapping Java objects to database tables. It abstracts the low-level JDBC code, allowing developers to work with high-level object-oriented concepts. Instead of writing raw SQL queries, Hibernate allows developers to define database interactions using simple Java classes (also known as POJOs) and annotations or XML configurations...
Read more

Creating a Test Execution Report with Charts in Playwright

Modern test automation isn't just about running tests—it's also about presenting clear, visual feedback on test results. When working with Playwright, one of the most powerful end-to-end testing tools for modern web apps, generating detailed execution reports can help your team track progress, identify issues quickly, and make data-driven decisions. A visual report with charts brings your testing efforts to life. In this blog, we’ll walk through how to create a test execution report with charts using Playwright’s built-in capabilities along with third-party tools for enhanced visualization. Why Visual Reports Matter Plain text logs and console outputs are hard to parse at scale. A good report should answer questions like: How many tests passed or failed? What’s the overall success rate? Which tests are flaky or slow? How have test results changed over time? Visualizing this data with charts—like pie charts, bar graphs, or timelines—helps QA teams and stakeholders better underst...
Read more