Introduction

Many modern web applications allow users to move objects from one location to another using Drag and Drop. This feature is commonly used in dashboards, Kanban boards, file uploads, scheduling applications, and graphical editors.

Since drag-and-drop is an advanced mouse interaction, Selenium performs it using the ActionChains class. The drag_and_drop() method simulates clicking an element, dragging it to another element, and releasing it.

In this tutorial, you’ll learn how to automate drag-and-drop operations using Selenium with Python, along with practical examples, real-world scenarios, common mistakes, and best practices.

What is Drag and Drop?

Drag and Drop is a user interaction where:

A user clicks an element.
Drags it to another location.
Releases the mouse button.

Example:

Source Element

      │

      ▼

Drag

      │

      ▼

Target Element

Why Automate Drag and Drop?

Drag-and-drop automation helps you:

Test dashboard widgets.
Verify Kanban boards.
Test scheduling applications.
Validate graphical editors.
Automate interactive user interfaces.

How Selenium Performs Drag and Drop

Selenium uses the ActionChains class.

The most commonly used method is:

ActionChains(driver)\
    .drag_and_drop(source, target)\
    .perform()

This performs the complete drag-and-drop operation automatically.

Example

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.by import By


# Topic: 33. Actions Class - Drag and Drop
# Practice site: https://www.testmuai.com/selenium-playground/
# Run: pytest -s 33_examples/test_02_drag_and_drop.py
#
# ActionChains can drag one element to another. This example creates a simple
# drag target on the practice page so the result is easy to assert.


def test_drag_and_drop_element():
    driver = webdriver.Chrome()

    try:
        driver.get("https://www.testmuai.com/selenium-playground/")

        driver.execute_script(
            """
            const source = document.createElement('div');
            source.id = 'drag-source';
            source.textContent = 'Drag me';
            source.style.cssText = 'width:100px;height:40px;background:#bde;padding:10px;';

            const target = document.createElement('div');
            target.id = 'drop-target';
            target.textContent = 'Drop here';
            target.style.cssText = 'width:150px;height:80px;background:#eee;margin-top:40px;padding:10px;';
            target.addEventListener('mouseup', () => target.dataset.dropped = 'yes');

            document.body.append(source, target);
            """
        )

        source = driver.find_element(By.ID, "drag-source")
        target = driver.find_element(By.ID, "drop-target")
        ActionChains(driver).drag_and_drop(source, target).perform()

        assert target.get_attribute("data-dropped") == "yes"
    finally:
        driver.quit()

Understanding the Code

Import Required Libraries

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.by import By

These modules are required to launch the browser, locate web elements, and perform advanced mouse actions.

Create a Chrome Browser Instance

driver = webdriver.Chrome()

Starts a new Chrome browser session.

Open the Practice Website

driver.get("https://www.testmuai.com/selenium-playground/")

Navigates to the Selenium Playground website.

Create the Drag Source and Drop Target

driver.execute_script(
    """
    ...
    """
)

This JavaScript dynamically creates:

A draggable source element with the text “Drag me”.
A drop target with the text “Drop here”.
A mouseup event listener that sets the custom attribute data-dropped="yes" when the drag operation completes successfully.

This provides a simple drag-and-drop example for automation.

Locate the Source and Target Elements

source = driver.find_element(By.ID, "drag-source")
target = driver.find_element(By.ID, "drop-target")

Locates both the draggable element and the drop target.

Perform the Drag and Drop

ActionChains(driver)\
    .drag_and_drop(source, target)\
    .perform()

Performs the complete drag-and-drop operation:

Clicks the source element.
Drags it to the target.
Releases the mouse button.
Executes the action using perform().

Verify the Drop

assert target.get_attribute("data-dropped") == "yes"

Verifies that the drop target’s custom attribute was updated after the drag-and-drop action.

If the attribute is not "yes", the test fails.

Close the Browser

driver.quit()

Closes the browser and ends the WebDriver session.

Practical Example

Suppose a project management application allows users to move tasks between workflow columns.

The automation script:

Opens the task board.
Drags a task card.
Drops it into another column.
Verifies that the task moved successfully.

Automation Testing Example

Consider a dashboard customization feature.

Users can drag widgets to rearrange their dashboard.

The automation script:

Opens the dashboard.
Drags a widget.
Drops it into a new position.
Verifies that the layout has been updated.

Real-World Example

Drag-and-drop functionality is commonly used in:

Kanban boards
Dashboard customization
File upload interfaces
Scheduling applications
Graphic editors
Workflow management systems
Enterprise applications

Examples include Jira boards, Trello-style task management, calendar scheduling, and drag-and-drop page builders.

Advantages of Drag-and-Drop Automation

Tests advanced user interactions.
Simulates real user behavior.
Verifies dynamic UI functionality.
Supports interactive web applications.
Improves automation coverage.

Common Mistakes Beginners Make

Trying to Drag Without ActionChains

Standard Selenium commands cannot perform drag-and-drop operations.

Use the ActionChains class.

Forgetting to Call `perform()`

Without perform(), the drag-and-drop action will not execute.

Assuming Every Website Handles Drag and Drop the Same Way

Some JavaScript frameworks implement custom drag-and-drop behavior.

In such cases, additional techniques such as JavaScript execution or low-level mouse actions may be required.

Not Verifying the Drop Result

Always confirm that the application recognizes the completed drag-and-drop operation.

Best Practices

Use ActionChains for drag-and-drop interactions.
Call perform() to execute the action.
Verify the result after dropping.
Use Explicit Waits if the UI updates dynamically.
Keep drag-and-drop tests simple and maintainable.

Conclusion

Drag and Drop is one of the most common advanced user interactions in modern web applications. Selenium’s ActionChains class provides a simple way to simulate dragging an element and dropping it onto another. Understanding drag-and-drop automation is essential for testing dashboards, workflow systems, scheduling applications, and interactive web interfaces.

Frequently Asked Questions (FAQs)