Event handling in playwright

*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

1. store promise by using waitforevent method without await keyword

2. you do the action which triggers the popup

3. you wait for the stored promise to fulfil (captured in first step)

4. 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();