Introduction
Some web applications require the user to press and hold the left mouse button without immediately releasing it. This interaction is known as Click and Hold.
Click and Hold is commonly used for sliders, drawing canvases, drag operations, resizing elements, games, and custom user interface components.
Selenium performs this advanced mouse interaction using the ActionChains class and its click_and_hold() method.
In this tutorial, you’ll learn how to automate click-and-hold actions using Selenium with Python, along with practical examples, real-world scenarios, common mistakes, and best practices.
What is Click and Hold?
Click and Hold means pressing the left mouse button on an element and keeping it pressed without releasing it.
Example:
Mouse Button Pressed
│
▼
Element
│
(Hold Without Release)
This action is often the first step in custom drag-and-drop or drawing operations.
Why Automate Click and Hold?
Click-and-hold automation helps you:
Test sliders.
Test drawing applications.
Verify drag interactions.
Test resizable components.
Automate advanced mouse behavior.
How Selenium Performs Click and Hold
Selenium uses the ActionChains class.
The most commonly used method is:
ActionChains(driver)\
.click_and_hold(element)\
.perform()
This presses and holds the left mouse button 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 - Click and Hold
# Practice site: https://www.testmuai.com/selenium-playground/
# Run: pytest -s 33_examples/test_05_click_and_hold.py
#
# click_and_hold presses the mouse button down without releasing it. This is
# useful for sliders, drawing widgets, and custom drag interactions.
def test_click_and_hold_element:
driver = webdriver.Chrome()
try:
driver.get("https://www.testmuai.com/selenium-playground/")
driver.execute_script(
"""
const box = document.createElement('div');
box.id = 'hold-box';
box.textContent = 'Hold here';
box.style.cssText = 'width:120px;height:60px;background:#ffd;padding:10px;';
box.addEventListener('mousedown', () => box.dataset.held = 'yes');
document.body.appendChild(box);
"""
)
box = driver.find_element(By.ID, "hold-box")
ActionChains(driver).click_and_hold(box).perform()
assert box.get_attribute("data-held") == "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 Hold Box
driver.execute_script(
"""
...
"""
)
This JavaScript dynamically creates a box with the text “Hold here”.
It also registers a mousedown event listener that sets the custom attribute data-held="yes" when the mouse button is pressed.
Locate the Box
box = driver.find_element(
By.ID,
"hold-box"
)
Locates the newly created box element.
Perform Click and Hold
ActionChains(driver)\
.click_and_hold(box)\
.perform()
Presses and holds the left mouse button on the element.
The mousedown event is triggered, updating the custom attribute.
Verify the Hold Action
assert box.get_attribute(
"data-held"
) == "yes"
Verifies that the mousedown event executed successfully by checking the value of 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 a video editing application allows users to drag a timeline marker only while holding the mouse button.
The automation script:
Opens the editor.
Clicks and holds the timeline marker.
Verifies that the hold action is recognized.
Automation Testing Example
Consider an online drawing application.
Drawing begins only when the user presses and holds the mouse button.
The automation script:
Opens the drawing canvas.
Clicks and holds the mouse.
Verifies that drawing mode has started.
Real-World Example
Click-and-hold functionality is commonly used in:
Drawing applications
Slider controls
Image editors
Timeline editors
Dashboard widgets
Drag-and-drop interfaces
Enterprise web applications
Examples include resizing panels, dragging timeline markers, moving sliders, and initiating custom drag operations.
Advantages of Click and Hold Automation
Tests advanced mouse interactions.
Simulates real user behavior.
Supports drawing and slider controls.
Useful for custom drag operations.
Improves automation coverage.
Common Mistakes Beginners Make
Using click() Instead of click_and_hold()
A normal click immediately presses and releases the mouse button.
Use click_and_hold() when the application expects the mouse button to remain pressed.
Forgetting to Call perform()
Without perform(), the ActionChain is created but never executed.
Forgetting to Release the Mouse (When Required)
Some workflows require calling release() after click_and_hold() to complete the interaction.
Not Verifying the Result
Always verify that the application recognizes the click-and-hold action.
Best Practices
Use
ActionChainsfor click-and-hold operations.Always call
perform()to execute the action.Use
release()when the workflow requires it.Verify the application’s response after holding the mouse.
Keep ActionChain operations readable and maintainable.
Conclusion
Click and Hold is an important advanced mouse interaction used in many modern web applications. Selenium’s ActionChains class provides the click_and_hold() method to simulate pressing and holding the left mouse button. Mastering this interaction is useful for testing sliders, drawing applications, custom drag operations, and other interactive user interfaces.
Frequently Asked Questions (FAQs)
What is Click and Hold?
Click and Hold is the action of pressing the left mouse button on an element and keeping it pressed without releasing it immediately.
Which Selenium class performs Click and Hold?
The ActionChains class is used to perform click-and-hold operations.
Which method performs Click and Hold?
Use:
click_and_hold(element)
to press and hold the mouse button on an element.
Why is perform() required?
perform() executes the actions that have been added to the ActionChain.
Without it, the click-and-hold action will not occur.
Where is Click and Hold commonly used?
It is commonly used in sliders, drawing applications, image editors, timeline editors, drag-and-drop interfaces, dashboards, and enterprise web applications.
Key Takeaways
Click and Hold presses the left mouse button without releasing it.
Selenium performs click-and-hold operations using
ActionChains.Use
click_and_hold()for hold interactions.Always call
perform()to execute the action.Use
release()when the application requires the mouse button to be released.Click-and-hold automation is an important Selenium skill for testing advanced interactive web applications.
