Dialog Boxes | Bondar Academy

Lesson Summary

Dialog Boxes in Web Applications In this lesson, we explore two types of dialog boxes commonly encountered in web applications: 1. HTML Dialog Boxes These dialog boxes are standard HTML elements. Automation is straightforward: right-click, inspect, and locate the dialog component. Interact with them as you would with any HTML element. 2. Native Browser Dialog Boxes These dialog boxes are built into the browser and cannot be inspected like regular HTML. Examples include confirmation dialogs with options like OK or Cancel . To automate interactions with these, you must handle them differently. Automation Steps: Identify the table row and the delete button using page.locator . Trigger the delete action, which will display the confirmation dialog. By default, Playwright dismisses the dialog. To accept it, you must set up an event listener. Setting Up the Event Listener: page.on('dialog', dialog => { dialog.accept(); }); Ensure the listener is declared before triggering the dialog. This allows you to accept the dialog and proceed with the deletion. Validation: After accepting the dialog, validate the message using assertions. Confirm that the row is no longer visible after deletion. In summary, automate HTML dialog boxes normally, but for native dialog boxes, set up an event listener to handle them correctly. This ensures successful automation and validation of actions.