Drag and drop in Selenium Python - Build an Automation Script

Verify drag and drop functionality on demo page

Preconditions (2)

Step 1: Switch to the frame containing the draggable and droppable elements

Step 2: Locate the draggable element with id 'draggable'

Step 3: Locate the droppable element with id 'droppable'

Step 4: Drag the draggable element and drop it onto the droppable element

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

Automation Requirements - Selenium with Python

Assertions Needed:

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

Best Practices:

Use explicit waits to ensure elements are present before interacting

Use Selenium's ActionChains for drag and drop

Switch to the correct iframe before interacting with elements inside it

Use meaningful locators like id or CSS selectors

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 import ActionChains

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

    wait = WebDriverWait(driver, 10)

    # Wait for the iframe to be present and switch to it
    iframe = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, '.demo-frame')))
    driver.switch_to.frame(iframe)

    # Wait for draggable and droppable elements
    draggable = wait.until(EC.presence_of_element_located((By.ID, 'draggable')))
    droppable = wait.until(EC.presence_of_element_located((By.ID, 'droppable')))

    # Perform drag and drop
    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}'"

    # Switch back to default content
    driver.switch_to.default_content()

This script opens the demo page with drag and drop functionality.

It waits explicitly for the iframe to load, then switches into it because the draggable and droppable elements are inside an iframe.

It waits for the draggable and droppable elements to be present, then uses Selenium's ActionChains to drag the draggable element onto the droppable element.

After the action, it asserts that the droppable element's text changes to 'Dropped!' which confirms the drag and drop worked.

Finally, it switches back to the main page content.

Common Mistakes - 4 Pitfalls

Not switching to the iframe before interacting with elements inside it

Using time.sleep() instead of explicit waits

Using incorrect locators like absolute XPath for draggable and droppable elements

{'mistake': 'Not verifying the result after drag and drop', 'why_bad': 'Without assertions, the test does not confirm if the drag and drop actually succeeded.', 'correct_approach': "Assert that the droppable element's text changes to 'Dropped!' after the action."}

Bonus Challenge

Now add data-driven testing with 3 different draggable and droppable pairs on a similar page

Show Hint