# 🎯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

1. ### 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.
    
    ```typescript
    // 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();
    ```
    

2. ## Promise.all
    

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

```typescript
// 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();
```

3. ### ✅ `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.
        
    
    ```typescript
    // 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();
    ```
    
4. ### ✅ `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**.
        
    
    ```typescript
    // 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();
    ```