Introduction
This article looks at how Playwright handles JavaScript dialogs like alert, confirm and prompt. Playwright by default dismisses these dialogs automatically. In case one needs to access the dialog message, accept the dialog, input text to a prompt or any other action, a dialog handler needs to be added. These handlers can be added to the page for single or multiple use.
Source
The code resource for this article can be found in this github repository. The Playwright version used here is 1.22. The website used for the explanations is available here – https://the-internet.herokuapp.com/javascript_alerts.
Dialog Class API
The alert, confirm and prompt dialogs are represented by the Dialog class.
| Method | Description |
| type() | returns String – ‘alert’, ‘confirm’, ‘prompt’, ‘beforeunload‘ |
| accept() | void – click the ‘OK’ button |
| accept(String msg) | void – enters the ‘msg’ for prompt dialog and click the ‘OK’ button |
| dismiss() | void – click the ‘Cancel’ button for confirm and prompt dialogs |
| message() | returns String – text message in the dialog |
Important Points
- Default behavior is to dismiss the dialog. The ‘cancel’ option is selected for confirm and prompt dialogs. The prompt dialog text is empty.
- Any different interaction with the dialog will require a handler (Consumer<Dialog>) to be added to the page.
- Relevant page methods are onceDialog(), onDialog() and offDialog().
- Handler has to be added before the interaction code.
- Handler needs to explicitly accept or dismiss the dialog.
Alert Dialog
The default Playwright behavior is to automatically dismiss the alert dialog. This will not work if the alert message needs to be accessed. In that case, a dialog handler needs to be added to the page object.
Single Use Handler – A handler which is executed only once for the next alert interaction can be added to the page object by using the page.onceDialog() method.
page.onceDialog((Dialog dialog) -> {
assertEquals("alert", dialog.type());
assertEquals("I am a JS Alert", dialog.message());
dialog.accept();
});
page.locator(alertLocator).click();Multiple Use Handler – A handler which can be used for all alerts can be added to the page object by using the page.onDialog() method. In the code, the handler will be called twice or as many times any interaction occurs with any alert on the page.
Consumer<Dialog> handler = new Consumer<Dialog>() {
@Override
public void accept(Dialog dialog) {
assertEquals("alert", dialog.type());
assertEquals("I am a JS Alert", dialog.message());
dialog.accept();
}};
page.onDialog(handler);
page.locator(alertLocator).click();
page.locator(alertLocator).click();On And Off Handler – A handler can be added to a page for a certain action and then removed from the page using the onDialog() and offDialog() method respectively. This may be used if a different action is required for a different dialog. Playwright allows multiple handlers to be added in the code but at runtime an exception is thrown with a message to the effect that the dialog has already being handled.
Consumer<Dialog> handler = new Consumer<Dialog>() {
@Override
public void accept(Dialog dialog) {
assertEquals("alert", dialog.type());
assertEquals("I am a JS Alert", dialog.message());
dialog.accept();
}};
page.onDialog(handler);
page.locator(alertLocator).click();
page.offDialog(handler);Confirm Dialog
The default Playwright behavior is to automatically dismiss the confirm dialog. A handler will be required if the dialog message needs to be accessed or the dialog needs to be accepted. The points of adding a single or multiple use handler, as discussed for alert dialog, is valid for confirm dialog also.
Default Behavior – This is similar to selecting the Cancel button.
page.locator(confirmLocator).click();
assertThat(page.locator(resultLocator)).hasText("You clicked: Cancel");Accept Handler – This handler will access the message and accept the dialog.
page.onceDialog((Dialog dialog) -> {
assertEquals("confirm", dialog.type());
assertEquals("I am a JS Confirm", dialog.message());
dialog.accept();
});
page.locator(confirmLocator).click();
assertThat(page.locator(resultLocator)).hasText("You clicked: Ok");Cancel Handler – This handler will access the message and cancel the dialog.
page.onceDialog((Dialog dialog) -> {
assertEquals("confirm", dialog.type());
assertEquals("I am a JS Confirm", dialog.message());
dialog.dismiss();
});
page.locator(confirmLocator).click();
assertThat(page.locator(resultLocator)).hasText("You clicked: Cancel");Prompt Dialog
The default Playwright behavior is to automatically dismiss the prompt dialog. A handler will be required if the dialog message needs to be accessed, text needs to be added or the dialog needs to be accepted. The points of adding a single or multiple use handler, as discussed for alert dialog, is valid for prompt dialog also.
Default Handler – This is similar to selecting the Cancel button and entering no text.
page.locator(promptLocator).click();
assertThat(page.locator(resultLocator)).hasText("You entered: null");Accept Handler – This handler will access the message, enter a text and accept the dialog.
page.onceDialog((Dialog dialog) -> {
assertEquals("prompt", dialog.type());
assertEquals("I am a JS prompt", dialog.message());
dialog.accept("Hello World");
});
page.locator(promptLocator).click();
assertThat(page.locator(resultLocator)).hasText("You entered: Hello World");Cancel Handler – This handler will access the message and cancel the dialog.
page.onceDialog((Dialog dialog) -> {
assertEquals("prompt", dialog.type());
assertEquals("I am a JS prompt", dialog.message());
dialog.dismiss();
});
page.locator(promptLocator).click();
assertThat(page.locator(resultLocator)).hasText("You entered: null");Multiple Dialog Type Handler
A single handler can be used to manage different dialogs by using the type() method of the Dialog class.
Consumer<Dialog> handler = new Consumer<Dialog>() {
@Override
public void accept(Dialog dialog) {
if (dialog.type().equals("alert")) {
assertEquals("I am a JS Alert", dialog.message());
dialog.accept();
} else if (dialog.type().equals("confirm")) {
assertEquals("I am a JS Confirm", dialog.message());
dialog.accept();
} else if (dialog.type().equals("prompt")) {
assertEquals("I am a JS prompt", dialog.message());
dialog.accept("Hello World");
}
}
};
page.onDialog(handler);
page.locator(alertLocator).click();
assertThat(page.locator(resultLocator)).hasText("You successfully clicked an alert");
page.locator(confirmLocator).click();
assertThat(page.locator(resultLocator)).hasText("You clicked: Ok");
page.locator(promptLocator).click();
assertThat(page.locator(resultLocator)).hasText("You entered: Hello World");