Dialog Boxes | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Automation of User Interfaces
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore dialog boxes in web applications, focusing on two types: those native to the web application and those native to the browser. We will discuss how to automate interactions with both types. Types of Dialog Boxes Web Application Dialogs: These are simple to automate as they are essentially HTML elements. You can inspect the element in the DOM, find the locator, and interact with it directly. Browser Native Dialogs: These dialogs, such as confirmation messages, cannot be inspected directly. Automation requires different methods. Automating Dialog Boxes To automate the deletion of a row in a table, we use the following steps: cy.get('.NBTrash').click(); This successfully deletes the row and displays a confirmation dialog. To validate the message of this dialog, we have two approaches: Option 1: Using cy.on Listen for the window.confirm event. Validate the message using assertions. Option 2: Using cy.stub Stub the window.confirm function to control its behavior. Return true or false to simulate user actions. Validate if the confirm function was called and with what message. Both methods allow for effective validation, but the second option is more reliable as it ensures you can detect if the dialog was triggered at all. In summary, to validate browser native dialog messages, you can use cy.on for interception or cy.stub for more control over the dialog's behavior. This ensures robust testing of user interactions with dialog boxes.