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

Practice

1. What is the primary purpose of the dragAndDrop method in Selenium's Actions class?

easy

A. To click on an element without moving it

B. To simulate dragging an element and dropping it onto another element

C. To scroll the page to a specific element

D. To take a screenshot of the dragged element

Solution

1. Step 1: Understand the dragAndDrop method

   The dragAndDrop method is designed to simulate the user action of clicking and holding an element, moving it to another element, and releasing it.

2. Step 2: Compare with other actions

   Options A, C, and D describe different actions unrelated to drag and drop functionality.

3. Final Answer:

   To simulate dragging an element and dropping it onto another element -> Option B

4. Quick Check:

   dragAndDrop = simulate drag and drop [OK]

Hint: Remember dragAndDrop moves element from source to target [OK]

Common Mistakes:

• Confusing dragAndDrop with click actions
• Thinking dragAndDrop scrolls the page
• Assuming dragAndDrop takes screenshots

2. Which of the following is the correct syntax to perform a drag and drop using Selenium Actions in Java?

easy

A. actions.dragAndDrop(source, target).perform();

B. actions.dragDrop(source, target).perform();

C. actions.dragAndDrop(source).to(target);

D. actions.drag(source).drop(target).execute();

Solution

1. Step 1: Recall the correct method name and chaining

   The correct method is dragAndDrop(source, target) followed by perform() to execute the action.

2. Step 2: Identify incorrect method names and chaining

   Options A, B, and C use incorrect method names or chaining syntax that do not exist in Selenium's Actions class.

3. Final Answer:

   actions.dragAndDrop(source, target).perform(); -> Option A

4. Quick Check:

   Correct method name + perform() = actions.dragAndDrop(source, target).perform(); [OK]

Hint: Use dragAndDrop(source, target).perform() exactly [OK]

Common Mistakes:

• Using wrong method names like dragDrop
• Missing perform() at the end
• Incorrect chaining of methods

3. Given the following code snippet, what will be the result after execution?

WebElement source = driver.findElement(By.id("item1"));
WebElement target = driver.findElement(By.id("box1"));
Actions actions = new Actions(driver);
actions.clickAndHold(source).moveToElement(target).release().perform();
String text = target.getText();

If the drag and drop is successful, what should text contain?

medium

A. Null value

B. An empty string

C. The text of the dragged element (item1)

D. The text of the target element before drag

Solution

1. Step 1: Understand the drag and drop effect

   Dragging source onto target usually moves or copies the source element's content into the target area.

2. Step 2: Check what target.getText() returns after drop

   After a successful drop, the target element's text usually remains unchanged unless the page's DOM is updated by JavaScript. The getText() method returns the visible text of the target element, which typically does not change automatically after drag and drop.

3. Final Answer:

   The text of the target element before drag -> Option D

4. Quick Check:

   target.getText() usually unchanged after drag and drop unless DOM updates [OK]

Hint: After drop, target text usually remains the same unless DOM updates [OK]

Common Mistakes:

• Assuming target text changes automatically
• Expecting empty or null text after drop
• Confusing source and target texts

4. Identify the error in the following Selenium Java code for drag and drop:

WebElement source = driver.findElement(By.id("drag"));
WebElement target = driver.findElement(By.id("drop"));
Actions actions = new Actions(driver);
actions.clickAndHold(source).moveToElement(target).perform();

medium

A. Missing release() before perform()

B. Incorrect locator strategy for elements

C. Actions class cannot be instantiated directly

D. No need to call perform() after actions

Solution

1. Step 1: Review the drag and drop sequence

   Drag and drop requires clicking and holding the source, moving to target, then releasing the mouse button before performing.

2. Step 2: Identify missing release()

   The code misses release(), so the drop action is incomplete and will not work as expected.

3. Final Answer:

   Missing release() before perform() -> Option A

4. Quick Check:

   Drag and drop needs release() [OK]

Hint: Always call release() before perform() in drag and drop [OK]

Common Mistakes:

• Forgetting release() after moveToElement
• Incorrect element locators (not in this code)
• Not calling perform() at all

5. You want to verify that a drag and drop action moved an item from a list to a cart on a webpage. Which approach is best to confirm the drop was successful in Selenium Java?

hard

A. Check the page title has changed after drag and drop

B. Verify the source element is still visible after drop

C. Check that the cart element contains the dragged item's text after drop

D. Confirm the browser URL changed after drag and drop

Solution

1. Step 1: Understand what changes after drag and drop

   The dragged item should appear inside the cart element, so its text should be present there.

2. Step 2: Evaluate verification methods

   Checking source visibility (B) might not confirm drop; page title (C) and URL (D) usually do not change after drag and drop.

3. Final Answer:

   Check that the cart element contains the dragged item's text after drop -> Option C

4. Quick Check:

   Verify drop by checking target content [OK]

Hint: Verify drop by checking target element's content [OK]

Common Mistakes:

• Checking unrelated page properties like title or URL
• Assuming source element visibility confirms drop
• Not verifying target element content