Working with Alerts and Pop-ups in Playwright

Working with Alerts and Pop-ups in Playwright

When automating web applications using Playwright, you’ll often encounter JavaScript alerts, confirm boxes, and prompt pop-ups. These dialogs can interrupt the flow of automation if not handled correctly. Playwright provides simple and efficient ways to deal with these browser dialogs.


In this blog, we’ll cover:


What types of pop-ups Playwright can handle


How to handle alerts, confirms, and prompts


Example scripts for each scenario


🧾 Types of JavaScript Dialogs

Alert – A simple message with an OK button


Confirm – A message with OK and Cancel buttons


Prompt – A message with an input field, OK, and Cancel buttons


🧰 Playwright’s Way of Handling Pop-ups

Playwright uses the page.on("dialog") event to listen for any dialog box that appears on the page.


javascript

Copy

Edit

page.on('dialog', async dialog => {

    console.log(dialog.message());

    await dialog.accept();  // or dialog.dismiss() for Cancel

});

Let’s look at examples for each type of dialog.


✅ Handling JavaScript Alerts

javascript

Copy

Edit

await page.goto('https://example.com');


page.on('dialog', async dialog => {

    console.log("Alert message: ", dialog.message());

    await dialog.accept();

});


await page.click('#alertButton');  // Triggers alert

⚠️ Handling Confirm Dialogs

javascript

Copy

Edit

page.on('dialog', async dialog => {

    console.log("Confirm message: ", dialog.message());

    await dialog.accept(); // Accept = Click OK

    // await dialog.dismiss(); // Dismiss = Click Cancel

});


await page.click('#confirmButton');

✍️ Handling Prompt Dialogs

javascript

Copy

Edit

page.on('dialog', async dialog => {

    console.log("Prompt message: ", dialog.message());

    await dialog.accept('Playwright User'); // Entering text and clicking OK

});


await page.click('#promptButton');

🧪 Things to Keep in Mind

Always set the page.on('dialog') before the action that triggers the alert.


If you don’t handle a dialog, Playwright will throw an error and fail the test.


Use dialog.dismiss() if you want to simulate clicking "Cancel".


🧩 Use Case: Automating an Alert Workflow

javascript

Copy

Edit

test('Handle all dialog types', async ({ page }) => {

    await page.goto('https://your-test-site.com');


    page.on('dialog', async dialog => {

        const type = dialog.type();

        console.log(`Dialog type: ${type}`);


        if (type === 'alert') {

            await dialog.accept();

        } else if (type === 'confirm') {

            await dialog.dismiss();

        } else if (type === 'prompt') {

            await dialog.accept('Sample input');

        }

    });


    await page.click('#showAlert');

    await page.click('#showConfirm');

    await page.click('#showPrompt');

});

✅ Conclusion

Handling JavaScript alerts and pop-ups is essential for building robust Playwright automation scripts. Whether you're dealing with simple alerts or interactive prompts, Playwright makes it easy to intercept and respond to them programmatically.

Learn Playwright Training Course in Hyderabad

Read More

Handling Frames and Iframes Using Playwright

Page Object Model (POM) with Playwright

Visit Our IHUB Talent Training Institute in Hyderabad

Get Directions

Comments

Post a Comment

Popular posts from this blog

How to Install and Set Up Selenium in Python (Step-by-Step)

 Here’s your step-by-step guide to installing and setting up Selenium in Python — perfect if you're just getting started with browser automation. 🚀 🐍 Step 1: Install Python If you haven’t already: Download Python: https://www.python.org/downloads/ Make sure to check the box "Add Python to PATH" during installation Verify installation: bash Copy Edit python --version pip --version 📦 Step 2: Install Selenium Library Open your terminal or command prompt and run: bash Copy Edit pip install selenium To verify: bash Copy Edit pip show selenium 🌐 Step 3: Download WebDriver for Your Browser Depending on what browser you want to automate: 🔹 Chrome: Download ChromeDriver: ➡️ https://sites.google.com/chromium.org/driver/ Make sure the driver version matches your installed Chrome version. 🔹 Firefox: Download GeckoDriver: ➡️ https://github.com/mozilla/geckodriver/releases Unzip and place the executable somewhere on your system, like: Windows: C:\WebDrivers\ Mac/Linux: /usr/local...
Read more

Tosca for API Testing: A Step-by-Step Tutorial

Tosca for API Testing: A Step-by-Step Tutorial Tricentis Tosca is a powerful and user-friendly test automation tool that supports a wide range of testing types — including API testing. With Tosca, you can easily design, automate, and execute API tests without writing any code. It supports REST, SOAP, and other service types, making it a great choice for end-to-end API validation. 🧰 What is Tosca API Testing? Tosca’s API testing allows testers to: Send requests (GET, POST, PUT, DELETE, etc.) Validate responses (status codes, body, headers) Chain requests and share data between them Perform security, load, and functional tests on APIs ✅ Step-by-Step Guide: Tosca API Testing 🔹 Step 1: Open Tosca and Create a Workspace Launch Tosca Commander Create a new workspace (or open an existing one) Choose the workspace type as Multi-user or Single-user based on your setup 🔹 Step 2: Add a New API Test Case Navigate to the Modules section. Right-click and choose Scan > API Scan. The API Scan wi...
Read more

Waits in Playwright: Explicit, Implicit, and Auto

 In Playwright (a powerful end-to-end testing framework), waiting mechanisms help ensure your scripts interact with elements only when they’re ready. Playwright handles waits more intelligently than older tools like Selenium, but understanding the types of waits—Explicit, Implicit, and Auto-waiting—is key for writing reliable tests. 🕰️ Waits in Playwright: Explicit, Implicit, and Auto ✅ 1. Auto-Waiting (Built-in) – Playwright’s Default Behavior What it is: Playwright automatically waits for elements to be actionable before performing actions (like click, type, fill, etc.). This is its most powerful feature. How it works: Waits for the element to be attached to the DOM Waits for the element to be visible Waits for the element to be enabled (not disabled) Waits for stable animation or layout Example: python Copy Edit await page.click('#submit-button') No need for a separate wait — Playwright will wait until the button is ready. Benefits: Reduces the need for manual waits More re...
Read more