Handling Popups in Playwright TypeScript

Popups are a common UI element in web applications, used for various purposes such as displaying additional information, collecting user input, or providing navigation options. In automated testing, handling popups correctly is crucial to ensure the accuracy and reliability of test cases. Playwright, a powerful end - to - end testing framework, provides robust support for handling popups in TypeScript. This blog will guide you through the fundamental concepts, usage methods, common practices, and best practices for handling popups in Playwright TypeScript.

Table of Contents#

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Conclusion
  6. References

1. Fundamental Concepts#

What are Popups in Web Applications?#

Popups can be of different types, such as browser windows, new tabs, or JavaScript - based modals. In the context of Playwright, handling popups involves interacting with these new windows or tabs that are opened during the execution of a test.

How Playwright Handles Popups#

Playwright provides event - based mechanisms to detect and interact with popups. When a new window or tab is opened, Playwright emits a popup event on the page object. You can listen for this event and then perform actions on the newly opened popup.

2. Usage Methods#

Listening for the popup Event#

The following code demonstrates how to listen for the popup event when a link that opens a new window is clicked:

import { chromium, Page } from 'playwright';
 
(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
 
    // Listen for the popup event
    const [popup] = await Promise.all([
        page.waitForEvent('popup'),
        page.click('a[target="_blank"]') // Click a link that opens a new window
    ]);
 
    // Now you can interact with the popup
    await popup.waitForLoadState();
    console.log(await popup.title());
 
    await browser.close();
})();

In this example, we use Promise.all to wait for both the popup event and the click action on the link. Once the popup is opened, we can perform actions on it, such as waiting for it to load and getting its title.

Handling Multiple Popups#

If your application opens multiple popups, you can handle them by listening for multiple popup events. Here is an example:

import { chromium, Page } from 'playwright';
 
(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
 
    const popups: Page[] = [];
    page.on('popup', (popup) => {
        popups.push(popup);
    });
 
    // Click multiple links that open popups
    await page.click('a[target="_blank"]:nth - child(1)');
    await page.click('a[target="_blank"]:nth - child(2)');
 
    for (const popup of popups) {
        await popup.waitForLoadState();
        console.log(await popup.title());
    }
 
    await browser.close();
})();

In this code, we use the on method to listen for the popup event and store all the popups in an array. Then we can iterate over the array and perform actions on each popup.

3. Common Practices#

Waiting for Popup Load#

It is important to wait for the popup to fully load before performing any actions on it. You can use waitForLoadState to ensure that the page has loaded completely.

await popup.waitForLoadState();

Handling Popup Closure#

You may need to handle the situation when the popup is closed. You can listen for the close event on the popup page.

popup.on('close', () => {
    console.log('Popup has been closed');
});

4. Best Practices#

Use Explicit Timeouts#

When waiting for popups or performing actions on them, it is a good practice to use explicit timeouts. This helps to avoid test failures due to slow - loading popups.

await popup.waitForLoadState({ timeout: 10000 }); // Wait for a maximum of 10 seconds

Clean Up Resources#

Make sure to close the browser and all the pages, including popups, after the test is completed. This helps to free up system resources.

await browser.close();

5. Conclusion#

Handling popups in Playwright TypeScript is a straightforward process thanks to the event - based mechanisms provided by the framework. By understanding the fundamental concepts, using the right usage methods, following common practices, and implementing best practices, you can effectively handle popups in your automated tests. This ensures that your tests are accurate and reliable, even when dealing with complex web applications that use popups extensively.

6. References#

2025-10