Mastering Double Clicks in Playwright with TypeScript

Learn how to master the double mouse click

May 29, 2025 by cryan.com

In web automation, simulating user interactions accurately is key. One common interaction is the double click, often used to open files, edit text, or trigger specific UI behaviors. Playwright, a robust automation library, provides straightforward methods to perform such actions. This post will guide you through simulating a double click using Playwright with TypeScript.

Performing a Double Click with Playwright

Playwright offers a dedicated method, dblclick(), on its Page and Locator objects, making double clicking a breeze. You can target an element using a CSS selector, XPath, or Playwright's built in text/role locators.

Example 1: Double Clicking by CSS Selector

Let us consider a scenario where you want to double click a button with the ID myDoubleClickButton.

import { test, expect } from '@playwright/test';
test('should perform a double click on a button', async ({ page }) => {
    // Navigate to a page where your button exists
    await page.goto('https://example.com/double-click-page');
    // Double click the element using its CSS selector
    await page.dblclick('#myDoubleClickButton');
    // Optionally, add an assertion to verify the double click's effect
    // For instance, check if a new element appeared or text changed
    await expect(page.locator('#doubleClickResult')).toHaveText('Button was double clicked!');
});

Example 2: Double Clicking a Text Element

Sometimes you might need to double click on a piece of text. Playwright's text locator is very convenient for this.

import { test, expect } from '@playwright/test';
test('should double click on specific text', async ({ page }) => {
    await page.goto('https://example.com/text-selection-page');
    // Double click on the text "Editable Content"
    await page.getByText('Editable Content').dblclick();
    // Verify that the element is now in an editable state or shows a specific behavior
    await expect(page.locator('.editable-field')).toHaveAttribute('contenteditable', 'true');
});

Example 3: Controlling the Click Options

The dblclick() method also accepts an options object, allowing you to fine tune the behavior. For example, you can specify a delay between clicks, force the action, or click at a specific position within the element.

import { test, expect } from '@playwright/test';
test('should double click with specific options', async ({ page }) => {
    await page.goto('https://example.com/advanced-click-page');
    await page.locator('.custom-element').dblclick({
        delay: 500, // Wait 500ms between the two clicks
        position: { x: 10, y: 10 } // Click at coordinates 10,10 relative to the element
    });
    await expect(page.locator('#statusMessage')).toHaveText('Custom double click performed');
});

Common options for dblclick() include:

• delay: Time in milliseconds to wait between the two clicks.
• button: The mouse button to use ('left', 'right', 'middle'). Default is 'left'.
• modifiers: An array of modifier keys to press ('Alt', 'Control', 'Meta', 'Shift').
• position: A `{ x, y }` object to click at a specific point relative to the top-left corner of the element.
• force: Forces the action, even if the element is not considered actionable (e.g., it is hidden).