[0:00]Hello and welcome. I'm Raghav and today we are going to learn something very easy and very interesting and that is assertions in playwright. So in this session we will see what are assertions, we will see what are the assertions in playwright and then we will see how to add assertions in our test in playwright. So this is going to be very interesting. Let's get started with what are assertions. Now in very, very simple words, assertions are like checks or verification that we do in our test. For example, if I want to check if an element is present or not present, if a text is present or not present, or if the element has some particular value or not, all these will be assertions. So we actually check these things and whenever we add a session, it checks whatever we have given in the assertion, is it equal to the actual and if actual and expected are equal, it will pass, otherwise it will fail the test. So in assertions, uh, in play right, we use the expect keyword, this comes from the just testing test runner and this is what we use and it comes inbuilt in the play right library, so we can directly say expect and then we can write our assertions. In a moment, I will show you how to add assertions. So in this session we are going to see how to check if an element is present or not present, visible or hidden. Whether an element is enabled or disabled, whether the text matches some particular value or does not match a particular value. We can check the element attribute as well like the class, ID or any attribute that you want to check. We can check the page URL, we can check the page title and then we will also see how we can match or how we can assert our web page against a screenshot. And in this case, we are doing visual validation and it means that we are going to check how does the page looks in terms of the colors, the location of the objects, the size of the objects, the the font, the pixel and anything that you want to check based on the visual validation or the appearance of the web page, we can do that as well. And then I will talk about soft assertions. What are soft assertions? So generally when we add these assertions, whenever there is a failure, whenever an assertion fails, it will stop the execution and come out of the execution. But in case we want that our execution, the test execution should not stop if a assertion fails, we can use soft assertions. So we will look at that. So first let's start with, uh, present not present and I will go to my VS code. And here is the project and I will go to my test folder and I'm going to create a new file. So I will say this is assertions dot spec dot JS. So I have created this file. assertions.spec.js and here at the top I will say import, I want to import page and expect libraries or scripts from the play right test library. And after this I can start writing my test, so I will say test and I will first give the title, I will say Assertions Demo. And then I will create a async function. So let me add this async function here and I will give this arrow symbol and curly bracket start and stop and in this function I'm going to pass a page fixture. So this is how we declare our test. And then I will just say await page dot go to to visit our web page, I will say page dot go to. All this we have already learned and here I will give the URL of the application. Now for this demo, uh, let us go to uh this demo application kitchen.appli tools.com. And here you can see uh here we have uh this web page, we have all these buttons here. So we will use this and in case at your time this application is not up or not available, you can use any other application or you can use your own application as well. So I will just go to this link. I will have all these links, all the notes in the description of this video so you can always check from there, I will also add the code there. And now, I'm going to say await page dot pause. Now, I am adding this pause statement here so that as soon as it comes to the pause statement, it will pause the execution and open the play right inspector window. So we can then uh run our execution step by step and we can also see the execution, the statements where exactly it has gone and we can see everything on the screen. So now I will try to run this and here I will first open a terminal window, so I can go from here and say new terminal or press control plus J key on your keyboard to bring up the terminal window. And here I will now say npx playwright test tests assertions.spec.js. I'm pressing tab, so it will auto complete and assertion, I am again pressing tab on my keyboard, it will auto complete. Now it will run on all the browsers which are configured in the config file, but I just want to run on one browser. So that we can save some time. So I will say hyphen hyphen project chromium. So it will only run on Chrome browser and also I want to see the execution, so I will say hyphen hyphen headed. So it will run in a headed mode and it will bring up the physical browser on the screen. So I have started the execution and you can see it has gone to the Chrome browser. And gone to the application and now here it has, as soon as it encountered the pause statement, it has opened the play right inspector and now I can do step by step execution by using this button. So before going here, we want to check all these assertions first. Element present, not present, visible or hidden, enabled or disabled, text matches value or not, element attribute. So here, uh, let us say I first want to get some element, so I will click on this explore button on the play right inspector and now I will go to the web page and wherever I'm taking my pointer, it is highlighting.
[6:54]Let me just go to this the kitchen element and if I again check my play right inspector. This is the selector, I can create a locator using this. So I will just go to my project and in the test I will say await page dot locator and I will use this locator. And now I can do my assertions. So let me also add the comments. So it will be easier for you. I will say assertions and the first assertion we are going to check is uh check if the element is present. So check I will say check element present or not. Okay, now here, we can say expect and we can give the locator and then say to have count or we can also give the element handle. Let me show you. So here, I will say await and I will say expect and this page dot locator, I will put in this brackets like this.
[8:07]And then I will say to have count and I will say count one. So this means we are checking or we are asserting that there should be a unique element, a single element with this locator. So we can run this. I will save. And on the terminal, I will press control C to stop this process and clear the terminal and I am pressing the up arrow on my keyboard to go to the last command and I will now run this again. So let us see this time it should run this assertion as well. So it has come here. It has paused. I will go next and you can see this is the, it has also highlighted this element. And if there is a single instance of this element present on this page or with this locator, it should pass. And if I now resume, you can see it has passed. So this is working fine. Now, I can also say here, I can say page dot dollar, this is a element handle. I can say await page dot dollar and you can see here, you can see the use of element handle is discouraged, use locator objects and web first assertions instead. So when you want to check whether it is present or not, you should always use the expect keyword and add the assertions, but I will show you where exactly it will be helpful. So I can just give the locator of the element, which is this, and now if I run this, this will pass, but if I have to add a condition that if this element is present, then I want to do something based on that condition. So if I create a if loop or the if condition, sorry, this is the condition. If condition and in the bracket, I will just pass this and then I will say inside the if block, I will say I'll just use this, I will say await and page dot locator and this locator and I will say dot click.
[10:21]So I'm just saying that if this is present, if this element is present, then I should go inside this if block and click on the element. Now, let me save and run it again.
[10:33]So I'm running the command again and let us see the execution this time. So if you want, you can do hands-on along with me and if you face any issues, you can let me know. I will click on next, next and you can see it has now come to this if block and this condition was true and therefore it has come inside the if block and now it should click on the element and it has clicked and now I will resume the execution and everything has passed. So it can be helpful. This way of using the element handle can be helpful if you want to add this in a condition that whether this element is present or not, based on that condition you want to do some action. Now if you try to add this in a condition, it will not work. So if you want, you can try to add this in the if block in the condition of the if block here and you can try, this will not work because it is not returning true or false, but this statement is returning true or false, so therefore this will work. Now you can also check whether an element is hidden or not, so I can use the same statement and I can say, so I will say check element hidden or visible and here I can use the same statement. expect and the locator and then I can say to be visible or I can say dot to be hidden.
[12:09]And this will check whether the element is hidden or visible. Now I am not reexecuting it now, I will execute after adding some more assertions, so we can save some time. In the same way, we can check enabled or disabled. So I will say check element enabled or disabled and I will say to be enabled.
[13:00]And then I will say dot to be disabled. So this will check enabled or disabled. Okay, now let me, uh, save and run it once.
[13:16]So I will clear the terminal and run the command again and let us see what happens this time. So here some assertions will fail. Let us see what happens when we have failed assertions. So we have got the play right inspector, I will go next, next, next and all this is passing and now we have come to this assertion, that is this element should be hidden, but this should fail. So if I go next, you can see it will check and it will go until the timeout that we have in our configuration file and then it has uh failed it and therefore you can see it is shown here as a failure. I will again go next and you can see it stopped the execution as it encountered the failure and it will also open the report.
[27:32]So here it says this screenshot it has taken this screenshot and it is saying is missing in snapshot. So it is writing actual. So now if you see your folder in the project, so I'm pressing control V to see the sidebar and the project tree. So you will see here under test, it has created this snapshot of the application.
[28:00]And from for the next run, it will actually compare against this snapshot. So let us see I will run this again. I will stop this process and you can also see in the report as well it will show this statement. That this snapshot is missing and it is writing actual. And now from the next step, it will, so you can see it has not failed it. It is just saying that because it did not had a snapshot, it has taken a snapshot now and from the next time onwards, it will check against this snapshot. So let us go back and run it again. And let us see this time what happens. So it opens the browser, goes to the application and it has opened the play right inspector. And I will say resume, so it goes to the next pause and now I will click on next and you can see it is running these two assertions and here we are using regular expressions. So it is running fine and let us see the result and this time everything is pass. So this is how we can use and check the attributes and use these assertions. Now, we also have assertions for checking the URL of the page, title of the page and also doing visual validation using the screenshot. And soft assertions, we have already seen that if you do not want to stop the execution, when an assertion fails, you can make them as a soft assertion and for that you can just use the soft keyword after the expect. So I hope this was very useful for you. If you have any questions, you can let me know and I will see you in the next session. Thank you for watching and never stop learning.
