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.
Video Transcript
All right, guys, in this lesson, we will talk about dialog boxes. And basically, there are two types of those. One are native for the web application, and the second one is native for the browser. So let's talk about how to automate those. So this is the test application, and under Models and Overlays, we have the dialog page. And the dialog boxes related to the application, they are pretty simple to automate. For example, dialog box like this, this is nothing but HTML page and HTML code, so you just inspect, let's say, this element, inspect. You find this in the DOM, you see the final locator. You call this locator, click the button, and that's it, it's gonna work. So that's pretty simple, there is nothing to talk about it. But there is a second type of the dialog boxes and go into Tables and Data in Smart Table. And look, if I decide, let's say, to delete the first row in this table, I click on the Delete button, and I have this type of dialog box. And this particular one is the browser native dialog box. I cannot make right-click, inspect, or something to validate this message, for example. But if I want to validate it, I need to use a different way. So let me show you how to do this stuff. So I created a new test in UIComponents.cy.js, navigated to Tables and Data in Smart Table. And let's, first of all, find the web element. So I want to click on this Trash icon, and I can use this class NBTrash as my locator. So I type cy.gets class NBTrash. I want to click on the first NBTrash, and I make a click. All right, so let's run this, first of all. Okay, the test was executed successfully. You can see that first row was deleted, because currently we are starting with the number two. So the first row was deleted, it was a click successful. And also the confirmation message, are you sure you want to delete this item, was printed over here. So the trick is that Cypress configured by default to accept this kind of window. If it pops up, it's just default behavior. How to validate message of this window? And there are two options. Let me show you how to do this. So going back, option number one. So let me put it right here, option number one. So you can call method cy.on. And cy.on will listen on different events triggered by the browser. And we are looking for window confirm event. So this event is fired when the dialog box shows up. So window confirm event. Then we are looking into this confirm object. And we can make validation right away, expect that confirm. And the validation would be B2 equal, and the message that we are expecting. Are you sure you want to delete? I think this is the right message. And yeah, let's try to run this test right now. Running this test, and you see it passed successfully. And if I try to change it, for example, delete one, so it will not be equal. And running this test one more time. And assertion failed because the message did not match. So that's example number one, pretty simple and pretty straightforward. But this approach has a little issue. So the problem is that cy.on will work only when this event triggered. So when the window confirm happened, then we can catch the message inside of this window and make a validation. But if window confirm was not actually fired up, then that is a problem. Then we will not know that actually that window was there or not. And we will not be able to validate not just the message, but the window overall. And because of that, there is a second approach which is a little bit more advanced, but it will guarantee that if for some reason the dialog box did not show up, we will know about it. So for that, we need to call CyWindowObject. So we call the Cypress browser window, and then we get this object. And then we create CyStub like this. And we get this window object and looking for this confirm function like this. So what CyStub does? So technically, we kind of replacing the Cypress native, browser native confirm, window confirm function with our own custom function. And then from that, we drive the behavior of this function by ourselves, if that makes sense. First of all, let's make the alias and name it somehow. So later we can call this function to get the result, okay, how this function was used. And let's call it dialog box like this. And then we need to return, how do we want this function to behave? Returns either true or false. So if it's returned true, that window will be confirmed. If false, then it will be canceled, so returns true. Also, what is the feature of the CyStub that it can remember was this method called or not, was the confirm event fired or not? And if it was, how many times and other details. And this is exactly what we need to make a validation of. Either this window was called or not, and if it was, with what message. So that's it. After that, we make our action like this. And after the action, we make the validation. That sci.get, we call the alias dialog box like this. And make the assertion should. And the assertion would be be called with this one. And the message that is displayed is this one, like this. And let me comment this code and let's run this all together. So opening and running the test, you see it passed successfully. So we also see that a first row from the table was deleted. We were able to validate the message successfully. And if I want, for example, to not accept the message and to click on the cancel button, then I provide false right here. And then when I run this test, clicked right here. But the first row is still available on the application. But still, we validated that our confirm was called with this message, but we just click cancel button on it. So that's it, guys. This is how it works, and let's quickly summarize what we did in this lesson. So if you want to confirm or validate the message of the browser native window, you can use sci.on to intercept window confirm event and then validate the message that was on this window. But more reliable way is to create stop for this window event and then control the result of execution, either to accept this event with passing returns true or cancel this event with passing returns false. And then you call the alias for this sci.stop and make a validation. Was it called with the message that you are expecting? So that's it, guys, and see you in the next lesson.