Playwright with Javascript | How to Handle Dialogs Or Alerts | alert(),confirm(), prompt() | Part 16

0:02 hi everyone welcome you all so in the today's video let us learn how we can handle different type of colors in playwrite so before doing that let us try to understand the documentation of playwright so if I look at their documentation they're basically calling them as a dialogues and they are basically uh alerts so they are saying three different type of dialogues support like alert confirmation dialogue and prompt we can also call them as normal alert confirmation alert and prompt alert so basically what they are saying is by default dialogues are Auto dismissed by playwriter dialogues are Auto dismantled by playwriter so what does it mean is whenever you get some alert on the web page whenever you're performing some

0:49 action whenever you get some alert on the web page playwright will automatically dismiss it so you don't have to handle them so because the play rate is automatically dismiss the alerts so we no need to handle them but however you can register a dialog Handler you can register a dialog Handler before the action the triggers the dialog to either accept or dialogue or dismiss it so what does that mean is so by default whenever you get some alert kind of a dialogue playwright will automatically handle this so you no need to separately handle this but still if you want to do certain validations on the dialog or on the alert window what we can do is we can register a dialog handle so for that we need to write a piece of code like this this is a simple code we

1:38 have to write to register a dialog Handler before performing the action so once you specify this Handler then we can actually write that action so basically this particular statement will perform some click action on the button that will open the a letter so as soon as the alert is open so this particular event will be triggered this is called dialog Handler or dialog Handler event and through that we can accept the alert or we can dismiss the alert or we can do any other type of validations so there are two parts are there so first part is what we need to create a dialog Handler which is basically called as we can alert we can enable alert handling which is also called

2:23 as a dialog Handler so for that we need to write this statement and after that we need to trigger the event that means we have to click on some button which will open the alert window and this particular event or this particular dialog Handler will able to handle the dialog means what we can perform certain validations on the dialog or alert window so I will show you some examples I will show you different type of dialogues or alerts and we'll see how we can write this dialog Handler to handle the different type of alerts and we can see different type of validations now directly go back to vs code editor and here I already created its lsdspec.js and a small test and I have imported test and expert functions and I have created one test function

3:09 and basically three types of dialogues or three types of alerts we have so some Melodies having only working button and the second thing is confirmation which is normally having okay and cancel buttons and the third thing is the alert windows are having some kind of input box that we can call them as I call it as a prompt alert okay now we'll see all of them three how we can handle this so first of all let us see alert with OK button so for that I'm trying to launch this page so if I just go back to this test automation blogspot.com so here you can see three different type of uh buttons here and when I click on the first button you will see normal alert window we have only one button okay button and if I look at the second one confirmation box if I click on this

3:58 now this is another type of dialog or another type of palette which is having okay cancel buttons and the third one is prompt when I click on this you will see the prompt dialog so here you can pass some value we can validate this and after that we can press OK or cancel whatever so when I click on OK so whatever you provided in the prompt so for example here I'm providing something called John and I say okay and here it is giving same name so this is a prompt type of dialog now we'll see how to handle them in playwright so let's go to vs coordinator so first I will show you how to handle the first type of alert window so before handling the select window so normally what you will do when you click on this button which will open the alert menu then we can handle this but in playwrite we will handle this in the different way so first before clicking on this

4:46 alert button before getting this alert window we have to write uh dialog window Handler so we need to write something called dialog window Handler so how we can write it let me show you go back to vs code reader so here so to write dialog window handle we need to First enable alert handling so how we can enable by using page page dot on page dot on so in this we have to specify a keyword called dialog okay in the page.org in this we have to specify something called dialog and that we need to receive in one more variable called dialog and this is simple a variable and I can use one keyword called async async and dialogue and this is a

5:38 arrow function which we have to write so dialog and they say Arrow function and then curly base okay so this is a basically uh Handler dialog window Handler so to write the Handler what you can do is Page dot on dialog is a keyword that we are storing in a variable now this dialog is representing a dialog box or alert window so by using this we can do different type of validations so what this particular function will do is here we are enabling enabling alert handling so this will automatically trigger whenever the alert window is open on your web page in this particular Handler will be automatically triggered whenever some alert is got opened so in this once you get

