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

Practice

1. Why do complex gestures in Selenium WebDriver require the use of the Actions API?

easy

A. Because simple clicks cannot be performed without the Actions API.

B. Because complex gestures involve multiple steps that need to be chained and executed together.

C. Because the Actions API is the only way to locate elements on the page.

D. Because the Actions API automatically waits for page loads.

Solution

1. Step 1: Understand what complex gestures are

   Complex gestures like drag-and-drop or hover require multiple user interactions chained together.

2. Step 2: Recognize the role of Actions API

   The Actions API allows chaining these steps and executing them as one action with perform().

3. Final Answer:

   Because complex gestures involve multiple steps that need to be chained and executed together. -> Option B

4. Quick Check:

   Complex gestures = multiple steps = Actions API [OK]

Hint: Complex gestures need chaining steps with perform() [OK]

Common Mistakes:

• Thinking simple clicks need Actions API
• Confusing element locating with Actions API
• Assuming Actions API handles page loads

2. Which of the following is the correct way to start building a complex gesture using the Actions API in Selenium Java?

easy

A. Actions action = new Actions(driver);

B. Actions action = new Actions();

C. Actions action = new Actions(WebDriver);

D. Actions action = new Actions(driver).build();

Solution

1. Step 1: Check the Actions constructor requirements

   The Actions class requires a WebDriver instance passed to its constructor.

2. Step 2: Validate the syntax

   Only new Actions(driver); correctly passes the driver object.

3. Final Answer:

   Actions action = new Actions(driver); -> Option A

4. Quick Check:

   Actions constructor needs driver instance [OK]

Hint: Actions constructor needs driver instance [OK]

Common Mistakes:

• Omitting driver parameter
• Passing class name instead of instance
• Calling build() too early

3. What will be the result of the following Selenium Java code snippet?

Actions action = new Actions(driver);
action.moveToElement(element).click().perform();

medium

A. It only moves the mouse but does not click.

B. It throws a syntax error because perform() is missing.

C. It moves the mouse to the element and clicks it.

D. It clicks the element without moving the mouse.

Solution

1. Step 1: Analyze the method chain

   The code moves the mouse to the element, then clicks, then calls perform() to execute.

2. Step 2: Understand perform() role

   Without perform(), actions are not executed. Here it is present, so both move and click happen.

3. Final Answer:

   It moves the mouse to the element and clicks it. -> Option C

4. Quick Check:

   moveToElement + click + perform = move and click [OK]

Hint: perform() executes all chained actions [OK]

Common Mistakes:

• Forgetting perform() call
• Assuming click happens before move
• Confusing moveToElement with just click

4. Identify the error in this Selenium Java code snippet for a drag-and-drop action:

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

medium

A. The perform() method is missing.

B. The perform() method is called on the wrong object.

C. The dragAndDrop method must be followed by perform() in the same statement.

D. The dragAndDrop method does not exist in Actions API.

Solution

1. Step 1: Understand method chaining in Actions API

   Actions methods like dragAndDrop add actions to a sequence that must be executed with perform().

2. Step 2: Check how perform() is called

   perform() is missing, so the drag-and-drop will not execute. Correct usage: action.dragAndDrop(source, target).perform();

3. Final Answer:

   The perform() method is missing. -> Option A

4. Quick Check:

   dragAndDrop needs perform() [OK]

Hint: dragAndDrop needs perform() [OK]

Common Mistakes:

• Forgetting to call perform() after dragAndDrop
• Assuming dragAndDrop executes immediately
• Confusing method existence

5. You want to perform a right-click (context click) on an element and then select an option from the context menu using Selenium Java. Which approach correctly uses the Actions API to achieve this?

hard

A. Use action.doubleClick(element).perform(); then driver.findElement(...).click();

B. Use element.rightClick(); followed by driver.findElement(...).click();

C. Use action.click(element).perform(); then driver.findElement(...).click();

D. Use action.contextClick(element).sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ENTER).perform();

Solution

1. Step 1: Identify the correct Actions API method for right-click

   The method contextClick(element) performs a right-click on the element.

2. Step 2: Chain keyboard actions to select menu option

   Sending arrow down and enter keys simulates selecting an option from the context menu.

3. Step 3: Execute all actions with perform()

   Calling perform() runs the chained actions in order.

4. Final Answer:

   Use action.contextClick(element).sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ENTER).perform(); -> Option D

5. Quick Check:

   Right-click + keyboard keys + perform() = Use action.contextClick(element).sendKeys(Keys.ARROW_DOWN).sendKeys(Keys.ENTER).perform(); [OK]

Hint: Chain contextClick with keys and perform() [OK]

Common Mistakes:

• Using non-existent rightClick() method on element
• Using click instead of contextClick
• Forgetting to call perform()