Action chain execution (perform) in Selenium Java - Build an Automation Script

Perform drag and drop using action chains

Preconditions (3)

Step 1: Locate the draggable element by id 'draggable'

Step 2: Locate the droppable element by id 'droppable'

Step 3: Use action chains to click and hold the draggable element

Step 4: Move the draggable element to the droppable element

Step 5: Release the mouse button to drop the element

Step 6: Perform the action chain

Step 7: Verify that the droppable element's text changes to 'Dropped!'

✅ Expected Result: The draggable element is 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 action chain is performed

Best Practices:

Use explicit waits to ensure elements are visible and interactable before actions

Use Actions class for complex user gestures

Use meaningful locators (By.id) for elements

Perform the action chain with perform() method

Use try-catch or test framework assertions for validation

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.Assert;
import java.time.Duration;

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://example.com/drag_and_drop_page");

            // Wait for draggable element
            WebElement draggable = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("draggable")));
            // Wait for droppable element
            WebElement droppable = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("droppable")));

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

            // Verify the droppable text changed to 'Dropped!'
            String dropText = droppable.getText();
            Assert.assertEquals("Dropped!", dropText);

            System.out.println("Test Passed: Drag and drop performed successfully.");
        } catch (Exception e) {
            System.out.println("Test Failed: " + e.getMessage());
        } finally {
            driver.quit();
        }
    }
}

This test script uses Selenium WebDriver with Java to automate a drag and drop action.

First, it opens the browser and navigates to the test page.

It waits explicitly for the draggable and droppable elements to be visible using WebDriverWait and ExpectedConditions.

Then, it creates an Actions object to build the action chain: click and hold the draggable element, move it to the droppable element, and release the mouse button.

The perform() method executes the chain.

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

The test prints a pass or fail message and closes the browser.

Common Mistakes - 3 Pitfalls

Using Thread.sleep() instead of explicit waits

{'mistake': 'Not calling perform() after building the action chain', 'why_bad': "Without perform(), the actions are not executed, so the drag and drop won't happen.", 'correct_approach': 'Always call perform() at the end of the action chain to execute it.'}

Using brittle locators like absolute XPath

Bonus Challenge

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

Show Hint

Practice

1. What does the perform() method do in Selenium's Action Chains?

easy

A. It pauses the execution of the action chain.

B. It initializes the action chain object.

C. It clears all the actions added to the chain.

D. It executes all the actions added to the chain in order.

Solution

1. Step 1: Understand the role of perform()

   The perform() method triggers the execution of all the actions queued in the action chain.

2. Step 2: Differentiate from other methods

   Other methods like build() prepare the chain, but perform() actually runs it.

3. Final Answer:

   It executes all the actions added to the chain in order. -> Option D

4. Quick Check:

   perform() runs actions [OK]

Hint: Remember: perform() means 'do it now' [OK]

Common Mistakes:

• Confusing perform() with build()
• Thinking perform() initializes the chain
• Assuming perform() clears actions

2. Which of the following is the correct way to execute an action chain in Selenium Java?

easy

A. actions.click(element).perform();

B. actions.run().click(element);

C. actions.click(element).execute();

D. actions.perform().click(element);

Solution

1. Step 1: Review correct method chaining syntax

   In Selenium Java, you add actions like click(element) and then call perform() to execute.

2. Step 2: Identify the correct method names

   perform() is the method to run the chain; execute() and run() do not exist.

3. Final Answer:

   actions.click(element).perform(); -> Option A

4. Quick Check:

   Action then perform() [OK]

Hint: Chain actions first, then call perform() [OK]

Common Mistakes:

• Calling perform() before adding actions
• Using non-existent methods like execute()
• Incorrect method order

3. What will happen when the following code runs?

Actions actions = new Actions(driver);
actions.moveToElement(menu).click(subMenu).perform();

medium

A. The mouse clicks 'menu' element and then moves to 'subMenu' element.

B. The mouse moves to 'menu' element and clicks on 'subMenu' element.

C. Only the 'menu' element is clicked.

D. The code throws a syntax error.

Solution

1. Step 1: Analyze the action chain sequence

   The code first moves the mouse to the 'menu' element, then clicks on the 'subMenu' element.

2. Step 2: Understand method chaining effect

   Actions are executed in order: moveToElement, then click, then perform runs them.

3. Final Answer:

   The mouse moves to 'menu' element and clicks on 'subMenu' element. -> Option B

4. Quick Check:

   moveToElement then click then perform [OK]

Hint: Actions run in order added, perform() executes all [OK]

Common Mistakes:

• Assuming click happens before moveToElement
• Thinking only one element is affected
• Believing code has syntax errors

4. Identify the error in this Selenium Java code snippet:

Actions actions = new Actions(driver);
actions.click(element);
actions.perform();

medium

A. The perform() method is called on a new Actions object, not the one with click.

B. The click() method must be followed immediately by perform() in the same statement.

C. There is no error; the code will work as expected.

D. The actions object is not properly initialized.

Solution

1. Step 1: Check method chaining and object usage

   The code adds a click action, then calls perform() on the same actions object, which is valid.

2. Step 2: Confirm no syntax or logical errors

   Calling perform() separately after adding actions is allowed and executes the chain.

3. Final Answer:

   There is no error; the code will work as expected. -> Option C

4. Quick Check:

   Separate perform() call is valid [OK]

Hint: perform() can be called separately after adding actions [OK]

Common Mistakes:

• Thinking perform() must be chained immediately
• Assuming new Actions object needed for perform()
• Believing code has syntax errors

5. You want to hover over a menu, then right-click a submenu, and finally double-click an option using Selenium Java Actions. Which code correctly performs all these actions in one chain?

hard

A. actions.moveToElement(menu).contextClick(subMenu).doubleClick(option).perform();

B. actions.moveToElement(menu).click(subMenu).doubleClick(option).perform();

C. actions.contextClick(menu).moveToElement(subMenu).doubleClick(option).perform();

D. actions.doubleClick(menu).contextClick(subMenu).moveToElement(option).perform();

Solution

1. Step 1: Understand the required sequence of actions

   The task is to hover (moveToElement) over 'menu', then right-click (contextClick) on 'subMenu', then double-click (doubleClick) on 'option'.

2. Step 2: Match methods to actions and order

   actions.moveToElement(menu).contextClick(subMenu).doubleClick(option).perform(); correctly chains moveToElement(menu), contextClick(subMenu), and doubleClick(option), then calls perform() to execute.

3. Final Answer:

   actions.moveToElement(menu).contextClick(subMenu).doubleClick(option).perform(); -> Option A

4. Quick Check:

   Hover, right-click, double-click in order [OK]

Hint: Chain actions in order, end with perform() [OK]

Common Mistakes:

• Mixing order of actions
• Using click instead of contextClick for right-click
• Calling perform() before all actions