How to Perform Double Click in Playwright Using dblclick()

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!');
});

Playwright example to simulate double click action on button.

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.

Aravind

Hi, I’m Aravind, a seasoned Automation Test Engineer with 17+ years of industry experience. I specialize in tools like Selenium, JMeter, Appium, and Excel automation. Through this blog, I share practical tutorials, tips, and real-world insights to help testers and developers sharpen their automation skills.