Double Click in playwright

 In this example, we will explore how to perform double click actions using Playwright, illustrated with a practical example. In Playwright, to double-click an element (for example, a button, a div, or any other DOM element), you can use the .dblclick() method on a locator.

✅ Syntax

// Double-click an element
  await page.locator('selector-for-element').dblclick();

NOTE : You can also simulate a double-click via page.mouse.dblclick(x, y) if you're targeting a coordinate instead of an element.

How to perform Double Click in playwright

A double click action involves quickly pressing the left mouse button twice on an element.

Here is a quick example.

// @ts-check
import { test, expect } from '@playwright/test';

test("double click example", async ({ page }) => {
    await page.goto("https://testautomationpractice.blogspot.com/");

    // Perform a double click on the "Copy Text" button
    await page.locator("//button[contains(text(),'Copy Text')]").dblclick();

    // Verify that the second input field has the expected value
    await expect(page.locator("#field2")).toHaveValue("Hello World!");

    // Wait for a moment to observe the result
    await page.waitForTimeout(3000); 
   
  });

Double click actions in Playwright provide a simple yet effective way to simulate user interactions and validate UI behavior. With tools like Playwright, automating these tests becomes efficient, allowing teams to focus on building robust and user-friendly applications.

Notes:

1. You can also simulate a double-click via page.mouse.dblclick(x, y) if you're targeting a coordinate instead of an element.
2. If the element is not visible or interactable, Playwright will wait up to the default timeout before failing.