Handle Alerts in Playwright

 

Handling alert popups (JavaScript alerts, confirms, prompts) in Playwright Java involves listening for the Dialog event on the Page object. When a JavaScript alert, confirm, or prompt appears on a webpage, Playwright can catch it using a listener and either accept or dismiss it accordingly.

How Alerts Work in Playwright

• Alerts are modal dialogs, meaning they block interaction with the page until dismissed.
• Playwright automatically detects these dialogs and allows you to handle them.
• When an alert appears, it triggers a dialog event on the page.

Types of JavaScript Dialogs

• Alert → Only one button: OK
• Confirm → Two buttons: OK and Cancel
• Prompt → Input + OK/Cancel

How can we handle Alerts in Playwright:

There are three main things you can do with alerts in Playwright:

(a) Accept the alert: This is done by clicking OK on alert box. We can also provide input if its is prompt alert.

(b) Dismiss the alert: This is like clicking Cancel on a confirm or prompt.

(c) Get alert text: We can read the message displayed in the alert before accepting or dismissing it.

Concept

• page.onDialog(handler) allows us to listen to dialog events.
• Use dialog.accept() to accept it.
• Use dialog.dismiss() to dismiss it.
• Use dialog.accept("input") to send input to prompt dialogs.

Some key points related to Alerts

• Alerts pause page execution, so you need to handle them before performing actions that trigger the alert.
• Playwright allows listening for the dialog event, which ensures you can control the alert at the right moment.
• Always handle alerts in synchronous flow with the actions that trigger them to avoid timeouts.

Handling Alert Popup in Playwright Java

Sample Website: https://the-internet.herokuapp.com/javascript_alerts

Code Example:

import com.microsoft.playwright.*;


public class HandleAlertPopup {
    public static void main(String[] args) {
        try (Playwright playwright = Playwright.create()) {
            Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
            Page page = browser.newPage();

            // Set up dialog handler
            page.onDialog(dialog -> {
                System.out.println("Dialog message: " + dialog.message());
                dialog.accept();  

                // Accept the alert
                // dialog.dismiss(); // Use this for cancel
                // dialog.accept("Your input"); // For prompt dialog input
            });

            // Navigate to page with alert
            page.navigate("https://the-internet.herokuapp.com/javascript_alerts");

            // Click the button to trigger alert
            page.locator("text=Click for JS Alert").click();

            // Optional: Wait for result text
            String result = page.locator("#result").textContent();
            System.out.println("Result after handling alert: " + result);

            browser.close();
        }
    }
}

Code explanation:

(a) Setting up dialog handler and uses accept() for handling alerts.

(b) Navigate to the url by page.navigate()

(c) Click on 'Click for JS Alert button ' to generate alert message

(d) it got handled and captures text displayed on screen - 'You successfully clicked        an alert'

(e) Printed that alert result message.

Playwright Code responsible for handling alerts

Output:

Dialog message: I am a JS Alert
Result after handling alert: You successfully clicked an alert

Suggested Posts:

1. Playwright with TestNG Integration
2. BrowserContext in Playwright
3. Handle Dropdowns in Playwright
4. Handle IFrames in Playwright
5. Page Object Model in Playwright