Why complex gestures need Actions API in Selenium Java - Automation Benefits in Action

Automate drag and drop using Actions API

Preconditions (2)

Step 1: Open the web page with draggable and droppable elements

Step 2: Locate the draggable element by its id 'draggable'

Step 3: Locate the droppable element by its id 'droppable'

Step 4: Use Actions API to click and hold the draggable element

Step 5: Move the draggable element over the droppable element

Step 6: Release the mouse button to drop the element

Step 7: Verify that the droppable element's text 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 is 'Dropped!' after the drag and drop

Best Practices:

Use Actions class for complex gestures like drag and drop

Use explicit waits to ensure elements are interactable

Use meaningful locators like By.id

Keep code readable and maintainable

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 java.time.Duration;
import static org.junit.jupiter.api.Assertions.assertEquals;

public class DragAndDropTest {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));

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

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

            WebElement draggable = wait.until(ExpectedConditions.elementToBeClickable(By.id("draggable")));
            WebElement droppable = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("droppable")));

            Actions actions = new Actions(driver);
            actions.clickAndHold(draggable)
                   .moveToElement(droppable)
                   .release()
                   .perform();

            String dropText = droppable.getText();
            assertEquals("Dropped!", dropText, "Droppable text should be 'Dropped!' after drop");

        } finally {
            driver.quit();
        }
    }
}

This test automates a drag and drop gesture using Selenium WebDriver with Java.

First, it opens the web page with draggable and droppable elements inside an iframe, so it switches to that iframe.

It waits explicitly for the draggable and droppable elements to be ready to interact.

Then it uses the Actions class to perform the complex gesture: click and hold the draggable element, move it over the droppable element, and release the mouse button.

Finally, it asserts that the droppable element's text changed to 'Dropped!' to confirm the action succeeded.

This approach is necessary because simple click commands cannot simulate drag and drop gestures, which require a sequence of mouse actions.

Common Mistakes - 4 Pitfalls

Trying to drag and drop using simple click() and sendKeys() methods

{'mistake': 'Not switching to the iframe before locating elements inside it', 'why_bad': "Elements inside iframes are not accessible until you switch the driver's context to that iframe.", 'correct_approach': 'Use driver.switchTo().frame() or explicit wait for frame and switch before interacting with elements inside.'}

Using Thread.sleep() instead of explicit waits

Using brittle XPath locators instead of stable locators like By.id

Bonus Challenge

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

Show Hint