Tutorials123: 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()

(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