Brief Summary
This video provides a tutorial on handling different types of alerts (dialogs) in Playwright. It explains how Playwright auto-dismisses alerts by default, but also how to register a dialog handler to perform validations on alerts before they are dismissed. The video covers three types of alerts: normal alerts with an OK button, confirmation alerts with OK and Cancel buttons, and prompt alerts with an input box.
- Playwright auto-dismisses alerts by default.
- Dialog handlers can be registered to perform validations on alerts.
- Three types of alerts are covered: normal, confirmation, and prompt.
Introduction to Handling Alerts in Playwright
The video introduces the concept of handling alerts, also referred to as dialogues, in Playwright. By default, Playwright automatically dismisses these alerts. However, the video explains that it's possible to register a dialog handler to either accept or dismiss the dialog, allowing for validations or specific actions to be performed before the alert is handled. The process involves creating a dialog handler and then triggering the event that opens the alert window.
Understanding Dialog Handling and Event Triggering
The video explains that while Playwright automatically handles alerts, registering a dialog handler allows for custom validations. This involves writing code to register the handler before triggering the event that opens the alert. The dialog handler can then be used to accept or dismiss the alert, or to perform other types of validations. The video mentions that it will show examples of different types of alerts and how to write dialog handlers to manage them.
Setting Up the Test Environment and Alert Types
The video transitions to VS Code, where a test file named alertspec.js has already been created. The video outlines the three types of alerts that will be demonstrated: alerts with only an OK button, confirmation alerts with OK and Cancel buttons, and prompt alerts with an input box. The video then navigates to a test automation blogspot page to demonstrate these alert types.
Demonstrating Alert Types on the Web Page
The video demonstrates the three types of alerts on the test automation blogspot page. The first button triggers a normal alert with an OK button. The second button triggers a confirmation alert with OK and Cancel buttons. The third button triggers a prompt alert with an input box where a value can be entered and validated.
Handling Alerts with OK Button: Enabling Dialog Handling
The video explains how to handle the first type of alert, which has only an OK button. Instead of directly clicking the button that opens the alert, Playwright requires writing a dialog window handler first. This is done using page.on to enable alert handling, which automatically triggers whenever an alert window opens. The handler is defined using an asynchronous arrow function that takes a dialog object as an argument.
Validating Alert Type and Message
The video details how to perform validations within the dialog handler. It uses expect to check the type of the alert (dialog.type) and the message displayed on the alert (dialog.message). After the validations, the dialog.accept() method is used to close the alert window.
Implementing Alert Handling and Clicking the Button
The video recaps the steps: enabling alert handling by writing the page.on function, and then triggering the alert by clicking the button. It emphasises that the dialog window handler must be enabled before the button is clicked. A page.waitForTimeout is added to slow down the execution so the alert can be observed.
Executing the Test and Reviewing the Results
The video demonstrates running the test in headed mode to observe the alert window. After the test passes, the HTML report is opened to review the results. The report shows that the assertions for the alert type and message passed successfully.
Handling Confirmation Dialogs: Modifying the Dialog Handler
The video transitions to handling confirmation dialogs, which have both OK and Cancel buttons. The existing code is copied, and the first test is skipped. The dialog window handler is modified to handle the confirmation dialog. The expected alert type is changed to "confirm", and the message is updated to match the confirmation dialog's message.
Accepting or Dismissing Confirmation Dialogs and Post-Closure Validation
The video explains how to close the confirmation dialog using either the OK or Cancel button. dialog.accept() closes the dialog using the OK button, while dialog.dismiss() closes it using the Cancel button. The video then demonstrates how to perform a validation after the dialog is closed, specifically checking the message displayed after pressing the OK button.
Executing the Confirmation Dialog Test and Reviewing the Report
The video shows the execution of the confirmation dialog test. The HTML report is then reviewed, confirming that the test passed and all assertions were successful.
Handling Prompt Dialogs: Modifying the Dialog Handler for Input
The video moves on to handling prompt dialogs, which include an input box. The code is copied again, and the previous tests are skipped. The dialog window handler is modified to handle the prompt dialog. The expected alert type is changed to "prompt", and the message is updated.
Validating Default Value and Passing a New Value
The video explains how to validate the default value in the input box using dialog.defaultValue(). It then demonstrates how to pass a new value to the input box when closing the dialog using dialog.accept(value). This value is passed as an argument to the accept method.
Performing Post-Closure Validation for Prompt Dialogs
The video explains that after providing some data and clicking the OK button, the message is validated. The element is inspected and the locator is updated.
Key Takeaways and Conclusion
The video concludes by reiterating that Playwright handles all types of dialogs by default, but enabling the dialog window handler allows for custom validations. The handler must be enabled before the button is clicked to open the alert window. The video summarises the key steps for handling different types of alerts and encourages viewers to watch the next video for more content.
