DEV Community: The Wise

Understanding page.locator().click() in Playwright

The Wise — Wed, 08 Oct 2025 09:45:30 +0000

What is locator.click()?

In Playwright, locator.click() is a high-level API used to simulate a mouse click on a web element. It’s part of the Locator API, which provides a robust way to interact with elements on the page.

await page.getByRole('button').click();

This command does the following:

Finds the element matching the selector.
Auto-Waiting Mechanism
Playwright automatically waits for the element to be:

Attached to the DOM
Visible (not hidden via CSS or layout)
Enabled (not disabled)
Stable (not animating or moving) This avoids flaky tests caused by premature clicks. Scrolls it into view if needed.
If the element is outside the viewport, Playwright scrolls it into view using element.scrollIntoViewIfNeeded(). This mimics how a real user would interact with off-screen elements. Performs a click action.

When you use the click() method , it does the following actions in sequence to mimic a real user clicking experience.

mousedown —> Like when the mouse is pressed, the button goes down
mouseup —> Like when the mouse is stopped pressing, the button comes up
click —> click is needed though the down and up is triggered otherwise the click won’t be triggered

Options You Can Pass to the click function

await page.locator('button').click({
  position: { x: 10, y: 5 }, // click at specific offset
  button: 'right', // 'left' | 'middle' | 'right'
  clickCount: 2,   // for double-click
  delay: 100,      // ms between mousedown and mouseup
  force: true,     // bypass checks
  modifiers: ['Alt', 'Shift'], // keyboard modifiers
  noWaitAfter: true// doesnt wait for navigation if click opens new page/elements
  timeout: 5000,   // override default timeout
  trial: true
});

2.1 position

Playwright calculates the clickable point:
It finds the center of the visible bounding box.
If position is specified, it uses that offset.
It ensures the point is not obscured by another element.

await locator.click({ position: { x: 10, y: 5 } });

2.2 Right click/Left click / Middle click

When right click is needed on a element, this will do the trick.

await page.locator('canvas').click({ button: 'right' }); // Right-click

await page.locator('canvas').click({ button: 'middle' }); // Middle-click

2.3 Double click or more

Sometimes double click will trigger an event, this option can be used in that scenario.

await page.locator('text="Open File"').click({ clickCount: 2 });

2.4 Delay

it's used to introduce a pause between the mousedown and mouseup events discussed in 1.4

await page.locator('button').click({ delay: 500 }); // 500ms delay

2.5 force

this option is used to bypass all actionability checks and force the click, even if the element is:
Not visible
Not attached to the DOM
Covered by another element
Disabled
Outside the viewport

await page.locator('#hidden-button').click({ force: true });

Sometimes, elements are technically present but:

Hidden by overlays or modals
Slightly off-screen
Temporarily disabled due to animations or transitions
Using force: true allows you to click them anyway.

Be cautious about this - it skips safety checks.

2.6 Shift+click

lets you simulate keyboard modifier keys being held down during the click — like Shift, Ctrl, Alt, or Meta (Cmd on Mac).

await page.locator('.item').click({ modifiers: ['Shift'] }); 
//"Alt" | "Control" | "ControlOrMeta" | "Meta" | "Shift”

2.7 NowaitAfter
This is used to prevent Playwright from waiting for potential page navigations or asynchronous events that might be triggered by the click.

# and defaults to false
await page.locator('a#delayed-link').click({ noWaitAfter: true });
# will default to true in future releases

2.8 timeout

it controls How Long Playwright Waits for actionability checks
If you don’t specify timeout, Playwright uses the default timeout (usually 30 seconds).
When a element takes time to load and you want to extend or limit the timeout different from gloabl timeout then this can be used.

await locator.click({ timeout: 5000 }); // custom timeout

2.9 Trial Click
You can simulate a click without actually clicking using trial: true. This is useful for checking if an element is clickable.

await locator.click({ trial: true });

Common Pitfalls

Some common failures and the causes
Playwright throws a detailed error with suggestions and a trace.

Conclusion

page.locator().click() is one of the most powerful and reliable ways to simulate user interaction in Playwright. By understanding its behavior, options, and best practices, you can write stable, maintainable, and robust automation scripts.

Event handling in playwright

The Wise — Fri, 26 Sep 2025 12:21:12 +0000

*What is an event?*

An event is a signal that something has happened in the system or application — like a user clicking a button, a page loading, or a dialog appearing.

An event represents a specific action or occurrence that you can listen for and respond to in your code.

*✅ Here is the list of events supported in the playwright*

