Introduction

Many advanced mouse interactions require not only pressing the mouse button but also releasing it at the correct time. The Release Action is commonly used after a Click and Hold operation and is essential for drag-and-drop, sliders, drawing applications, and custom mouse interactions.

Selenium performs the release operation using the ActionChains class and its release() method.

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

What is a Release Action?

A Release Action simulates releasing the left mouse button after it has been pressed.

Example:

Mouse Button Pressed

        │

        ▼

Click and Hold

        │

        ▼

Release Mouse Button

This is commonly the final step in many mouse interactions.

Why Automate Release Actions?

Release action automation helps you:

Complete drag-and-drop operations.
Finish slider movements.
Test drawing applications.
Verify custom mouse interactions.
Simulate realistic user behavior.

How Selenium Performs Release

Selenium uses the ActionChains class.

The most commonly used pattern is:

ActionChains(driver)\
    .click_and_hold(element)\
    .release(element)\
    .perform()

This presses the mouse button and then releases it on the specified element.

Example

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


# Topic: 33. Actions Class - Release Action
# Practice site: https://www.testmuai.com/selenium-playground/
# Run: pytest -s 33_examples/test_06_release_action.py
#
# release lets go of a mouse button that was previously held down. It is often
# paired with click_and_hold.


def test_release_after_click_and_hold:
    driver = webdriver.Chrome()

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

        driver.execute_script(
            """
            const box = document.createElement('div');
            box.id = 'release-box';
            box.textContent = 'Hold and release';
            box.style.cssText = 'width:150px;height:60px;background:#dfd;padding:10px;';
            box.addEventListener('mouseup', () => box.dataset.released = 'yes');
            document.body.appendChild(box);
            """
        )

        box = driver.find_element(By.ID, "release-box")
        ActionChains(driver).click_and_hold(box).pause(1).release(box).perform()

        assert box.get_attribute("data-released") == "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 Release Box

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

This JavaScript dynamically creates a box labeled “Hold and release”.

It also registers a mouseup event listener that sets the custom attribute data-released="yes" when the mouse button is released.

Locate the Box

box = driver.find_element(
    By.ID,
    "release-box"
)

Locates the dynamically created box element.

Perform Click, Hold, Pause, and Release

ActionChains(driver)\
    .click_and_hold(box)\
    .pause(1)\
    .release(box)\
    .perform()

This ActionChain performs several actions in sequence:

Presses and holds the left mouse button on the box.
Waits for one second using pause(1).
Releases the mouse button over the same element.
Executes the complete action sequence using perform().

The release triggers the JavaScript mouseup event.

Verify the Release Action

assert box.get_attribute(
    "data-released"
) == "yes"

Verifies that the mouseup event executed successfully by checking the custom attribute.

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 an image editing application allows users to resize an image by dragging a corner and releasing the mouse button.

The automation script:

Clicks and holds the resize handle.
Moves the mouse.
Releases the mouse button.
Verifies that the resize operation completed.

Automation Testing Example

Consider a slider control used to adjust the volume in a media player.

The automation script:

Clicks and holds the slider.
Moves it to a new position.
Releases the mouse button.
Verifies that the volume has changed.

Real-World Example

Release actions are commonly used in:

Drag-and-drop interfaces
Slider controls
Drawing applications
Graphic editors
Timeline editors
Dashboard widgets
Enterprise web applications

Examples include dropping files, releasing sliders, completing drag operations, and finishing drawing actions.

Advantages of Release Action Automation

Completes advanced mouse interactions.
Simulates realistic user behavior.
Supports drag-and-drop workflows.
Useful for sliders and drawing tools.
Improves automation coverage.

Common Mistakes Beginners Make

Calling `release()` Without Holding First

The release() method is typically used after click_and_hold().

Calling it without first pressing the mouse button usually has no meaningful effect.

Forgetting to Call `perform()`

Without perform(), the ActionChain is never executed.

Skipping Synchronization

Some applications require a short delay before releasing the mouse button.

Using pause() can help simulate realistic user behavior when needed.

Not Verifying the Result

Always verify that the application responded correctly after the release action.

Best Practices

Use release() together with click_and_hold().
Call perform() to execute the ActionChain.
Add a short pause only when required by the application.
Verify the application’s response after releasing the mouse.
Keep ActionChains clear and easy to maintain.

Conclusion

The Release Action is an essential part of many advanced mouse interactions in Selenium. Using the release() method together with click_and_hold() allows automation scripts to simulate realistic user behavior in drag-and-drop operations, sliders, drawing tools, and other interactive web components. Mastering the release action helps create more accurate and reliable Selenium automation tests.

Frequently Asked Questions (FAQs)