Last updated on August 1st, 2025 at 04:44 am
Learn how to perform a double click in Playwright, with simple examples and best practices.
In Playwright web automation, sometimes you need to perform a double-click action on an element. Earlier, we learnt how to simulate single-click and right-click actions using the click() method in Playwright. Playwright has a built-in dblclick() method to simulate a double-click action on any aspect.
What is a Double Click in Playwright?
A double click is a rapid click of the left mouse button twice in quick succession. In real-life apps, you need to double-click on an element to open an item (like in a file manager), trigger in-place editing, or expand or collapse sections.
Playwright dblclick() Method Syntax
The syntax of the Playwright dblclick() method is as below.
await page.dblclick(selector[, options]);- selector: A CSS or XPath selector for the element you want to double-click.
- options (optional): Extra options like button, delay, or modifiers.
Basic Example: Double-click a Button
Let’s say you have an HTML button element like this:
<button id="doubleClickBtn">Double Click Me</button>Now, you can simulate a double-click action on a button using the syntax given below.
await page.dblclick('#doubleClickBtn');This command will simulate a double-click on the button with ID doubleClickBtn.
Real-World Example: Triggering a Double-Click Event
Here is a complete example to perform a double-click action on a button.
Playwright test script to simulate a double-click
const { test, expect } = require('@playwright/test');
test('Example to simulate double-click in Playwright', async ({ page }) => {
//Open a URL.
await page.goto('https://only-testing-blog.blogspot.com/2025/04/playwright-practice-page.html');
//Double click on button
await page.dblclick('#doubleClickBtn');
//Assert message text to confirm double click action is performed.
await expect(page.locator('#doubleClickOutput')).toContainText('Double clicked!');
});
Basic Playwright Tutorial Quick Links
- Get Page Title Using page.title()
- Click a Button Using the click() Method
- Select DropDown Value Using selectOption()
- Simulate the Right Click Using the click() method
- Select Checkboxes Using check() and setChecked() Methods
- Clear Input Text Field Value in Playwright
Tips for Stable Double-Click Actions
- Wait for element: Ensure the element is visible and enabled before double-clicking.
- Use the locator.dblclick(): More reliable than using the raw selector.
- Check for effects: Always assert that the double-click action triggered the expected UI change.
Using a locator.dblclick()
const button = page.locator('#expandButton');
await button.dblclick();This is the recommended modern Playwright approach.
Final Words
Double-click actions in Playwright are easy to implement and test. Whether you’re clicking a button or interacting with more complex UIs, the dblclick() method gives you full control to mimic real user behavior.
Hi, I’m Aravind — a seasoned Automation Test Engineer with over 17 years of hands-on experience in the software testing industry. I specialize in tech troubleshooting and tools like Selenium, Playwright, Appium, JMeter, and Excel automation. Through this blog, I share practical tutorials, expert tips, and real-world insights to help testers and developers improve their automation skills.In addition to software testing, I also explore tech trends and user-focused topics, including Snapchat guides, codeless test automation, and more.
