Blog # 9: Say Hello to Alerts! Handling Dialog Boxes in Playwright

Alerts and dialogs are common elements in web applications that can interrupt automated test flows if not handled properly. Playwright provides straightforward methods to manage these interruptions, ensuring your tests run smoothly. In this guide, I’ll share how I learned handling three types of dialogs—simple alerts, confirmation boxes, and prompts—using Playwright’s built-in features.

---

Why Handle Dialogs?

Dialogs often appear during critical user interactions, such as form submissions, error notifications, or data input requests. If ignored, they can cause tests to freeze or fail. Playwright’s dialog-handling capabilities allow you to:

• Validate dialog messages.
• Accept, dismiss, or respond to prompts programmatically.
• Keep tests resilient and predictable.

Let’s explore how to tackle each type of dialog.

---

1. Simple Alerts: The One-Way Notification

A simple alert is a basic pop-up with an "OK" button.

Example Scenario:

A basic alert appears, shouting, "I am an alert box!" with a single "OK" button. No choices. No drama. Just… existence.

Your Playwright Move:

Key Steps:

• Use page.on('dialog') to intercept the dialog. Validate the type and message to ensure it’s the expected alert.
• Accept the dialog with dialog.accept().

2. Confirmation Dialogs: The Yes/No Scenario

Confirmation dialogs ask users to confirm or cancel an action. Example Scenario: A confirmation box appears, asking, "Press a button!" with "OK" or "Cancel." It’s the pop-up equivalent of your partner asking, "Do you want pizza or salad?" when you’re already hangry. 

Your Playwright Power Move:

Key Steps:

• Use dialog.dismiss() to simulate clicking "Cancel."
• To accept, replace dismiss() with accept().

3. Prompts: The Input Request

Prompts ask users to enter text, often with a default value pre-filled. Example Scenario: A prompt appears, demanding input. "Please enter your name:" it says, with a default value of "Harry Potter." (Because why not?)

Your Playwright Jedi Trick: 

Pop-Up Survival Hacks 🪓

• Never Let Pop-Ups Surprise You: Always set up a page.on('dialog') listener before triggering the action that opens the dialog.
• Validate Messages: Don’t just click—verify. Avoid accidentally accepting a "Delete all data" dialog!
• Default Values Matter: For prompts, check dialog.defaultValue() to avoid scripting errors. I’m still learning, and every new challenge makes Playwright more exciting! I’ll be back with another fun topic in my next blog. Until then, happy testing! 🎯