Event Name Description
'close' Fired when the page is closed.
'console' Fired when the page logs a message to the console.
'crash' Fired when the page crashes.
'dialog' Fired when an alert, confirm, prompt, or beforeunload dialog is triggered.
'domcontentloaded' Fired when the DOM content is fully loaded.
'download' Fired when a file download is initiated.
'filechooser' Fired when a file input is activated.
'frameattached' Fired when a frame is attached to the page.
'framedetached' Fired when a frame is removed from the page.
'framenavigated' Fired when a frame navigates to a new URL.
'load' Fired when the page finishes loading.
'pageerror' Fired when a JavaScript error occurs.
'popup' Fired when a new page (popup or tab) is opened.
'request' Fired when a network request is made.
'requestfailed' Fired when a network request fails.
'requestfinished' Fired when a network request completes.
'response' Fired when a network response is received.
'websocket' Fired when a WebSocket is created.
'worker' Fired when a web worker is created.

Let’s pick the event “dialog” for the demo

await promise

Before the event occurs on the browser, we have to instruct the playwright to be ready to handle the event

so the sequence is

store promise by using waitforevent method without await keyword
you do the action which triggers the popup
you wait for the stored promise to fulfil (captured in first step)
you take action on the event.



  // Start waiting for the dialog before triggering it
  const dialogPromise = page.waitForEvent('dialog');

  // Trigger the dialog (e.g., clicking a button that opens an alert/confirm/prompt)
  await page.getByText('Trigger Dialog').click();

  // Wait for the dialog to appear
  const dialog = await dialogPromise;

  // Accept the dialog
  await dialog.accept();

  // Dismiss the dialog (uncomment to use instead of accept)
  // await dialog.dismiss();

Promise.all

(same as above but no need (await dialogPromise;) statement)


// Start waiting for the dialog and trigger it at the same time
const [dialog] = await Promise.all([
  page.waitForEvent('dialog'),
  page.getByText('Trigger Dialog').click()
]);

// Accept the dialog
await dialog.accept();

// Dismiss the dialog (uncomment to use instead of accept)
// await dialog.dismiss();

✅ page.on('dialog', callback) method

Purpose: Listens for all dialog events continuously and performs the actions defined.

Usage: Ideal when dialogs can appear multiple times during a test.

 // Set up a listener for dialog events
    page.on('dialog', async dialog => {
      console.log(`Dialog message: ${dialog.message()}`);

      // Accept the dialog
      await dialog.accept();

      // Dismiss the dialog (uncomment to use instead of accept)
      // await dialog.dismiss();
    });

    // Trigger the dialog (e.g., clicking a button that opens an alert/confirm/prompt)
    await page.getByText('Trigger Dialog').click();

✅ page.once('dialog', callback)

Purpose: Listens for only the next dialog event & does whatever mentioned in the once block

Usage: Cleaner than page.on when you expect just one dialog.


    // Set up a one-time listener for the next dialog event
    page.once('dialog', async dialog => {
      console.log(`Dialog message: ${dialog.message()}`);

      // Accept the dialog
      await dialog.accept();

      // Dismiss the dialog (uncomment to use instead of accept)
      // await dialog.dismiss();
    });

    // Trigger the dialog (e.g., clicking a button that opens an alert/confirm/prompt)
    await page.getByText('Trigger Dialog').click();

Playwright: A Modern Framework for Web Automation Testing

The Wise — Fri, 19 Sep 2025 03:54:03 +0000

Overview
Playwright is an open-source automation framework developed by Microsoft, designed for end-to-end testing of modern web applications. Released in January 2020, it has quickly gained popularity due to its cross-browser, cross-platform, and cross-language capabilities.

Key Features
Cross-Browser Support: Automates Chromium (Chrome, Edge), Firefox, and WebKit (Safari).

Multi-Language Support: Works with JavaScript, TypeScript, Python, Java, and .NET.

Headless Mode: Enables fast, GUI-less testing ideal for CI/CD pipelines.

Automatic Waiting: Waits for elements to be actionable, reducing flaky tests.

Browser Contexts: Simulates multiple users with isolated sessions.

Device Emulation: Tests responsive designs across various screen sizes.

Network Interception: Mocks API responses and simulates network conditions.

Built-in Debugging Tools: Includes codegen, trace viewer, and inspector.

Architecture
Playwright uses WebSockets for communication with browsers, unlike Selenium’s HTTP-based approach. This allows faster and more reliable interactions. Each test runs in a separate browser context, ensuring full isolation and faster execution.

Advantages Over Other Frameworks

Limitations
No support for native mobile apps.

Limited language support compared to Selenium.

No support for legacy browsers like IE11.

Getting Started
To install and run Playwright: