Action chains in Selenium Python - Build an Automation Script

Automate drag and drop using Action Chains

Preconditions (3)

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 Action Chains to drag the draggable element and drop it onto the droppable element

Step 5: Verify that the droppable element's text changes to 'Dropped!' after the drop

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

Automation Requirements - Selenium with Python

Assertions Needed:

Verify the text of the droppable element is 'Dropped!' after the drag and drop action

Best Practices:

Use explicit waits to ensure elements are present before interacting

Use ActionChains class for drag and drop

Use By.ID locator strategy for elements

Handle browser setup and teardown properly

Automated Solution

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# Setup WebDriver
with webdriver.Chrome() as driver:
    driver.get('https://jqueryui.com/droppable/')

    # Switch to frame containing draggable and droppable
    WebDriverWait(driver, 10).until(EC.frame_to_be_available_and_switch_to_it((By.CSS_SELECTOR, '.demo-frame')))

    # Wait for draggable element
    draggable = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.ID, 'draggable')))
    droppable = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.ID, 'droppable')))

    # Perform drag and drop using ActionChains
    actions = ActionChains(driver)
    actions.drag_and_drop(draggable, droppable).perform()

    # Verify the text changed to 'Dropped!'
    dropped_text = droppable.text
    assert dropped_text == 'Dropped!', f"Expected text 'Dropped!' but got '{dropped_text}'"

    # No need to quit explicitly because of 'with' context

This script opens the jQuery UI droppable demo page, which contains draggable and droppable elements inside an iframe.

We first wait for the iframe to be available and switch to it, because the draggable and droppable elements are inside that frame.

Then we wait explicitly for both elements to be present using WebDriverWait and expected_conditions.

We use ActionChains to drag the draggable element and drop it onto the droppable element.

After performing the drag and drop, we check the text of the droppable element to confirm it changed to 'Dropped!'. This verifies the action was successful.

The use of explicit waits ensures the elements are ready before interaction, avoiding flaky tests.

The with statement ensures the browser closes automatically after the test.

Common Mistakes - 4 Pitfalls

Not switching to the iframe before locating draggable and droppable elements

Using time.sleep() instead of explicit waits

Using incorrect locator strategies like XPath with absolute paths

Not using ActionChains for drag and drop and trying to simulate with click and move separately

Bonus Challenge

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

Show Hint

Practice

1. What is the main purpose of using ActionChains in Selenium with Python?

easy

A. To locate elements on a web page

B. To perform complex mouse and keyboard actions in sequence

C. To write assertions for test validations

D. To start the Selenium WebDriver server

Solution

1. Step 1: Understand the role of ActionChains

   ActionChains is designed to handle complex user interactions like mouse movements, clicks, and keyboard inputs in a sequence.

2. Step 2: Compare with other options

   Locating elements, assertions, and starting the server are handled by other Selenium components, not ActionChains.

3. Final Answer:

   To perform complex mouse and keyboard actions in sequence -> Option B

4. Quick Check:

   ActionChains = complex actions [OK]

Hint: ActionChains = chain mouse/keyboard steps, then perform [OK]

Common Mistakes:

• Confusing ActionChains with element locating
• Thinking ActionChains runs tests or assertions
• Assuming ActionChains starts the WebDriver

2. Which of the following is the correct way to import and create an ActionChains object in Selenium Python?

easy

A. from selenium.webdriver import ActionChains
actions = ActionChains()

B. import ActionChains from selenium.webdriver
actions = ActionChains()

C. from selenium.webdriver.common.action_chains import ActionChains
actions = ActionChains(driver)

D. from selenium.webdriver.common.actions import ActionChains
actions = ActionChains(driver)

Solution

1. Step 1: Check the correct import path

   The correct import path is selenium.webdriver.common.action_chains for ActionChains.

2. Step 2: Verify object creation syntax

   ActionChains requires the WebDriver instance as an argument during creation, so ActionChains(driver) is correct.

3. Final Answer:

   from selenium.webdriver.common.action_chains import ActionChains actions = ActionChains(driver) -> Option C

4. Quick Check:

   Import from common.action_chains + pass driver [OK]

Hint: Import from common.action_chains and pass driver [OK]

Common Mistakes:

• Forgetting to pass driver to ActionChains constructor
• Using wrong import path or syntax
• Calling ActionChains without parentheses

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

from selenium.webdriver.common.action_chains import ActionChains

actions = ActionChains(driver)
actions.move_to_element(element).click().perform()

medium

A. Moves mouse to the element and clicks it

B. Clicks the element without moving the mouse

C. Throws an error because perform() is missing

D. Moves mouse but does not click the element

Solution

1. Step 1: Analyze the chained actions

   The code chains move_to_element(element) followed by click(), then calls perform() to execute both actions.

2. Step 2: Understand perform() role

   Calling perform() runs all chained actions in order, so the mouse moves to the element and clicks it.

3. Final Answer:

   Moves mouse to the element and clicks it -> Option A

4. Quick Check:

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

Hint: perform() runs all chained actions in order [OK]

Common Mistakes:

• Forgetting to call perform() so actions don't run
• Assuming click works without moving mouse first
• Thinking perform() is optional

4. Identify the error in this code snippet:

actions = ActionChains(driver)
actions.click(element)
actions.perform()

medium

A. No error; code will run correctly

B. perform() should be called on actions.click() directly

C. click() requires move_to_element before it

D. Missing parentheses after click method call

Solution

1. Step 1: Check click() method usage

   The click() method can accept an element as an argument to click it directly without needing move_to_element.

2. Step 2: Verify perform() call

   Calling perform() on the ActionChains object executes all queued actions correctly.

3. Final Answer:

   No error; code will run correctly -> Option A

4. Quick Check:

   click(element) + perform() = valid usage [OK]

Hint: click(element) works without move_to_element [OK]

Common Mistakes:

• Thinking move_to_element is always required before click
• Assuming perform() must be chained immediately
• Missing parentheses on click() (not the case here)

5. You want to drag an element from source and drop it onto target using ActionChains. Which code snippet correctly performs this action?

hard

A. actions.drag_and_drop(source, target).perform()

B. actions.click_and_hold(source).move_to_element(target).release().perform()

C. actions.move_to_element(source).click().move_to_element(target).click().perform()

D. Both B and D are correct ways to drag and drop

Solution

1. Step 1: Understand drag_and_drop method

   drag_and_drop(source, target) is a built-in ActionChains method that performs drag and drop in one call.

2. Step 2: Understand manual drag and drop steps

   Using click_and_hold(source), then move_to_element(target), then release() and perform() also correctly performs drag and drop manually.

3. Step 3: Evaluate other options

   actions.move_to_element(source).click().move_to_element(target).click().perform() clicks source and target separately, which is not a drag and drop action.

4. Final Answer:

   Both B and D are correct ways to drag and drop -> Option D

5. Quick Check:

   drag_and_drop or click_hold+move+release = drag-drop [OK]

Hint: Use drag_and_drop or click_hold+move+release [OK]

Common Mistakes:

• Using click instead of click_and_hold for drag
• Missing release() after moving element
• Confusing drag_and_drop with simple clicks