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.
Video Transcript
In this lesson, we will talk about how to automate dialog boxes. So if the dialog box is just a part of web application, then automation is the same way as the normal web element. You just make right-click, inspect, find the locator for the web element and move forward. But if the dialog box is the part of the browser, the automation of this type of dialog boxes is a little bit tricky. And in this lesson, I will show you how to automate these types of dialog boxes and how to make assertion of the message on the dialog box. So let's get into it. So there are the two types of dialog boxes that you can deal with in the web applications. Let me show you first the dialog box of this type, which is a web dialog box. So if I click on any of this button, we see the window pops up on the page. Automating this type of dialog box is straightforward because it is part of the DOM. You just inspect the element, find the locator, and create locator and interact with this dialog box, clicking on the buttons, and so on. So nothing special. But what can be tricky is the different types of dialog box. I go to the table, smart table page, and this is a table. And let's say if I want to delete the first row of this table and clicking on this trash bin icon, we see this type of dialog box, which does not belong to the web page. It belongs to the browser, and I cannot click on like inspect element or something like that. This is a browser message that you can either accept or cancel. And automation of this type of dialog box is a little bit trickier. So let me show you how to do that. Going back to the framework, and I will create a new test. So the very first thing, I need to navigate to our table page. So it's located in tables and data. And name of the page is smart table. Okay, now let's find out the locator for this trash icon that we wanna click. So I'll make a right click, inspect, and what we have here. So this trash icon has the class nbtrash, which we can select. But we can see that this icon also exists in all other rows for this table. So we need to identify this particular row, and then within this row, we need to find this nbtrash icon. And we can see that what, so td is the table columns, and tr are table rows. So tr is a tag for that table row. And usually table is located inside of the table tag. Here we go. So this is the table tag. Table tag has table head and table body. And table body, we have table rows and table columns. So what we need to do is first identify the table, then find the first table row. And then within this table row, find nbtrash icon. So let's do this. So let's create a new table, so let's create page, get by row. First we need to find table. Then within this table, we want to find tr, which is table row. And this table row has text. And let's find some unique text about this table row, which is, Unique. So this one, and then once we identify the row, we can locate locator and this trash box icon, inspect. And this is a class nbtrash, .nbtrash, and perform the click. All right, looks good, so let's run this test. Okay, I ran it, and I think you saw at the very little moment that something pops up, but then disappeared, right? And also, the row that we wanted to delete is not deleted. So let me run it one more time, and you will see this dialog box. Yeah, you saw the dialog box, and it disappeared. So what happens here, Playwright identifies automatically the dialog boxes like that. I mean, dialog boxes of the browser, and by default, it cancels this dialog box. So we cannot delete this row, because Playwright simply cancels this dialog box. And we need to overcome this by accepting this dialog box. So how to do that? We need to create a listener using a method page on. And inside of this listener, we're going to listen for dialog event. And then what we will do with this dialog, first of all, we can, of course, make an assertion of this dialog. How to do that is just expect, then we call the dialog.message method. And assertion to equal, are you sure you want to delete? That was the message. And then we want to accept this dialog instead of canceling it. So I'm calling dialog.accept, and now let's run this one more time. Okay, and you saw this dialog pop up, but this time we don't see email that we wanted to delete. So we were locating this mdo.gmail.com as a first row, but as you can see, it does not exist anymore. And we have ID 2, because ID 1 was deleted. And I guess the last step that we can add into this test is just to make a validation that the first row of this table does not have an email that we have deleted. Await, expect, and then I need to provide a locator for the first row. So let's make it simple. Locator will be table.tr, and we want to find a first row. And then make an assertion, not to have text. And we expect that the first row will not have this email anymore. All right, and let's run this one more time. Okay, and I think this test passed successfully, right? Yeah, it's passed. Just seven milliseconds to make a validation. Everything looks fine. All right, so let's quickly summarize what we did in this lesson. When you are dealing with dialog boxes, if this is a regular web dialog box, you automate it as usual. Inspect element, find the element, and interact with this. But if you are dealing with the browser dialog boxes, in order to accept it, you need to call page on dialog listener, and then inside of the dialog box, you need to call dialog accept. Then Playwright will accept this dialog, and you will be able to move forward. All right, that's it, guys, and see you in the next lesson.