6:25 a dialog now we can verify something right for example I want to check okay what type of dialog it is what type of validation is right so what you can do we can use one assertion called expect and dialog DOT type there is a method called type so this will actually return what type of alert it is or what type of dialog box it is and I'm expecting it is a normal alert so I can say 2 contain two contain single quotes you can say adapter so this is one type of validation so what type of alert it is I can check this is alert type validation and suppose I want to verify some message which is the renewable alert window suppose when I click on this I want to verify this

7:11 message I am an alert box so this message I want to verify so then what you can do is you can say expect one more validation expect dialog Dot there is a method called message so this will written actual message which is displayed on the dialog or alert dot to contain one more accession to contain and here you can specify what exactly you are expecting from the dialog so once we have done uh required validations and then we can close the dialog there is only OK button we have so to close the dialog what we can do is we can say await for dialog Dot I can say accept so this is the function we have to call so this particular method will automatically close the dialog so three things we have done in this so in the any we here by writing this function we are basically enabling

8:02 alert handling or this is also called as dialog window Handler okay so dialog window Handler so when we have to write this before triggering the event that means whenever you click on the button it will open up the dialog or it will open up the alert right so before that we need to enable this so after enabling this now we need to open the alert menu by clicking on this button we can open the alert window so we can inspect this element and inspect this alert element and you can just go to selector hub and it is giving some relativex path now I am trying to use this relativex path go back now after enabling this alert handing now we need to write so I can say

8:51 have it await page dot click so we want to perform the click action on that element so page dot click and directly specify the element that's it so before clicking on the element or before opening the alert we have to enable the dialog window Handler so by writing this code we have to enable the dialog window handed so why we need to enable if you don't enable this till it will able to handle the alert window but we cannot do any validations on this we cannot check whether it is open or not what what is the type of text it contains what type of dialog box it is we cannot verify so before opening the alert window we have to enable the alert handling and

9:39 this is called dialog window Handler so this is called dialog window handle that we need to enable so simply we can say in shortcut enabling dialog window handle so once you enable the dialog window Handler then only we have to trigger the event okay so now let us see how it is going to work it will go very faster so what we can do is we can just put some time so that it we can see clearly there is a alert window is open or not so after clicking here I can just write something here page dot wait for wait for timeout and here I can say 5000 milliseconds all right now let me save and

10:25 then go to the terminal and then execute the course so I am now running this command npx playwright test and the test alert dot spec dot JS and project is Chromium browser and in the header board I just want to execute now press enter now it is started my browser now okay just observe it will go very faster so it will open the alert window immediately it will close now everything is done and if I look at here one test is got passed so that means what the alert is successfully passed all expectations whatever we have so all our got passed so if you want to check the report you can just execute this command npx playwright show iPhone report

11:15 now you can see this this is a test we have executed now you can see uh all my assertions are got but somehow the pageway timeout is got failed okay I think that function is not correct because we need to put some my weight before that page okay so rest of them all exception X experts are fast all assertions are got passed you can see this is the type of alert and also which contains a save message so all my assertions are got passed so this is how basically we can uh validate so whenever use page dot wait for timeout you also use a weight before the page okay so this is one type of alert which contains only OK button so it's a normal alert now I'm going to show you another type of alert let me close this

12:06 so just now we have seen alert with OK button right so now I'm just copying the same code and this time so first one I just want to skip by adding just keep keyword this will automatically skip now I want to run the test so this time I'm going to show you another type of palette normally we can call it as a confirmation on it so I can say confirmation dialog confirmation dialog which is also which is normally having a alert with ok under cancel both the buttons you can see on the dialog okay now what we need to do this time again I am launching the same page and now we need to slightly modify this dialog video Handler

