Step-by-Step Guide: How to Click on Alert Dialog in Puppeteer Effectively

When dealing with browser dialog pop-ups in Puppeteer, such as those encountered on a cart page of a web-scraping.dev, it’s essential to know how to handle these efficiently to ensure your web scraping or automation tasks run smoothly. Puppeteer provides the page.on('dialog', async dialog => { await dialog.accept(); }) listener for interacting with dialogs, allowing you to programmatically accept alerts, confirmations, and prompts. This feature is particularly useful in scenarios where immediate response to browser dialogs is necessary, enabling seamless navigation and interaction with web pages. For those looking to enhance their scraping capabilities, incorporating a best web scraping API could significantly improve data extraction efficiency and accuracy, providing a more robust solution for handling complex web scraping tasks. This guide will walk you through the steps to effectively manage alert dialogs in Puppeteer, ensuring your projects are executed with precision and ease.

One can utilize the dialog event handler to verify the dialog message and select yes/no. This can be achieved with the page.on("dialog", handler) method:

const puppeteer = require('puppeteer');


async function run() {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();

    // set up a dialog event handler
    page.on('dialog', async dialog => {
        console.log(dialog.message());
        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');

    // try clearing cart which raises a dialog that says "are you sure you want to clear your cart?"
    await page.goto('https://web-scraping.dev/cart');
    await page.waitForSelector('.cart-full .cart-item');
    await page.click('.cart-full .cart-clear');

    // check the cart
    const cartItems = await page.$('.cart-item .cart-title');
    console.log(`items in cart: ${cartItems ? 1 : 0}`); // Should print 0 if no items in cart.

    await browser.close();
}

run();

In the example above, a dialog handler is attached to our page object. This handler checks if the dialog message includes the phrase “clear your cart”. If it does, it selects “Yes” to clear the cart. If not, it selects “No” to cancel the dialog.