How to handle popup dialogs in Playwright?

by scrapecrow Jul 10, 2023

In this guide, we'll explore handling popups in Playwright. To start, let's replicate a dialog example:

  • Go to any product page one web-scraping.dev
  • Add the product to the cart
  • Clear the cart

After following the above steps, you will encounter the below popup window:
cart clear alert as seen on web-scraping.dev/cart

First, we'll start by emulating the above popup event within Playwright:

Python
NodeJS
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()

    # add something to cart
    page.goto("https://web-scraping.dev/product/1")
    page.click(".add-to-cart")

    # clear out the cart to trigger the popup event
    page.goto("https://web-scraping.dev/cart")
    page.wait_for_selector(".cart-full .cart-item")
    page.click("(//button[contains(text(),'Clear')])[2]")
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  // add something to cart
  await page.goto('https://web-scraping.dev/product/1');
  await page.click('.add-to-cart');

  // clear out the cart to trigger the popup event
  await page.goto('https://web-scraping.dev/cart');
  await page.waitForSelector('.cart-full .cart-item');
  await page.click("(//button[contains(text(),'Clear')])[2]");


  await browser.close();
})();

Here, start a new Playwright instance, and create a new page. Then, we use the new tab to request the product web page, add it to the cart, and clear it to trigger the popup dialog.

Next, let's intercept the dialog action to handle it:

Python
NodeJS
from playwright.sync_api import sync_playwright

# create a dialog handler that will check message text and press yes/no
def handle_dialog(dialog):
    if "clear your cart" in dialog.message:
        print(f'clicking "Yes" to {dialog.message}')
        dialog.accept()  # press "Yes"
    else:
        dialog.dismiss()  # press "No"
    page.on("dialog", handle_dialog)


with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()

    # intercept popup dialog with the handle_dialog function
    page.on("dialog", handle_dialog) # new

    # add something to cart
    page.goto("https://web-scraping.dev/product/1")
    page.click(".add-to-cart")

    # clear out the cart to trigger the popup event
    page.goto("https://web-scraping.dev/cart")
    page.wait_for_selector(".cart-full .cart-item")
    page.click("(//button[contains(text(),'Clear')])[2]")

    # verify that cart is clear
    print(f'items in cart: {page.query_selector(".cart-item .cart-title")}')  # should be None
const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch({ headless: false });
    const page = await browser.newPage();

    // Create a dialog handler that will check the message text and press Yes/No
    page.on('dialog', async dialog => {
        if (dialog.message().includes('clear your cart')) {
            console.log(`clicking "Yes" to ${dialog.message()}`);
            await dialog.accept(); // press "Yes"
        } else {
            await dialog.dismiss(); // press "No"
        }
    });

    // Add something to cart
    await page.goto('https://web-scraping.dev/product/1');
    await page.click('.add-to-cart');

    // Clear out the cart to trigger the popup event
    await page.goto('https://web-scraping.dev/cart');
    await page.waitForSelector('.cart-full .cart-item');
    await page.click("(//button[contains(text(),'Clear')])[2]");

    // Verify that cart is clear
    const cartItem = await page.$('.cart-item .cart-title');
    console.log(`items in cart: ${cartItem}`);  // should be null

    await browser.close();
})();

Here, we define a handle_dialog function to click the pop up. Then, we intercept the dialog and click the popup with the method: page.on("dialog", handle_dialog).

We can handle popups in Playwright successfully. For further details on web scraping with Playwright, refer to our dedicated guide.

Web Scraping with Playwright and Python

Playwright is the new, big browser automation toolkit - can it be used for web scraping? In this introduction article, we'll take a look how can we use Playwright and Python to scrape dynamic websites.

Web Scraping with Playwright and Python

Related Articles

Playwright Examples for Web Scraping and Automation

Learn Playwright with Python and JavaScript examples for automating browsers like Chromium, WebKit, and Firefox.

PLAYWRIGHT
PYTHON
NODEJS
Playwright Examples for Web Scraping and Automation

How to Scrape With Headless Firefox

Discover how to use headless Firefox with Selenium, Playwright, and Puppeteer for web scraping, including practical examples for each library.

HEADLESS-BROWSER
PUPPETEER
SELENIUM
NODEJS
PLAYWRIGHT
PYTHON
How to Scrape With Headless Firefox

Web Scraping Dynamic Websites With Scrapy Playwright

Learn about Selenium Playwright. A Scrapy integration that allows web scraping dynamic web pages with Scrapy. We'll explain web scraping with Scrapy Playwright through an example project and how to use it for common scraping use cases, such as clicking elements, scrolling and waiting for elements.

PYTHON
PLAYWRIGHT
SCRAPY
HEADLESS-BROWSER
Web Scraping Dynamic Websites With Scrapy Playwright

How to use Headless Chrome Extensions for Web Scraping

In this article, we'll explore different useful Chrome extensions for web scraping. We'll also explain how to install Chrome extensions with various headless browser libraries, such as Selenium, Playwright and Puppeteer.

PYTHON
NODEJS
TOOLS
PLAYWRIGHT
PUPPETEER
SELENIUM
How to use Headless Chrome Extensions for Web Scraping

How to Scrape Google Maps

We'll take a look at to find businesses through Google Maps search system and how to scrape their details using either Selenium, Playwright or ScrapFly's javascript rendering feature - all of that in Python.

SCRAPEGUIDE
PYTHON
SELENIUM
PLAYWRIGHT
How to Scrape Google Maps

How to Scrape Dynamic Websites Using Headless Web Browsers

Introduction to using web automation tools such as Puppeteer, Playwright, Selenium and ScrapFly to render dynamic websites for web scraping

HEADLESS-BROWSER
PYTHON
SELENIUM
PUPPETEER
PLAYWRIGHT
How to Scrape Dynamic Websites Using Headless Web Browsers