Dialog Boxes | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Mastering UI Elements
Instructor: Artem Bondar
Lesson Summary
This lesson focuses on automating dialog boxes in web applications, highlighting the differences between web dialog boxes and browser dialog boxes. Types of Dialog Boxes Web Dialog Boxes: These are part of the web application and can be automated like any other web element. You can right-click, inspect, find the locator, and interact with the dialog. Browser Dialog Boxes: These are more challenging to automate as they are not part of the DOM and cannot be inspected directly. They require special handling. Automating Browser Dialog Boxes To automate a browser dialog box, follow these steps: Navigate to the relevant page (e.g., the smart table page). Identify the locator for the action that triggers the dialog (e.g., the trash icon). Use a page.on('dialog') listener to handle the dialog event. Make assertions on the dialog message using dialog.message() . Accept the dialog with dialog.accept() . Example Code The following code snippet demonstrates how to set up the dialog listener: page.on('dialog', dialog => { expect(dialog.message()).toEqual('Are you sure you want to delete?'); dialog.accept(); }); Summary In summary, for regular web dialog boxes, automate as usual. For browser dialog boxes, set up a listener to accept the dialog and perform necessary assertions. This approach allows you to effectively manage dialog interactions in your tests.