12:53 so to modify this this time you are going to handle the different window so if I go back to the page and Confirmation box we want to handle so click on this confirmation box now we got this one so in this what were the things we can evaluate so we can validate what type of alert window it is basically it is a prompt type of alert okay that we need to check and after that we need to also verify this message so this partner message displayed or not we can check after that we can close this alert or dialog by using either cancel or OK button so my uh by suppose if you want to close this by using OK so you have to use accept accept method from the dialog and if you still want to close this by using cancel you have to use

13:40 dismiss method okay so accordingly we just try to modify this go back to confirmation dialog or alert with okay and cancel so how we can modify this uh a dialog window handle okay so let me just try to change this dialog window Handler so here same thing so page dot on we need to get the dialog and in this variable so what we are expecting so dialog DOT type so what is a type it should be it's an or not a normal alert it is a confirmation message so I can say confirm so this is a confirmed type of alert window that I am going to test and then what is the message we are expecting in this so if I go back to the alert so this is the

14:28 message we are expecting so you can just go back and then specify the same element okay so these are the two validations so one validation we are checking what type of valid it is whether it is a confirmation alert next thing is we are checking the message which is displayed on the alert window so after that we want to close it when I say dialog dot accept this will close by using OK button okay and suppose if I use like this have it dialog dot dismiss if we call this method so this particular function will close alert by using cancel button okay so this is a validation so after that we can also do some other

15:19 violation because after closing the alert window suppose I am closing this by using OK button right so after that you got some message here you pressed OK right so this message also we can validate it okay that is not part of this enabling window Handler because after closing the alert window we will get that message so after closing we have to verify okay so here I'm saying accept I just want to close my alert window by using OK button so this is a window Handler dialog window Handler we have to enable and after that we have to click on the button so this time we are clicking on some different type of button confirmation box we need to inspect so this is the relativex path and I'm trying to use it here

16:09 okay so after clicking on this it will open the alert window and this particular dialog window handle will handle this and it will check all the assertions but after closing the dialog box or after closing the confirmation alert window we do some validation so here we need to continue with the validation so what is the validation we have to do so this is the message you want to validate you press the OK button so let's inspect that element and this is the relativex path of this element so from this element we have to extract the text so this text we have text started so go back to the PS coordinator so now I'm writing the script here await page Dot uh page Dot so we want to put some assertion on the text which is

17:00 displayed right so we can directly write assertion say await expect and here I'm directly writing locator so expect page dot locator so what is the locator of that element I can just put it here this is the locator of the element and this locator should have some text so I can put one method so two have to have text to have a text T is uppercase character and here we can specify what is a message you want to validate so this is the message you want to validate copy this and then put here so this is a session so after closing the alert window

17:47 we can do validation so here page dot locator and the locator and to have text and this is the text we are expecting okay now let us try to save and open the new terminal and then execute yeah now open the alert window it is already closed it's very faster perfect now it is clearly saying one is got skipped one is got passed okay now let us look at the HTML report okay now you can see yeah first one is got skipped because why it is got skipped because first test I put skip here right so this is not got executed by playwriter so only

18:36 the second test is got executed and if I look at the report confirmation dialog so these are the steps exactly executed so all the assertions are got passed okay so this is how uh we can simply test alert window okay so this is the dialog so this is another type of alert window which is normally called as a confirmation alert or confirmation dialog now let me show you another type of dialogue so this is one type of dialogue let me copy the code and uh I'm also skipping this and now I'm going to write another test now this time I want to show you another type of dialogue so this time I want to show you prompt dialogue

19:26 prompt dialogue in a sense which is having an input box which is also having okay cancel button but along with the OK cancel button you can see some input box that also we need to handle okay so now the same application so now slightly we have to modify this dialog window Handler okay let me show you this so now the third one parameter so when I click on this you will get this alert window and by default some text is displayed some name is displayed right so this name also we need to validate so that's the default name which we have to validate and if I click on this OK button what happens whatever name is there in the input box okay so the same name is got displayed here called Harry Potter right same thing so

