How do you test a drag and drop feature in Selenium?

Answer

Drag and Drop in Selenium

Method 1 — Actions.dragAndDrop() (Standard)

Java

WebElement source = driver.findElement(By.id("dragItem"));
WebElement target = driver.findElement(By.id("dropZone"));

Actions actions = new Actions(driver);
actions.dragAndDrop(source, target).perform();

Method 2 — Actions with Click-Hold-Release

Java

WebElement source = driver.findElement(By.id("dragItem"));
WebElement target = driver.findElement(By.id("dropZone"));

new Actions(driver)
    .clickAndHold(source)
    .pause(Duration.ofMillis(500))  // pause helps with some implementations
    .moveToElement(target)
    .pause(Duration.ofMillis(500))
    .release()
    .perform();

Method 3 — Drag by Offset (Pixel Coordinates)

Java

WebElement source = driver.findElement(By.cssSelector(".draggable-box"));

new Actions(driver)
    .clickAndHold(source)
    .moveByOffset(300, 0)   // move 300px right, 0px down
    .release()
    .perform();

Method 4 — JavaScript Simulation (for HTML5 DnD)

Many modern drag-drop implementations (React DnD, Sortable.js) use custom events that Actions cannot trigger. Use a JS simulation:

Java

String dragDropScript = """
    function simulateDragDrop(sourceSelector, targetSelector) {
        var source = document.querySelector(sourceSelector);
        var target = document.querySelector(targetSelector);
        var dataTransfer = new DataTransfer();

        source.dispatchEvent(new DragEvent('dragstart', {dataTransfer: dataTransfer, bubbles: true}));
        target.dispatchEvent(new DragEvent('dragover',  {dataTransfer: dataTransfer, bubbles: true}));
        target.dispatchEvent(new DragEvent('drop',      {dataTransfer: dataTransfer, bubbles: true}));
        source.dispatchEvent(new DragEvent('dragend',   {dataTransfer: dataTransfer, bubbles: true}));
    }
    simulateDragDrop(arguments[0], arguments[1]);
""";

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript(dragDropScript, "#dragItem", "#dropZone");

Verify Drop Was Successful

Java

// After drag-drop, verify target contains the item
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));
WebElement dropZone = wait.until(
    ExpectedConditions.visibilityOfElementLocated(By.id("dropZone"))
);
Assert.assertTrue(dropZone.getText().contains("Widget A"),
    "Item was not dropped into the drop zone");

Drag and Reorder List Items

Java

// Drag 3rd item to 1st position
List<WebElement> items = driver.findElements(By.cssSelector(".sortable-item"));
WebElement thirdItem = items.get(2);
WebElement firstItem = items.get(0);

new Actions(driver)
    .clickAndHold(thirdItem)
    .moveToElement(firstItem)
    .release()
    .perform();

// Verify new order
List<WebElement> reordered = driver.findElements(By.cssSelector(".sortable-item"));
Assert.assertEquals(reordered.get(0).getText(), thirdItem.getText());

Common Issues and Fixes

Issue	Fix
DnD doesn''t work with Actions	Use JS simulation for HTML5 DnD
Drop happens too fast	Add `.pause(Duration.ofMillis(500))`
Source element not draggable	Check `draggable="true"` in HTML
React/Vue DnD not responding	Use library-specific event dispatching