Drag and drop in Selenium Java - Build an Automation Script

Drag and Drop an Element on the Webpage

Preconditions (3)

Step 1: Open the browser and navigate to 'https://jqueryui.com/droppable/'

Step 2: Switch to the frame containing the draggable and droppable elements

Step 3: Locate the draggable element with id 'draggable'

Step 4: Locate the droppable element with id 'droppable'

Step 5: Drag the draggable element and drop it onto the droppable element

Step 6: Verify that the text inside the droppable element changes to 'Dropped!'

✅ Expected Result: The draggable element is successfully dropped onto the droppable element, and the droppable element's text changes to 'Dropped!'

Automation Requirements - Selenium WebDriver with Java

Assertions Needed:

Verify the droppable element's text changes to 'Dropped!' after drop

Best Practices:

Use explicit waits to wait for elements to be visible and interactable

Use Actions class for drag and drop

Use Page Object Model to separate page elements and actions

Handle iframe switching properly

Use meaningful locators like By.id or By.cssSelector

Automated Solution

Selenium Java

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;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.junit.jupiter.api.AfterEach;
import org.junit.jupiter.api.BeforeEach;
import org.junit.jupiter.api.Test;
import static org.junit.jupiter.api.Assertions.assertEquals;
import java.time.Duration;

public class DragAndDropTest {
    private WebDriver driver;
    private WebDriverWait wait;

    @BeforeEach
    public void setUp() {
        driver = new ChromeDriver();
        wait = new WebDriverWait(driver, Duration.ofSeconds(10));
        driver.manage().window().maximize();
    }

    @Test
    public void testDragAndDrop() {
        driver.get("https://jqueryui.com/droppable/");

        // Switch to iframe containing draggable and droppable
        wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(By.cssSelector("iframe.demo-frame")));

        // Locate draggable and droppable elements
        WebElement draggable = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("draggable")));
        WebElement droppable = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("droppable")));

        // Perform drag and drop
        Actions actions = new Actions(driver);
        actions.dragAndDrop(draggable, droppable).perform();

        // Verify the text changed to 'Dropped!'
        String droppedText = droppable.getText();
        assertEquals("Dropped!", droppedText, "Droppable text should be 'Dropped!' after drop");
    }

    @AfterEach
    public void tearDown() {
        if (driver != null) {
            driver.quit();
        }
    }
}

This test uses Selenium WebDriver with Java and JUnit 5.

In setUp(), we start the Chrome browser and set an explicit wait.

We open the URL with draggable and droppable elements.

Since the elements are inside an iframe, we switch to it using frameToBeAvailableAndSwitchToIt with a CSS selector for the iframe.

We locate the draggable and droppable elements by their id attributes, waiting until they are visible.

We use the Actions class to perform the drag and drop action.

After the drop, we check that the droppable element's text changed to "Dropped!" using an assertion.

Finally, in tearDown(), we close the browser to clean up.

This structure follows best practices: explicit waits, proper iframe handling, meaningful locators, and clean setup/teardown.

Common Mistakes - 4 Pitfalls

Not switching to the iframe before locating elements

Using Thread.sleep() instead of explicit waits

Using hardcoded XPath that is brittle

{'mistake': 'Not using Actions class for drag and drop', 'why_bad': 'Drag and drop requires complex mouse actions that cannot be done with simple click commands.', 'correct_approach': "Use Selenium's Actions class method dragAndDrop() for reliable drag and drop."}

Bonus Challenge

Now add data-driven testing with 3 different draggable and droppable element pairs on a similar page

Show Hint