20:11 now we need to validate it so let's go back and then validate so how we can change this dialog window Handler same dialog as increation dialog so what we are expecting here dialog type so dialog type is what it's not a confirmation box it's a prompt so I can say prompt so these are expectation the dialog should be prompt type of dialog then so we can verify the message so this time what is the message which we have in this box and this is the message please enter your name so that is the message you want to validate so message contains this one so this is the message now after validating the message what else we can do we can pass some value in the input box also so this is the default value

21:00 so this is the default value which we can verify and after that we can pass some new value into this so how to verify this default value which is their input box you can just go back and write one more so before accepting this before accepting we need to put one more expect expect okay so here the default value which we have to violate in the input box so how to get the default value of the input box so to get the default value from the input box so we have to take this dialog okay dialog Dot uh dialog default value so dot there is a message method called default value so this will actually Returns the default value which is present inside the input box and that

21:50 value we have to validate so dot to contain two contain and here in the bracket you have to specify the value so this is our expectation so we can verify the default input value uh whatever the value which is already there in the input box that we can value so this is the value we can validate so how we can capture that value dialog Dot this is a dialog so from the dialog we capture the default value that should contains Harry Potter okay after successfully uh tested this particular value then we can put our own value okay so what we can do is I want to close this dialog box by passing some value here let's say I want to pass something called John and then I want to press OK button right so I want to pass some value here then I can press OK button

22:40 so for these two things we have to do only one one thing so what you can do is uh simply I can say we already capture the default value so immediately what you will do is we can just close the alert window here await dialog dot accept and at the time of accepting this input box at the time of accepting this dialog here we have to pass the value so this is something new so that input box we cannot directly inspect we cannot directly handle this so at the time of closing my alert window by using accept we just pass the value and this value will automatically go to that input box okay so this is the way we need to write our dialog window Handler so once you have written this there are multiple assertions are there we can verify the type

23:26 verify the type of the alert or type of the dialog which is prompt verify the message and also verify the default value which is there in input box and then close that alert window or close that prompt window by providing value in the input box so this is how we can pass right after writing this window Handler then come back come out from this block and now here we need to click on the button which will open the alert window now inspect this element prompt and this is the relativex path for that element now here I'm changing it so now I'm clicking on the button so that will open the alert window so once you open the alert window what is the validation we do now so after opening the alert window once we

24:14 provided some data here and after clicking on OK button so this is a message you want to validate so whatever is we provided in the input box same thing will be there here right so this is a message you want to validate now inspect this message and this is the X path of this element get this and now we need to change this page dot locator and this is the element and in this in this element what is the text we are expecting here is we are expecting this particular text and that we need to validate that's it okay so this is very simple so by default playwright will handle all types of dialogues okay so we no need to separately write code for closing alert or closing dialogues but

25:04 why we have to enable this dialog window Handler because we want to do certain validations on that so before clicking on the button or before opening the alert window this event should be triggered okay so before opening the alert window the event should be triggered so that's the reason we have to enable this dialog window Handler before clicking on the button okay so this will able to handle this all right so now the first two I just want to skip the first one is got skipped second one is also got skipped now the third one I just want to execute now save the file and then go to the terminal and run the command

25:53 you can observe here it is going very faster fine so now two got skipped why two got skipped because the first two steps I mentioned skip here so first two types of alerts first one is normal and the second one is confirmation now it is a prompt second one is confirmation now third one is a prompt alerted so first two got skipped and now the latest one is got passed so if you look at the report npx playwright show report now I can see this is a one prompt dialog so first two is already skipped so this is last one so all my assertions are got passed okay so this is how we can handle different type of dialogues or different type of alerts so what Leverage is clearly saying the playwrite is saying by default

26:44 dialogues are Auto dismissed by playwriter but if you don't uh so we no need to handle them but if you still want to do certain validations on the alerts or dialogues so we need to uh handle the dialogue so we need to register a dialog Handler before the action so before action is before clicking on the button we have to register dialog Handler then we can perform the action so that we can perform certain validations on the alternator okay so this is all about this video in the next video we will continue so thanks for watching