Why complex interactions need Actions in Selenium Python - Automation Benefits in Action

Automate drag and drop interaction on a webpage

Preconditions (3)

Step 1: Open the webpage 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: Perform drag and drop from the draggable element to the droppable element

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

✅ Expected Result: The droppable element's text changes to 'Dropped!' after drag and drop action

Automation Requirements - Selenium with Python

Assertions Needed:

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

Best Practices:

Use Selenium's ActionChains for complex interactions like drag and drop

Use explicit waits to ensure elements are ready before interaction

Use By.ID locator strategy for stable element identification

Keep code readable and maintainable

Automated Solution

Selenium Python

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

# Setup WebDriver (assuming chromedriver is in PATH)
driver = webdriver.Chrome()

try:
    driver.get('https://jqueryui.com/droppable/')

    # Switch to frame containing draggable and droppable elements
    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 droppable text changed to 'Dropped!'
    dropped_text = WebDriverWait(driver, 10).until(
        EC.text_to_be_present_in_element((By.ID, 'droppable'), 'Dropped!')
    )

    assert dropped_text, "Droppable text did not change to 'Dropped!'"

finally:
    driver.quit()

This script automates a drag and drop interaction on a webpage using Selenium with Python.

First, it opens the webpage and switches to the frame containing the draggable and droppable elements because these elements are inside an iframe.

It waits explicitly for the draggable and droppable elements to be present to avoid timing issues.

Then, it uses ActionChains to perform the drag and drop action, which is necessary for complex interactions that simple click or send keys cannot handle.

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

The script uses explicit waits and proper locators for reliability and maintainability.

Common Mistakes - 4 Pitfalls

{'mistake': 'Trying to drag and drop using simple click and move commands without ActionChains', 'why_bad': 'Simple clicks do not simulate the drag and drop gesture properly, so the action fails or behaves unpredictably.', 'correct_approach': "Use Selenium's ActionChains drag_and_drop method to simulate the drag and drop interaction correctly."}

Not switching to the iframe before locating draggable and droppable elements

Using hardcoded sleeps instead of explicit waits

Using brittle XPath locators instead of stable IDs

Bonus Challenge

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

Show Hint

Practice

1. Why do we need to use Actions in Selenium for some interactions?

easy

A. Because Actions replaces the need for assertions.

B. Because Actions makes tests run faster.

C. Because Actions automatically finds elements on the page.

D. Because some user actions like drag-and-drop or hover require multiple steps.

Solution

1. Step 1: Understand simple vs complex interactions

   Simple clicks or typing can be done directly, but complex actions like drag or hover need multiple steps.

2. Step 2: Role of Actions class

   Actions lets you build these multi-step user interactions and then perform them together.

3. Final Answer:

   Because some user actions like drag-and-drop or hover require multiple steps. -> Option D

4. Quick Check:

   Complex user steps = Use Actions [OK]

Hint: Use Actions for multi-step user interactions [OK]

Common Mistakes:

• Thinking Actions make tests faster
• Believing Actions find elements automatically
• Confusing Actions with assertion tools

2. Which of the following is the correct way to start building an action chain in Selenium Python?

easy

A. actions = ActionChains(driver)

B. actions = ActionChain(driver)

C. actions = ActionChains()

D. actions = ActionChains(driver).start()

Solution

1. Step 1: Check the correct class name and constructor

   The correct class is ActionChains and it requires the driver as a parameter.

2. Step 2: Validate the syntax

   ActionChains(driver) is the correct syntax to create an action chain object.

3. Final Answer:

   actions = ActionChains(driver) -> Option A

4. Quick Check:

   Correct class and driver passed = actions = ActionChains(driver) [OK]

Hint: Remember exact class name: ActionChains(driver) [OK]

Common Mistakes:

• Misspelling ActionChains as ActionChain
• Not passing driver to constructor
• Calling non-existent start() method

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

from selenium.webdriver import ActionChains
from selenium.webdriver.common.by import By
actions = ActionChains(driver)
element = driver.find_element(By.ID, 'btn')
actions.move_to_element(element).click().perform()
print('Action performed')

medium

A. The mouse moves to the element, clicks it, and prints 'Action performed'.

B. SyntaxError because perform() is missing parentheses.

C. No action happens because move_to_element is not chained properly.

D. Runtime error because element is not defined.

Solution

1. Step 1: Analyze the action chain

   The code moves the mouse to the element, clicks it, then performs the action chain.

2. Step 2: Check the print statement

   After performing the actions, it prints 'Action performed'.

3. Final Answer:

   The mouse moves to the element, clicks it, and prints 'Action performed'. -> Option A

4. Quick Check:

   Correct chaining and perform() call = The mouse moves to the element, clicks it, and prints 'Action performed'. [OK]

Hint: Check perform() call and chaining order [OK]

Common Mistakes:

• Forgetting parentheses on perform()
• Assuming move_to_element alone triggers click
• Ignoring that element is defined before use

4. Identify the error in this code snippet that tries to drag an element:

from selenium.webdriver import ActionChains
from selenium.webdriver.common.by import By
actions = ActionChains(driver)
drag = driver.find_element(By.ID, 'drag')
drop = driver.find_element(By.ID, 'drop')
actions.drag_and_drop(drag).perform()

medium

A. ActionChains object is not created properly.

B. Missing the target element in drag_and_drop method.

C. perform() method is called before building the action.

D. Using wrong locator strategy for elements.

Solution

1. Step 1: Check drag_and_drop method parameters

   drag_and_drop requires two arguments: source and target elements.

2. Step 2: Identify missing argument

   The code only passes the source element, missing the target element.

3. Final Answer:

   Missing the target element in drag_and_drop method. -> Option B

4. Quick Check:

   drag_and_drop needs source and target [OK]

Hint: drag_and_drop needs two elements: source and target [OK]

Common Mistakes:

• Passing only one element to drag_and_drop
• Not creating ActionChains with driver
• Calling perform() too early

5. You want to test a keyboard shortcut: pressing Ctrl + A to select all text in an input box. Which is the best way to do this using Selenium Actions in Python?

hard

A. driver.find_element(By.ID, 'input').send_keys(Keys.CONTROL + 'a')

B. actions.send_keys(Keys.CONTROL + 'a').perform()

C. actions.key_down(Keys.CONTROL).send_keys('a').key_up(Keys.CONTROL).perform()

D. driver.find_element(By.ID, 'input').click()

Solution

1. Step 1: Understand keyboard shortcut with modifier keys

   Ctrl + A requires pressing Ctrl down, then 'a', then releasing Ctrl.

2. Step 2: Use Actions to build this sequence

   Use key_down(Keys.CONTROL), then send_keys('a'), then key_up(Keys.CONTROL), and finally perform().

3. Final Answer:

   actions.key_down(Keys.CONTROL).send_keys('a').key_up(Keys.CONTROL).perform() -> Option C

4. Quick Check:

   Use key_down + send_keys + key_up + perform [OK]

Hint: Use key_down and key_up for modifier keys [OK]

Common Mistakes:

• Trying to send combined keys as string
• Not releasing modifier key with key_up
• Using send_keys directly without Actions