Introduction to Playwright Testing Framework

hi friends this is bakaa welcome to playrate full course in this chapter one of playrate full course so we will see how to get started with playright so we will be seeing very first topic that is the playright what is playright and what are the advantages of using playright and limitations of playright and how exactly playright works so we will see the playright architecture and then we will see uh what is the difference between playright and Cypress playright and selenium web driver and what are the softwares you need to install to work with the playright so basically you need to install the visual studio code and also you need to install the nodejs in your system and then we will see how to install playright using the visual studio code and also we will see the play right folder structure and then we will see about the test Explorer where you can see number of spec file and how you can run the specific spec file and how to run the specific test on the different browsers like Google Chrome browser Microsoft edge browser and webkit browser and also Firefox browser and then we will see how to record a test in vs code using the playright and also we will see how to generate the playright HTML test report and we will see what is recorded cursor in playright and next we are going to discuss what are the commonly used terminologies in the playright automation testing tool and then we'll see how to write first play right automation test then we will see what is pi locator in playright and next we are going to discuss about how to install playright using the command prompt and how to run play test in headless mode or headed mode using the terminal or the command prom command prompt and then we will see how to run the specific spec file in the playright and then we are going to see how to run playright test on the different browsers and then finally we are going to see how to use code gen to record the playright automation test in this playright tutorial we are going to see what is playright what are the advantages of using playright and of course we will see the limitations of using the playright automation tool so let's understand the first what is playright playright is an open source automation testing tool which is used used to perform the end to end testing of modern web applications mobile applications in the headed mode or the Headless mode so let's look at the what are the advantages of using the playright automation tool the first one is cross browser testing you can run playright automation test in the different browsers such as Chrome browser edge browser chromium and also you can run your test in the Firefox and webkit browsers and second advantages of using the play rate automation tool is it supports for the crossplatform testing so you can run your automation test in the different operating systems such as Windows LX and also you can run your test in the Mac operating system next one is cross programming languages support so you can write the automation test in the different programming languages such as JavaScript typescript python net and also you can write your write your automation test in the Java programming language which is very popular and next advantages advantage of using the playright automation tool is you can run your automation test in the web browser and also you can run your automation test in the mobile emulation of the Google Chrome for Android and also you can run your mobile mobile automation test in the mobile Safari also and next one is auto weight so whenever we are performing any any action on the web element so there is auto weight mechanism is present in the play right automation tool so by using that so you'll be seeing the very very less flaky test and next one is tracing in this tracing basically whenever test got executed which has 10 steps so you can see in each step what happened and also you will get the network details also what is the call it has made and what is the response it got you can see each and every details in each of the steps by using the tracing or Trace F also so one these are the same thing and it has the inbuilt reporting mechanism uh by using the reporting mechanism where you can see the number of tests got executed and how many are passed and how many are failed and also you can see how many tests are skipped also and next advantage of using the play rate automation tool is dynamic weight assertions where you can say for example you have asserted something or you are trying to validate something in the web element sorry in the web page so already weight is present so you can basically modify this particular weight and you can increase or decrease it so it has the inbuilt default weight time that's a polling time so it basically checks that particular element is present or not basically whenever element is present basically it will perform the asset operation and next one is it's a faster and reliable so definitely so play rate is very faster than the selenium and also you can compare to the Cypress also so play rate has the many features compared to selenium and Cyprus and also it is very faster and it's very reliable for example if I am running a one particular test 10 times it will gives you it will gives you the same result so that is the best thing best best thing about the playright automation tool and next Advantage is powerful tool tooling because of these features first one is cod by using Cod gen you can generate the automation code basically it is a uh recording the test and second feature is playright inspector so by using this playright inspector you can basically identify the element by using that element locator you can basically perform any action on that particular element or the locator and third point is how why we are saying a this particular playr tool is a powerful tool right so third one is Trace viewer so basically in this case you can track each and every details whenever test is got executed you can see what is happened in each of the steps by seeing the network details and also basically you can perform any action or basically you can identify the element by using the inspector so when you are viewing the trace viewer details and last Advantage is no flaky test so because of Auto weight and dynamic weight assertions so these are the two automatic weight mechanisms are present in the play automation tool so that's the reason you will not see the flaky test in the playright automation test while writing it and let's look at the limitations of using the playright automation tool the first one is so play right has the less Community Support compared to the selenium web driver because it is came into the market very recently so selenium is present in the market from long time so that's the reason you will see the less community support for the play rate and second limitation of using the play rate automation tool is it does not support for the Legacy browser such as I 11 browser so that's a Internet Explorer 11 version browser and the third limitation is it is not possible to test your mobile apps in the real sorry guys in the real device so that's the third disadvantages disadvantage of using the playright automation tool in this play right tutorial we are going to see playright architecture how exactly playright works when you write your test when you trigger the playright automation test so basically you will see the three components over here and two Protocols are being used in the playright architecture so let's look at the components first the first one is client component where we are writing the playright automation test by using the JavaScript Java python C and many other programming languages and second component is that is the play server and third component is browser engines it can be the Chrome Firefox webkit and other browsers also so as I said we are using the so sorry as I said so play is using the two protocols the first one is websocket protocol and the second one is play rate is using the another protocol called CDP that that is nothing but the Chrome Dev tools protocol so very first protocol protocol is being used between the client and the playrate server that is the web socket protocol and the second protocol is being used between the playrate server and the browser engines so that is comes over here so let's look at how exactly this playrate architecture works here so what is the workflow of the play rate architecture so let's understand one by one components so in the client we are writing the playrate automation code in the different programming languages such as JavaScript python C and etc etc and coming to the second component that is a server so where we are actually it is communicating between the client and the web browser engines so it can be the Chrome Firefox and Edge browsers so these are the browser engines so basically this particular play right server is communicating the communicating between the our code that is the client and the web browser engines and if you look at this particular line so playrate uses the CDP to communicate between the different browsers to communicate with the chromium or the Chrome browser so it is using the inbuilt protocol that is the Chrome tools protocol so to communicate with the Chrome browser or a chromium so play is using the CDP protocol to communicate with the other browsers such as Firefox webkit so it has implemented the W1 CDP protocol similar to the CDP it has implemented the another protocol to communicate with the other browsers it can be the Firefox webkit and other browsers also and let's look at the next point that is the web socket protocol so basically it is websocket is connection is established to the server from the client if you look at this particular diagram so client will establishes the web socket connection to the playright server where once the connection connection is established by using the process called websocket handshake so websocket handshake sorry web soet sends the response as as soon as it gets the real time request for example whenever client has sent the request to the play server through this particular protocol immediately it will respond to the client and all the communication happens between the client and the playr server or the only single connection that's all about it and as as usual we are using the CDP to communicate between the play server and the web browser engines and let's look at the last point that is the how exactly communication happens between the client playright server and as well as the web browser engines so firstly whenever we trigger the automation test execution what happens it will convert client will convert into the client will convert your automation code into the Json format and sends it sends to the server or the web socket protocol so as I said so basically client will convert your automation test code into the Json format and it will create the connection to the server by using the websocket protocol connection and it will pass the Json format data to the play right server and once the server received received the Json format data so basically it will respond back to the client by communicating to the web browser engines and play communicates all the request or a single web soet protocol connection so let's say you have triggered 10 automation test for the execution so all the 10 test execution will happen over the only single web socket protocol connection only so it will never close the connection after executing each of the test so all the test execution will happen over the single protocol connection that is the websocket protocol connection and if you look at the very last Point test failure and test fless is very less as because all the test will be getting executed over the single web socket protocol connection so this particular connection will be never terminated until unless it is terminated by the client or the server in this playr tutorial we are going to see what is the difference between playright and Cypress automation tool so let's look at the very first future that is a programming language support in case of playright so it supports for JavaScript typescript Java Python and c.net but in case of Cypress automation tool so it supports for only JavaScript programming language so the second point is browser support in case of playright it supports for multiple browsers and also it support for the mobile emulation for the Chrome and as well as a suffar but in case of Cypress automation tool so it supports for only for four browsers one is Chrome Edge Firefox and electron browser and the third difference between playrate automation tool and uh Cypress automation tool is framework so in case of playrate so it supports for moocha gist and Jasmine but in case of Cypress Cypress supports for the only mocha framework the fourth difference is operating system in case of playright so we can use Windows Linux and Mac but in case of Cypress it support supports for the windows L Linux and also it supports for the Mac but it supports for only the 10.9 and a versions only and the next difference is open source so Play Ride is completely open source automation testing tool but Cypress is few features are not available in the open source Cypress automation tool so few features if you want it so you need to buy the whole Cypress tool and the next future is support so playrate is a new automation testing tool so that's the reason you will find the bit less community support but Cypress coming to the Cypress side so it has a bit strong community support because it is uh in the market from uh few years ago so that's a reason so you will find the more support from the community side whenever you stuck in the any project or with any issues so many people will be able to guide you and the seventh difference between the playright and Cypress is so in case of play right so it does not support for the testing the mobile app in the real devices but in case of Cypress so you can test the mobile app in the real devices by connecting to the cloud and the eighth difference between playrate and Cypress is reporting in case of playright you can generate the report directly within few seconds but in case of Cypress it is not possible so you need to install the third party plugins and then you can generate the reports for the automation test execution in this playr tutorial we are going to see what is the difference between play rate automation tool and selenium web driver so let's look at the first difference programming language support in case of playright automation tool so it supports for the JavaScript typescript Java Python and c.net but in case of selenium web driver so it will support additionally so it will support all the programming language which supports for the playright additional to that so it supports for the Ruby perland PHP programming language and the second difference is browser support in case of play right it supports for the Chrome Edge Firefox chromium mobile Chrome and also it supports for the mobile Safari and additionally it will support for the webkit browser but in case of selenium web driver so it does not supports for the webkit browser so selenium web driver supports for the Chrome browser edge browser Firefox browser Safari browser and Opera browser so selenium web web driver does not support for the web kit browser and the third difference is framework in case of playright so it supports for the gist jasine AA mocha and vest but in case of selenium y driver it supports for multiple Frameworks such as Jasmine mocha web driver IO test ngj unit and any n unit also and coming to the fourth difference between the playright and selenium web driver is operating system support in case of playright it supports for the windows Linux and Mac OS but in case of selenium web driver it supports all the three operating system plus additionally it supports for the Solaris and the fifth difference is open source yeah in case of playright so it is a completely open source automation tool which is developed by the Microsoft but in case of selenium web driver so selenium web driver is also the completely open source framework sorry open source API which is developed by the community and the sixth difference is support so playrate has the less community support because it is a new tool so very recently came into the market so rapidly it is growing the its Community but coming to the selenium web driver so it has the very large community support and also very well documentation and the seventh difference between the play right and selenium web driver is mobile app testing in case of play rate it is possible but in case of selenium web driver it is not possible so it is possible in the selum web driver also but we have to use the third party tool called APM by by using that we can perform the mobile app testing coming to the next difference that is a speed so play rate automation tool is very faster than compared to the selenium web driver so selenium web driver is very slow compared to the playright automation tool and next difference is reporting so playright by default it provides the reporting mechanism but selenium does not provide the reporting mechanism we have to use the third party tool called test NG extent report or Allure report like that and the 10th difference between play right and selenium of driver is auto weight in case of play right automation tool automatic weight is available whenever we are trying to identify any web Element Auto weight is there automatically it will pull the element and it will check whether it is available or not if it is available it will perform the action on that particular web element so that that mechanism is there in the play rate but in case of selenium driver we have to write the custom code to check the element and the 11th difference between play rate automation tool and the selenium web driver is architecture in case of play rate headless browser with the event driven architecture but in case of selenium web driver it is a four layer architecture so the first one is we have the selenium client client library and second one is Json wire protocol and fourth one is sorry third one is browser drivers and fourth one is browsers so it's a four layer protocol and the next difference is prerequisites in case of play so you need to install the nodejs but in case of selenium web driver if you want to write the selenium automation test you need to have the API and drivers to perform the action on the web application so that's this is all about the difference between the playrate automation tool and the selenium web driver in this playr tutorial we are going to see what are the software requirement for the playright full course so basically you need to install the nodejs first then you can install the visual studio code and we will be using the JavaScript for writing the late automation test and anyway you'll be having the operating system it can be Windows operating system Mac or LX so in the next tutorial I will be showing you how to install nodejs and visual studio code and also how to verify whether these two softwares are installed or not in your system that we are going to see in the next playr tutorial in this play right tutorial we are going to see firstly how to install the nodejs you can go to the google.com and here search with download nodejs and here you can go to the official link of nodejs and based on the operating system you'll be finding the nodejs software here so firstly it is listing the windows Mac OS and then Linux and based on your number of bits of operating system you can click on that respective uh link and that will downloads you the nodejs software in my case mine is Windows so here I have downloaded the MSI 64bit because my system is 64-bit and once I click on this one it will start downloading the software so simply I will give the one of the location and that's here I'll say save and simply I will pass this particular download as well because in my case I have already downloaded it and once the download is completed so you will find the nodejs software like this so in my case I have downloaded little bit uh long back and once you downloaded simply double click on this particular. exe file that is a nodejs exe file the installation is very simple so you have seen how to download the nodejs software in your system and once you are having the nodejs software in your system simply double click on that particular software and the first window will open like this click on next and select this checkbox that is I accept the terms in the L License agreement and click on next and click on next installation is very very simple guys you can click on the next button once again and here also you need to click on next and after clicking on the install button it will take few seconds to install the software in your system and then finally you can click on the Finish button and once the installation is completed simply you can go to the command prompt in your system and simply so let me open the command prompt over here and once the node is nodejs is installed in your system simply type node space hyphen V and if nodejs is installed properly in your system and automatically it will returns to the version of the nodejs so this is how you can download and install the nodejs now let's see how to install the visual studio code you can go to the google.com and here search with download vs code so vs is nothing but Visual Studio code and here you can go to the very first link that is the official website of the visual studio code and here based on your operating system you will be finding the vs code software so in my case it is a Windows I have clicked on this particular windows and if your system is Mac you can click on this Mac and if your system is red hat or Fedora or you want you can click on the respective links so in my case as I said it is a Windows I have clicked on this particular windows and then I got this particular dotexe file and simply double click on this particular software installation is very very simple simply you need to click on the next next next and finish it once the installation is finished simply in the start type Visual Studio code so in my case it is already installed so simply I I'm selecting the visual studio code so it will open the window like this and if it is Visual Studio code is successfully installed so in my case I have already opened one of the folder like this from the file that's it guys so this is how you can download and install the vs code in your system in this playr tutorial we are going to see how to install playright using visual studio code so there are very easy and simple three steps which you need to follow the first one is step one you need to install one extension called play right test for we PS code and step two is then you need to press control shift p and then you need to enter install Play rate then finally in the step three you need to select the play rate configurations and then you need to click on okay button and you need to wait for a couple of seconds to complete the playright installation in your system so let's navigate to the vs code and let's see how to install Play right in vs code so here you need to create a one new folder that is a empty folder in my case I have already created play tutorial full course empty folder if you look at here so this folder is empty so I'm going to open this particular folder from the vs code you can go to the file and here select open folder and select the newly created folder that's it so let's install the extension first so you can go to the very last icon that is extensions you can click on that icon and here you type play right test for vs code and if you see here so this is the extension and if you look at the develop developed by so it is so this particular plugin is developed by the Microsoft so simply click on the install button so it is already installed now and if you see here you are getting the uninstall button that means so this extension is installed in your system and you can go back to the Explorer and here now you need to press the control shift plus P so here you need you need to type install play right so in my case I have already in I have tried installing it so that's the reason you can see the very first option and also you can see the recently used recently used command so simply you need to type the install playright and then select the install playright and after that here you need to select the playright configurations so here I'm selecting all the browsers chromium Firefox webk so we are using JavaScript for the automation code so that's the reason here I'm checking this particular checkbox if you are using typescript by default it will take the typescript as the configuration and here I'm removing the add GitHub actions workflow as of now it is not required so that's the reason I'm removing it and then you can click on the okay button that's it guys so if you look at here in this terminal so it is started installing all the required playright libraries and plugins and also slowly it will start even downloading the all the browser exe file also so if you look at on the left side package.json file created and also nodecore models also created package hyphen log. Json file Al created and also you can see the tests folder tests hyphen examples folder so if you see here it has installed the playright in your system in this playright tutorial we are going to see default playright folder structure so let's navigate to the vs code so this particular installation we have done in the previous playright tutorial so let's look look at the all the folders and at high level we will see what exactly it contains so firstly we have the node nodecore models so this particular folder it contains all the GS file that is a Javascript file and also it contains all the plugins which are required to run the JavaScript code and as well as the playright automation test coming to the second folder that is tests so if if we look at the example dot spec. JS file so it contains very basic two test cases so if you look at the sample test so here they are navigating to the URL and here they validating something they have provided the that means Microsoft has provided the sample very basic to automation test that's it and if I come to the next folder that is the tests hyphen examples so if I open this demo hyphen to do hyphen app. spc. JS file so it contains multiple automation test cases so by using this also we can explore how to write the playright automation tests so basically it is a kind of advanced advanced level playright automation tests by referring this you can learn how to write the automation code at high level and coming to the next file that is the package.json file so in this file so it contains the all the dependency details if you look at in the line number 10 so far it has installed the two plugins one is playr test and another one is types node and also you can see the respective version also if I install any plug-in so automatically that will be added over here so basically at high level package.json file it contains the dependency details and the last file is play. config.js JS file that is so if you look at this particular file so it contains the all the playrate configurations here you can specify where exactly your automation tests are present and whether you want to run the automation tests parall or not you can also specify how many times you want to retry when test is getting failed and also you can specify the whether you want to generate the report or not after the execution and also you can specify the all the different types of browsers also if you look at all the this configuration so at high level if you think about the play. config file so it contains the all the configurations which are required to run the test basically for example you have a automation test you want to run it in the Chrome browser so that configuration can be done here and also you want to run your test in the Headless mode that configuration can be added or updated in the play. config.js file so this is all about the default playright folder structure in this play tutorial we are going to see how to run playright automation test in the visual studio code and also I'm going to discuss about test Explorer where you can uh run your automation test in the different browsers and also you can filter the automation tests and also we can run our debug the playright automation tests so let's see how to run the playrate automation test first and then we will move on to the test Explorer so here I'm navigating to the vs code so as I said earlier all our automation tests are present under the tests folder so here I'm opening the example do spec. GS file and if you see here so currently it has two test cases that is a line number four and line number 11 and on the left side you can see the one icon simply you can right click on that particular icon and you can see the multiple options here you can run the test and also you can debug the this particular test here as of now so let's run the test directly you can click on this particular icon it will run the play right automation test or you can right click on this icon and select the option as run test So currently it this particular test is running in the Chromium browser and also our test is getting passed right so let me run the second test also simply I'm clicking on that particular run Icon and also here here you can see that browser name and also here you can see the status of the automation test execution so this is how you can run the any playright automation test from the spec file now let's move on to the test Explorer where you can execute the all the automation test at one go on the left side you can see the very last icon that is a testing simply click on that particular testing and here you will get the test Explorer icon and on the top side you can see that the configurations so default configuration is chromium if I want to run my test on the Firefox simply I need to select the Firefox here that's it guys so right now my playright automation test tests are getting executed in the headless mode and also let's add the one of the flag in the playright configuration so if I add one flag so that will run our playright automation test in the headed mode so after the line number 29 in the line number 30 I'm adding one flag called headless colon and here I'm adding the bullan value as a false that's it guys so let's make sure that our automation test is getting executed in the headed mode so once again I will go back to the example. speec file and then we will move on to the test Explorer once again so let's run the test so this time browser should open up so if you look at this one so browser is getting opened and also our test is getting passed also so let's try to run the second test also so it has opened the Chromium browser and also our test is getting passed right so that this is it guys very simple flag we have to add it in the play. config.js file so that will run your automation test in the headed mode headed mode or headless mode so right now I have added buan value as false if I make it as a true then it will run our automation test in the Headless mode so I want to run my all the automation tests in the headed mode only so I will go back to the test Explorer so as I said that is a very first configuration so by default our tests automation test tests are getting executed in the chromium and if I select any of the other browsers so it will get execute on the different browser browsers also and also you can debug the test so at the project level and also if you see here so we are getting only the tests folder under the tests if that particular spec file is present all the specs spec file will be coming inside the tests folder so right now only one spec file we have so that's the reason you can see the only one spec file and this particular spec file has two automation test right so you can execute the this whole spec file by clicking on the run test icon and also you can debug the spec file by clicking on the debug test icon and also you can specifically if you want to run a specific test in those cases you can select that particular test and you can click on the run test and also you can debug this particular test by clicking on the debug test and also you you can in this test Explorer you can also filter the spec files and also the automation tests if you click on this particular icon so you can filter the automation test based on the fail tests and only executed tests and also you can filter the play right automation test in a active file manner also and also you can write write the fuzzy match based on that also all the spec file and automation test will be be listed over here and based on that you can trigger the automation test execution so let's run the this particular spec file so if I click on this run test so it is going to run the these two test in the parallel mode because if you look at this particular configuration file play. config.js file so let it finish the execution then we will go back to the playright configuration file so if you look at the result also our two tests are getting executed so here in this configuration file in the line number 16 so by default flag is true that's the reason our two tests are getting executed parallely so if I want to run my test sequentially simply here you have to pass the F flag as false that's it guys so now it is reloading all the test and I will come back to the test EXP Explorer here and once again I will trigger the example dopc dogs file so I started the ex execution now so right now it is executing the very first s case and then it started the second s execution that's it guys so this is all about how you can run the play rate automation test and also how you can use the playright test Explorer to maintain and manage the automation tests in this playrate tutorial we are going to see how to run playrate automation test on the Branded browsers such as uh Chrome browser Microsoft edge browser so let's navigate to the vs code and let's understand how to run the playright automation test in the different browsers so this is a test Explorer from here also you can run the your automation test in the different browsers so if you look at the test Explorer beside that there is the configuration you can click on that Arrow icon say for example I want to run my automation test on the webkit browser so simply we need to select this particular webkit so it will start executing the all the playright automation test on the webkit browser so if you look at the result so our tests are working fine right so this is a one way guys now I will go back back to the Explorer and the second way is you can open the play.con JS file and here so you need to comment the line number from line number 37 to the line number 50 that's it guys now we will execute the all our playright automation test in the edge browser firstly so if you look at the line number 63 from 60 3 to 66 you can uncomment the line that's it so I will go back to the our tests folder inside the tests we have the example dopc file so currently we are having the only two tests so let's try to run the one by one these two tests so simply I will click on this icon it will start executing the automation test on the edge browser so later we will see how to execute the playright automation test on the Chrome browser also so if you look at this one so it has opened the edge browser and also it has executed our test so let's run the second test also and if you look at this test results so previously it has executed the automation test on the Microsoft edge browser so let's trigger the second test also so because of some reasons that was disabled so that's the reason previously it was not executed so our test second is running and also you can see the test results also so sorry guys and it is executed on the Microsoft edge browser now I will go back to the test Explorer from here also we can run the all the test so here I'm going to trigger the our spec file for the test execution so it should execute all our playright automation test on the edge browser you see here so it is able to execute the all our automation test on the Microsoft edge browser so in the similar way we can go back to the Explorer and also we can modify the code in the configurations so so far we have executed play rate automation code on the Microsoft edge browser in the similar way we can execute the play rate automation test on the Google Chrome Google Chrome browser also so here I'm uncommenting the line number 67 to the 70 Line number that's it guys so you can see the name as Google Chrome and that is the desktop Chrome so now I will go back to the example dopc file to load the configuration it will take few seconds and if I execute the very first test and it should run on the Chrome browser and if you see this particular browser also so it is St executing the test on the Chrome browser and also here you can see the test results so you can run your both the test from the Explorer so it has loaded the configurations now I will execute the spec file which has the two automation test so right now it is running the first test and then executing the second test also and also you can look at the results also so our two tests are getting executed on the Google Chrome browser so this is how you can execute the playright automation test on the Branded browsers like edge browser and Google Chrome browser in this play right tutorial we are going to see how to record a playright automation test in Visual Studio code and later I will discuss about where exactly playright HTML test report will be generated so let's discuss the manual scenario then we will record that manual scenario by using the playrate Coden so here I will open this particular URL that is the github.com followed by the buaka and then I will click on sign in link then I will click on the text box that is the username text box so let's enter something here and I will come to the next text box that is that password and let us enter some data over here and then we are we are going to click on the signin button and if you see here so we have the error message displayed over here in the alert so finally we will validate this particular error message by using the play right automation tool so this is the whole end to end scenario what we are going to automate it by using the record and Play Future by the play rate automation tool so let's navigate to the vs code and here you need to navigate to the testing that is a test Explorer and if you see the down left side so there are multiple feutures are listed by the play right and simply you need to click on the recorded record new and if you see here so play right code gen started running and it brings up the browser basically so here we have to enter the URL first so let's copy the URL so this is a browser opened by the play right so here first firstly I will enter the URL and it opens up the GitHub page and then we are going to click on the signin link and then we are entering the username so let's enter some username over here then I will click on the password text box so let us let's enter some data over there and then we are going to click on the signin button and if you see here so error message is displayed and we have to verify this particular error message so there are three ways we can validate this particular element or particular text box sorry text displayed on the web page so if you look at this particular grid so that's a particular part of the UI so it has multiple options over here so if you look at the last three options the very first option is assert visibility so basically if I click on this particular particular assert visibility so it validates the whether element is displayed or not and the second future is we can assert the text basically it it validates whether particular text is present or not and also the last future is you can basically verify the specific value from the web element so I want to verify this particular text which is displayed on the web page so that's the reason I will select the assert text here and once you click on this assert text and you need to click on the text which you want to validate it so once you click on that particular web element and here you will it will open the one popup window and simply you need to click on the accept button that's it guys and then simply you can close the browser and if you see here in the visual studio code so already it has generated the all the code what we have performed a actions in the web page so let's navigate to the Explorer here so by default automatically it has created the test hyph 1. spc. TS file so you can rename this particular file so in my case I will give the file name as so by default it will create the TS file so you can rename that that into the JS as well so here I'll say record test dopc dogs that's it guys then I will save it so let me explain you the code as well so in the line number four it is navigating to to the URL then we are clicking on the signin link then in the line number six and seven firstly we are clicking on that particular username text box and then we are entering this data and next we are clicking on the password text box and we are entering the data in the password field and in the line number 10 we are clicking on the signin button and finally we are validating the whether that particular text is displayed on the sorry guys so finally we are validating that particular text is displayed on the web page or not so let's run the play right test and if you see here so it has launched the browser and it basically it's performing all the actions perfectly fine and also you can see here so our test is getting passed and also over here also you can see that our test is getting passed and also you can see the in which browser our test is getting executed right so now this time what I will do is so now test is getting passed and it is able to validate the text which is displayed on the web page by using the two content text right so here I will enter the different text so which is not matching with the web element text right so this time our test should get failed basically right so let's run the playright automation test now and this time it should get failed so it has opened the browser then it has to click on the signin link and then it will enter the username and password then it will verify the displayed text right so if you look at here so it is showing in the line number 11 so it's getting failed over here so it is not able to match the actual value and expected value right so this is the expected result and also test is getting failed and also here you can see that one test test is failed right so this is how you can record a playright automation test by using the Cod gen extension in the vs code now let us see about the playright HTML test report so where exactly this report will be generated you can navigate to the vs code and over here you can see that by default automatically one folder one folder will be created whenever you run playr automation test the folder is playr hyphen report inside this you will find the index. HTML report you can go to the location of this particular file and where you can find the HTML report simply open that report and if you see here so this is a total number of test cases and this is a pass count this is a fail count and this is a flaky count and skipped count so in our case only one test is there and that is getting failed so let's click on the failed one and here you will see the test so this is a spec file name and this is a test case name so simply you can click on the test case name and here you can see the firstly test name and also spec name spec file name and also here you can see the in which browser this particular test got executed and if you see here so this is the expected value but we are getting this particular value from the web page right so basically it is not matching the actual and expected value so this particular test what we have created just now by using the record and play feature by the play right tool and also we have executed this particular test and if you come down so here it will list down all the steps that particular test contains and also you can see that in which Step so our test is got failed also and also here you can see on the right side the the number of seconds or minutes it has taken that particular step so let's go to the vs code now so this time what I will do is so here I will pass the correct value in the expected right this time our test should get pass so it has opened the browser and it has to click on the link and then it will pass all the data and it will click it will click on the sign in button and also you can see here so our test is getting passed now and in the test results also you can see that our test is getting passed so let's navigate to the report now so you can refresh this particular page that's index index.html and here you can see that so our test is getting past and here you can click on the test and you can see the all the steps which this particular test case has and our test is getting passed also right so this is how you can record the playright automation test and also you can generate the playright test report in this playr tutorial we are going to see record at cursor future so what does this means right say for example we have the automation test already return and you want to add some validation in between the test and that code can be generated by using the playright recorded cursor feature so let me go to the web page uh this particular scenario what we have recorded in the previous playrate tutorial so we nav navigated to this particular URL and then we clicked on the signin link and here we have entered some data over here and and then we are click clicking on the signin button right so here if you want to perform some other actions for example in our case what we are going to do is so we will verify this particular button is displayed or not and then we are going to click on this particular button so visibility of this but button we we haven't checked it or we haven't written that particular set of code right so we will insert this particular visibility of this particular signin button code in the already existing play automation test right so let's navigate to the vs code now and here I will go to the file so already just now I have tried it so let me delete this particular file so what I'm doing is simply I will copy the record test doc. JS file and I will paste it inside the tests folder then I will rename the file name as recorded cursor test dopc dogs so that's it guys so if you look at this particular code also automation test in the line number four we are navigating to to the navigating to the URL we are clicking on the link and we are entering the username and then password here in the line number nine and after the line number nine so directly we are clicking on the sign in button right here if you look at the line number 10 so we are clicking on the signin button directly so what we are do we are going to do is by using the record at cursor future by using that feature we are going to insert the code after the line number nine so we will check the visibility of this signin button so in the realtime project you can insert your number you might be having a scenarios where you want to uh add a specific scenario code or where you want to generate set of codes also so in my case I'm generating only one line of code after the line number nine here so what you need to do is simply you can go to the testing grid and here you can come down and on the left side down you can see the multiple Futures are here and you need to check the show browser check box and you need to click on the recorded cursor and if you see here so it will brings up the browser code gen and here we have to enter the URL so let's enter the URL so before you enter the URL what you need to do is simply you need to stop the recording so you need to click on this particular record so recording will be disabled and here I'm entering the URL so it is all about what does the record at cursor means says that inserting the set of lines or set of code generation will be done in between the automation test at a nutshell so we navigated to this URL and click on sign in so let's enter some data over here and then that's it guys now what you need to do is again you can go back to the vs code and now once again click on the recorded cursor so I will open the same browser where we have navigated by using the GitHub page and if you see here on the top side so we got the set of features enabled by the playright so I will go to the vs code and if you see here so I will place my cursor after the line number nine because we want to validate this particular sign in button is visible or not so I want to insert the visibility of the element code after the line number n so that's the reason my cursor cursor is here in the line number 10 now now I will come back to the browser and here so I will select the assert visibility option then we need to click on the element so which element you want to check the visibility so in our case we want to verify the visibility of the signin button click on sign in and I will come back to the vs code and if you see here in the line number 10 the code is got generated if you see here so after the element at the end you can see that to be visible if it is visible then only it is going to click on that particular signin button right so this is it guys so you can generate n number of lines code by using the playright record at cursor future then simply I will close the browser that's it guys now let's run this particular test so I will go back to the recorded cursor test. speec file and here I will click on run test and it should work fine as of now because all the code is working fine in in our case because we do not have the codee which is actually breaking the things that's it guys if you look at here so our test is getting passed here you can see that check mark and also here also you can see that one test is passed so let me close it once again and also we can run it once again and see the test results so results will be very stable because the functionality is working fine here and also the web page is constant and if you see the output over here so our test is getting passed right now what I will do is so here I will pass the incorrect roll data for example I will pass something else and this time what it does is in the line number 10 it is unable to identify the element so this element is not visible over here so let's say here instead of sign in I will pass the some other data right so signin button will be not visible and our test will get failed so let's see the output of the automation test and if you see here so our our test is still running and also you can see the so our test is getting failed in the line number 10 right it is not able to locate that particular element so let me rerun it once again so it has executed in the open browser because we have checked the show browser option so now I have closed the closed the browser let's run it once again and it will get failed in the line number 10 because element is not visible then it will not click on the signin button so it has opened the URL and it performed all the actions and it will be not able to locate the locate the particular element that is a signin button right so this is this is the expected failure right and this is how you can use the recorded cursor feature by the playright automation tool in this playright tutorial we are going to see very commonly used terminologies in playright automation test so these are the five keywords which we will be using while writing the play rate automation test the very first one is require second one is a sync keyword third one is await and fourth one is Page and the last one is expect so let's look at each keyword what exactly that does in the playright automation tool so the very first one is require so we will use the requir to include the playright model in the current JavaScript Javascript file or to use the playright model in the current Javascript file so that's the reason we are using the required keyword to include the playrite model in the current Javascript file and the second and third keyword is is async and await so async is a function and AIT is a keyword and that will be written inside the O sync function only so we can write async sorry await keywords or await keywords with the Expressions so we can write zero or more await Expressions within the a sync function and whenever each time a sync function is called so it returns you the new promise value which will be resolved with the value return by the assing function or it can be rejected with the exception so basically it is a similar to the try and catch block guys so whenever a sying function is called so it gets the promise value or it can get the any exception that is the rejected value at high level so let's look at the another keyword page so it is a browser context object by using this context object we can open the any URL and also we can interact with browser so we can perform the actions on the web browser elements and the last keyword is expect so it is a library for JavaScript and typescript so it is in int intended for using the with the test Runner called just or the play right test so basically we are using a expect keyword to write the better assertions for entn testing and as well as the component testing so assertions we are using to validate whether element is displayed or any web element contains the text value or any web element contains the specific test so those kind of validations can be written by using the expect keyword so these are the very commonly used ter terminologies in the playright automation test in this playright tutorial we are going to see how to write first playright automation test and also we are going to see pick locator in playright so why we are using pick locator is to identify the web page element locator value so by using that we can write the playright automation test so let's look at the manual scenario first and then we will automate the manual scenario by using the playright automation testing tool so here I will navigate to the first youtube.com and then in the search text box I will enter the Cypress by testers talk then I will click click on the search icon and then here we are going to click on the Cypress by tester stock playlist so here we are going to validate the this web page tab title so if you see the tab title so it is a video description followed by The Hyphen and YouTube so we will validate the title of this web page now let's navigate to the vs code so here let's create the quickly one GS file so under the tests folder and I'm adding the one spec file first test do speec dot JS that's it guys so here let's list down all the steps what we are going to do it the very first step is we need to include playright module and then second step is we need to write a test then inside the test so we are going to firstly navigate to the URL so that's the reason here I'll write go to URL and followed by that so we need to search with keywords so firstly we are navigating to the youtube.com then we will search with the keywords and after that we are going to click on the playlist click on playlist and finally we are validating the title that's it guys so these are the steps what we are going to implement automation code by using the playright automation tool so let's include the playright model first so here we have to write the required keyword and inside this we need to pass the at theate SL test so that's it so we have to assign back to the constant variable so that's the reason here I'm writing constant and here we have to assign back to the object and the very first variable name I'm giving is test and followed by the expect so we are using a test to create the test cases and expect we are using to validate or to the web element or any text so that's it guys so this is how you can include the playright model and then so let's start implementing the test as well so we have to use this particular test object so here I'm using test followed by that we have to add the test name so here I'm adding the test name as validate YouTube title that's it and then here we have to use the another function called a sync and here I will add the arrow function and followed by this I will open and close the curly braces so firstly I I need to navigate to this particular URL right so simply I will put inside this test now so firstly we need to navigate to the URL so if I need to navigate to the URL we have to use the page object so that page object can be we can get it from the a sync method so here we need to add the page so by using this page object we can interact with the browser so let's use the page and firstly you need to use the keyword called await and followed by the page dot to go to the URL simply you need to say go to method and inside this we can add the URL so here we have to provide the URL now I will go to the browser and I will copy the this particular URL and I will add it inside the go to function that that's it guys now we need to identify the this particular search text box by using the pick locator right now what I will do is I will go to the testing here and here if you see the one option called pick locator click on pick locator and here let's add the URL first so it has opened a browser where you can navigate in the web page so firstly we have to nav we have to find the search text box so simply you need to click on the search text box and you need to come back to the vs code if you see here to accept this particular locator simply you need to if you want to copy this particular locator you need to press the enter to cancel you need to press the Escape so I'm pressing the enter so we have copied the locator now so here I'm using the await keyword so if you do not have any idea about the require a sync await and expect so if you do not know about these keywords you can refer the previous tutorial of this playright full course so here I'm using the playright sorry page followed by Dot and simply I will paste the locator value and then so firstly I will click on the search text box and followed by that once I clicked on the search text box then I will enter the search keyword so here I'll call to the one method called fill so this will enters the data in the search text box so here I'm writing Cypress by testers talk that's it so we are done with performing actions on the search text box now we have to click on the this particular search icon as well right so here I will go to the vs code again and I will click on pick locator then I will go back to the browser and simply I will select the web element and I will come back to the vs code and if you see here so we got the element simply press the enter we have copied the locator now so firstly I will check whether that particular search icon is displayed or not so that's the reason I'm using the one keyword called expect by using this we can validate whether element is displayed or not or whether element is enabled or not so that's the reason here I'm adding the locator so inside the expect simply we are adding the locator here and followed by that we can call to the one function called to be enabled that's it so if element is enabled then click on that particular search icon so simply I'll copy this whole line and then I will remove the expect so expect keyword is used to to assert the element or text from the web page so here I'm simply calling the click method so we are going to click on the search icon that's it guys now we need to click on the once we click on the search icon so we will get the search results and once we got the search result here so let's add the Cypress by tester stock and once we click on this search icon we will get the search results and here we have to click on this particular particular playlist right so let's identify this playlist so I will go to the vs code and I will click on pick locator so let's identify the playlist and here I will copy the locator and then I will use the await followed by Page object dot so here I will pass the locator then we have to perform the click operation that's it so we are clicking on the playlist once we click on the playlist so before we click on the playlist so let's wait for some time so this weight is not required guys so simply for demo purpose I'm writing it page dot so wait for timeout so here I'm putting an explicit weight as 5,000 milliseconds that means 5 seconds then once we click on the playlist we have to validate the title to validate the title so we have to use the await keyword and followed by that we can use the page sorry so we can use the expect keyword because here we are validating the something from the web page so that's the reason we have to use the expect keyword and inside this we have to pass the page object and if I call here one method called to have title so here I'm calling one method called to have title so this will gets the title from the web page so here we have to add the expected title right so as I said so this particular web page title is combination of video description and followed by hyon and YouTube so simply I will copy this text so right now we are adding the expected test text text in the automation test and followed by this we have the hyphen and Then followed by that we have the YouTube that's it guys so we are done with creating the end to end test so let me summarize once again what we have done firstly we have included playright module and we started writing the test and followed by that firstly we are going to the URL and we are searching with the keywords then we are clicking on the playlist and finally we are validating the title of the web page so let now let's run the test so here I'll click on run test so it has opened browser then it is entering the URL so it will perform the actions very quickly and it is searching with the keywords and it is going to click on the playlist as well and also it is validated the title of the web page and also here you can see the check mark and our test is getting passed right so in the line number 22 let's say for example if I edit something or if I delete something over here so now this time what happens actual value from the web page and the expected value so these two two values will be not matching and our test will get filled and also we will check the report so I will run the test once again and if you look at here so our test is getting failed in the line number 22 so this is the expected failure right now let's go to the reports and in the reports also we should be able to see that this particular test results and the status of this test should be failed with the comparing the both the values and if you see here so this is the expected string and this is the received string from the web page right so this is the expected output so if I just modif modify the expected value over here and if I run the test and this time our test will work fine and also we can see the output in the play right test report so if you see here so our test is getting passed right so same should be reflected in the our test report as well so if you see here so our test is getting passed there are zero failures right and you can see the all the steps also so everything is getting passed so this is how you can create the very first playright automation test by using the pick locator in this play tutorial we are going to see how to install play right using command prompt so you need to follow the very simple two steps and then you will have the playright installed in your machine the very first step is so you need to enter the command called npm followed by init play right at the test and after entering this particular command in a command prompt and in the step two you need to select the playright configurations and then you will have to wait for some time and playright will be installed in your machine so let's do this in the command prompt now so I will navigate to the one of the folder here so I have created a one empty folder here playright tutorial full course 2 so I will go inside this and then I will open the command prompt and here we have to type the npm followed by init then play right at theate latest so that's it so this particular command we are using using to install the playright in the system so here we have to select the so after entering this particular command we have to select the play rate configurations so here it is asking us whether you need the typescript or JavaScript so in our case we will select the JavaScript and here again it is asking the second configuration so where to put the end to end tests so I will say test test only and then you want to add the GitHub actions workflow so I will say false I don't required right right now and then so it is asking you want to install the playrate browsers so here it is a true that means I want to install it and it will start installing all the configurations and playright module as well so it will will take few seconds to install the play right so right now it is downloading the browsers and if you look at here so here you see the success and it has created a play right test project at this particular location so let's navigate to the location so if you see here so playright we have installed in our system so let's open this particular folder from the vs code and we will see whether we have installed the play right properly or not so we will run the one simple example test from the playright framework so I will go to the file and I will select open folder so this is where we have installed installed the play right so I will select the folder which where we have installed the playright framework so this will have the example test under the tests folder so simply I will open the example. spec. JS file and I will click on the Run button so if play right is installed properly in your system so automatically it will start executing the this particular test so if you look at here so our test is running perfectly fine and also here you can see the check mark so that means play rate has installed all the things properly in your system so this is how you can inst install the playright in your system by using the command prompt in this playr tutorial we are going to see how to run playr test in headless mode and also we will see how to open the playr test report from the terminal and as well as the command PR so let's run the play test from the terminal first and later we will run run the test from the command prompt so here I will navigate to the vs code and here you need to click on the terminal and you need to use the command called npx followed by play right and followed by that simply you need to type the test that's it so by default it will run all the test which are present inside the tests folder so I will hit the enter now this particular example dopc dogs file has the two tests and basically by default play right runs all your automation test in the all three different browsers one is chromium second one is Firefox and third one is webkit now it is running our automation test in the Headless mode so that's the reason you are not seeing any UI so it will take couple of seconds and it will finish as the execution if you look at here so total six total six test were there because right now we are having two test two into three browsers so it will be total six test and all the six test are tests are getting passed over here right so this is the total time taken to execute the all the six test so we can open the playrate test report by using the very simple command called npx followed by playright and followed by show hyphen report so simply we have to enter this particular command so here I'm executing the same command now automatically it opens up the HTML report if you see here the title is play right test report and also here you can see so we have executed only two test and those two tests tests are got executed on different browser if you look at here so firstly it has executed these two test on the chromium and same tests are executed on the Firefox browser and if you see here in the last section so same two test cases are executed on the web kit browser right and also you can see here all the test test cases are passed here and also here you can see the total count also in the pass section and also here you can see that total time taken and also based on the test also you can see that how long that particular test run particular test ran on chromium or Firefox and also you can compare the web kit also so on the webkit this particular test has title took the very less time and then followed by that you can see that on chromium it has took the 4.1 and on the Firefox it has took the almost 13 seconds so this is how you can run the play test from the terminal now we can go to the command prompt here also we can use the same command npx followed by play right and followed by test so this command will run your play right automation test in the Headless mode so if you look at here so it is running six test in a three browsers so we have two test and we have the three browsers so so it will take some time to execute the two test cases in all the three browsers so let's wait for some time so this is a test case now it is getting executed has title and then and the F and the browser is Firefox right now and also it will run our test on the webkit browser as well finally so we have observed our report also so it is taking more time on the Firefox browser while executing the automation test so command is very simple guys so simply you need to use npx followed by playright and followed by test so it will execute all the test cases or automation tests which are present inside the tests folder so still execution is going on so let's wait for some more time so now if you see here so at last our tests are running in the webkit browser and if you see here so all the six tests are passing here right so let's open the report simply we have to use the same command npx followed Follow by playright and followed by show hyph report now we should be able to run the report properly and also we should be able to see it if it's here and our report is open properly and also you can see the total test count is six because we have two test cases and into three browsers it will be six number it will be six count so firstly it has executed on the Chromium browser and then Firefox browser and finally it has executed playrate test on the webkit browser so this is how you can run the playright test in headless mode and also you can open the report from the terminal or command prompt in the previous playrate tutorial I have discussed about how to run playrate test in headless mode in this playrate tutorial I'm going to discuss about how to run playright test in UI mode from the command prompt so you can use the same command in the terminal terminal also so that will also work fine so you can use this particular command in the terminal or you can use the same command in the command promt also so simply so let me give you a brief idea like what we are going to do right now so we have created this particular project so we have installed a playright in the previous tutorials and we are going to run the example. spc. JS file so it has two automation test one is has title and second one is get started link and whenever I execute a command so these two automation test will be getting executed on the three different browsers one is chromium second one is Firefox and third one is webkit so I'm going to the command prompt now now we will see how to execute Play Right test in the headed mode so simply you need to enter npx followed by play rate and followed by that test and then you need to type to hyphen and then headed so in the previous tutorial we were running our automation test in the Headless mode so we were entering the command npx followed by play rate and followed by test that's it so if you are adding hyphen hyphen headed that means your automation test will run in the headed mode so now this time you will be able to see the UI so where exactly the tests will be running and you will be able to see the what are the actions are performing in the web page by the automation test test so firstly it is running the Chrome browser chromium automation test and if you see here so two tests got executed so two tests are running parallell if you see the this particular output over here so it is using the two workers so that's the reason every time it is triggering the two automation test so Firefox execution is completed now it will execute the two test in the web kit browser also right so it is done now let's wait for the output now and if you see here the output also so because of some reason one test got failed in the Firefox and rest of the five tests are getting passed and also you can see the report got generated and also also it has opened automatically and total we have the six test and five tests are getting passed and one is getting failed right now let's re-trigger the execution so here I'll press contrl C and this time our test should work fine so I'm closing this particular report now so it has started already executing the automation test on the chromium and then so it will start executing the playright test in the Firefox browser so this is a Firefox browser test now over test r on the webkit browser and if you see here so we had a six test and all are getting passed so let's run the report so let's open the report by using the npx play right show hyphen report so this time all the tests will be passed if you see here so all the tests are getting passed there are zero failures and uh you can use the same command by using this you can run the playright automation test in the headed mode so you can try to run same command in the this particular terminal and if you face any difficulties in doing it you can comment in the comment section so this how you can run the play test in the headed mode or a UI mode in this playright tutorial we will see how to run specific playright spec file so here I will navigate to the vs code and under the tests folder we have only one spec file so simply I will copy this spec file and I will create the another spec file so here I will rename the this particular file with so here I'll say demo Dot spec do JS so that's it so I will keep only one test inside the demo do spec. JS file and I will rename the test name with demo 1 2 3 so that's it guys right now we are having two spec files inside the tests folder right now here I will go to the terminal so you can go to the command prompt or terminal that is fine so you can use the same command so now I will try to execute the only demo do spec. JS file so simply you need to write npx so simply you need to write npx followed by play right and followed by test and hyphen hyen headed so we want to run our test in the headed mode so that's the reason I'm adding the hyph iph headed and here we have to specify the spec file name so in our case we want to run only demo dopc dot JS file so that's it so it will start running the our test in the different browsers so firstly it has executed our test in the chromium and then and if you look at this particular output also so all the tests are getting failed so let's see what what is the issue here so if you see here so it is able to it is not able to load the URL so in my case internet got disconnect connect sorry guys in my case internet got disconnected that's the reason it is not able to load the URL so let me reconnect the internet so just give me a few seconds guys I will connect the internet back and then our test will be working fine so let me close all the report and I will go back to the vs code now here I'll press contrl C that's it so now I will execute same command once again so npx followed by playright test hyphen hyphen headed and we have given the specific spec file name so if you look at here so firstly our test is ran on the chromium and then Firefox browser then finally it is running on the webkit browser and here you can see the results also so our three tests are running perfectly fine and also we can open the report so we had only one test inside the demo. speec file and test name what we have given is demo 123 and the same test is executed in different browsers so that's the reason we are having the three test in the similar way we can run the another file also so let's try to run the example. spc. JSL this time so let me close the reporting part so here I will give the spec file name example dopc dot JS so I have given the npx followed by playright test followed by hyphen hyph headed Then followed by spec file name so this is how you can execute the any playright specific spec file so now this time we have two test cases inside the example spec file so that's a reason we will have the total six tests and it will execute the all the two test cases in the different three browsers so execution is going on currently and finally it will execute the playr test in the web kit browser also so parallel execution is going on if you see here and all the six tests are running perfectly fine and also you can open this particular report and you can verify it so these commands can be used in the command prompt also you can try it and let me know if you are having any issues you can comment in the comment section so this is how you can execute the playright specific spec file in this playr tutorial we are going to discuss about how to run playr test on different browsers using the commands so let's navigate to the vs code now so if you look at the tests folder we have to spec file and I will navigate to the testing so under the tests folder we have two spec file under the demo spec file we have one test under the example spec file we have two test cases so right now we are having total three automation test so I will go back to the Explorer and I will open the terminal you can use the terminal or you can use the command prompt also so now let's try to execute the all these three automation test on the chromium you can try to execute on the different browsers it can be Microsoft edge browser or it can be Google Chrome browser also and also you can try to execute on the Firefox webkit browsers also so so right now I'm executing our automation test on the chromium so here I'm writing one command called npx play right followed by that test and here we have to specify Hy Hy project project equal to chromium that's it guys so if I add chromium then it will run our automation test on the Chromium browser and if I add webkit it will execute our automation test on the webkit browsers so firstly it has opened so because already par mode is on so that's the reason it will trigger the multiple test cases at the same time and if you see here output so we had three automation test and all are getting passed right so we have executed our test on the Chromium browser right now and in the similar way even we can open the report so let's open the report and we will validate the browser name also on the report then we will come back and we will execute our automation test on the webkit browser also if you see here so total automation test is three and all are getting passed and here you can see the two spec file under demo spec file we have one test and that is getting passed under example spec file we have two test and that those are getting passed and here you can see the which browser also right now I will come back to the vs code so simply I will quit this reporting and I will close the play right test report now this time I will trigger the our play right test on the webkit browser so I will remove chromium and here I'll type webkit now this time our test will run on the web kit browser so you can see that so all the tests are getting executed so all the tests tests are working fine and let's view the report so by using the command called npx playright show hyph report so this will opens up the HTML play right test report so firstly you can see the project so our test tests are executed on the C sorry webkit browser and here you can see the two spec file and three automation tests and also those are getting passed here so this is how you can execute Play Right test on the different browsers in this playrate tutorial we are going to see how to record play right automation test using Code gen using the command prompt or terminal so let's navigate to the vs code now so simply we here we have to enter the one command called npx followed by playright and followed by Coden so here I have opened a fresh terminal so here we have to use npx followed by play right and code so if I hit enter after entering this particular command so this will opens up two windows one is browser and second one is playright inspector so let's hit the enter so let's wait for a few seconds so you will get the if you see here so it has opened the play right inspector and it has the sample test and also it has opened the browser also so let me give you a overview on manual scenario then we will record that manual scenario by using the playright automation tool so firstly we will navigate to the youtube.com and then we will search with API testing by tester stock then once we got the results we are going to click on the playlist called API testing by tester stock then we will validate the title of the playlist so here I will enter the first URL here I'll say youtube.com and then in the search text box we are going to enter API testing by tester stop and then so we have to click on the this particular search icon so before we click on this particular search icon we will verify whether this search icon is displayed or not so by using the assert visibility so simply I will select the that particular element after clicking on the assert visibility and if I open the playright inspector so here you can see the code got generated so firstly it has navigated to the youtube.com then it is entering the search text box and after that it is going to verify the visibility of the search icon now I will come back here so we have to click on the search icon let's click on the search icon and once we got the results here in the result page we need to click on the API testing by tester stock playlist so let's click on that particular playlist and also we can validate the same code is generated or not in the play right inspector also here you can see that line number eight is line number eight is generated for the action which we have done on the playlist so that's it guys once we navigate to the playlist so here we are verifying the title of this particular playlist so I will verify it by using the assert text so first you need to click on the assert text and followed by the L payment that's it guys so if I go to the playright inspector and here you can see that all the code got generated over here right so simply I will copy this particular test and I will go back to the our vs code so under the tests folder so I'm creating a one spec spec file so here I'll say record and play test dopc do JS and I will paste the code whatever I have copied it from the playright inspector so here what I'm doing is before we enter anything in the search text box right in the line number five so simply I'm taking this particular locator and before we enter anything in the search text box so we want to click on that particular search text box so that's it guys and after that what I'm doing is so here I see that in the line number 10 some dumy code got generated that's the line number 10 simply I will delete this and what I will do is in the line number 10 so I'm putting some manual weight so that we can see the execution properly so that's the reason here I'm using page dot sorry await followed by Page dot wait for timeout so here we have to pass the milliseconds so here I'm passing 5,000 milliseconds that is nothing but the 5 Seconds that's it guys and also I will Val I will rename the test name as record and play test and I will close the browser which has open by the Coden and if I close the browser and automatically playright inspector will be also closed so now the test is ready and let's run the test so it should Open the youtube.com then it should search with API testing by tester stock and it should navigate to the playlist and it has it has to verify the text of the playlist so it is taking bit of time I think it is got failed so let's see what is the reason behind this so it is failing in the line number nine right so we'll come back here and let's see the code little bit so in the line number five and six we are entering the search text box then we are going to click on the search icon in the line number seven and eight and after that we are going to get the playlist and we need to click on the that particular playlist and at the end we are verifying the text of the playlist that's it guys so what I will do is so simply I will put the some weight after going to the P sorry youtube.com so simply I will copy the line number 10 and I'll paste it here then I will re rerun this particular playright test so let's see this time it should work fine so it has opened the browser now so sometimes if my internet is uh slow because of that also it might get fail so that could be the one of the reason so again it is coming here and it is getting failed so let me verify it once again what we are doing so let me put another weit after the line number 7 because YouTube is a heavy loaded application that's the reason it might be taking little bit little bit of time so that's the reason I want to put a little bit of weight so that our test will run perfectly fine so I'm rerunning the test once again so if you see here it is loading very slowly youtube.com and it has clicked on the search icon and it got the results and also it is clicking on the playlist and it should verify the text also so let me check like what is the issue here so it is saying that test is finished because of the because our test should get execute within the 30 seconds so that's the reason so this configuration is done in the playright configuration so now let's rerun the test because this time everything is working fine and let me remove a little bit of so let me close this run and I will put the less weight here I will say 3,000 that means 3 seconds so I will put 2,000 here so now let's rerun the test now so because YouTube is heavy loaded application and it needs a little bit of faster internet so that is the main reason behind the failures now it should search with search with the Search keywords and it should navigate to the results and playlist and it should verify the title of the playlist right and if you see here our test is getting passed right so I didn't do much modifications here and also here you can see that our test test is getting passed so this is how you can use the Cod gen for recording the playrate test hi friends this is bakaa in this chapter two of play rate full course we are going to see water locators different types of locators and then next we will see how to capture element screenshot how to take the web page screenshot and also we will see how to take the full page screenshot and next we are going to see how to implement Hooks and how to write the precond conditions and how to write the post conditions by using the hooks next we are going to see how to add a screenshot into play right test report when test got failed and then we will see how to select the drop down list value and how to validate the drop down value and then we will see how to work with if frames and then next we are going to discuss how to select the dates so it can be today's date or any customized date then next we are going to see how to perform the mouse actions keyboard actions and how to drag and drop the element using playright and next we are going to see assertions so we will be discussing about the hard assertion and soft assertion questions in play right then next we are going to see what is watch mode and how to enable the watch mode to write the playright automation test and then finally we are going to see how to enable the traces so that we can attach traces information into the playright test report in this play tutorial we are going to discuss about locators in playright so there are multiple ways of identifying the web element by using the playright so let's see one by one the very first one is by role we can identify the web page element so this is an example here you can see that await keyword followed by Page dot get by rooll so here I have added link so this can be checkbox or even it can be the button also and also we have to specify the respective value over here so this is the name is the constant field so which we have to add it and after that we can perform the respective actions so it can be click on the checkbox or button and uh we can use the fill also to enter some data into the text box if it is a text box and second one is by label we can identify the web page element the example is very much similar to the above example and in this case we are using the label value that means the ever you see the tag is having a multiple attributes So within that attributes if you are able to find the area label you can pass that particular value over here and then you can pass the whether you need a partial match or the exact match if you want a exact match you need to pass the two here and then you can perform the respective action it can be click or fill the value into the text box and third one is by using the alt text so here also example is very much same so here you can use the await keyword followed by Page dot get by Alt text so here so wherever you are seeing the alt attribute then that has the text so that text can be passed over here and then you can perform the action actions whatever it is it can be click or you can enter the some data into the text field and next one is by using the test ID for example so by using the test ID also we can identify the web page element so this is a very custom attribute this attribute name will be configured in the playright configuration file so it is very simple guys so this particular attribute name will be configured in the configuration file and then simply you need to pass the respective value over here so this particular configuration will be done only to the field which is very common across the whole project only then you can perform the respective actions and the next one is by using the text you can identify the web page element so if you're using directly by text and if you're not specifying the exact colon true that means that is a partial match and it will perform the actions on the web page element and if you're if you're adding the exact colon true so this is the complete match with the text what you are adding inside the get by text method and coming to the next way of identifying the web page element is by using the title so wherever you are seeing the tag is having the title attribute simply you can pass the title value over here and so this is a method what we will we will be using to identify the element by using the get by title so title attribute value we have to pass onto this particular function then we can perform the respective actions and the seventh locator type is xath so in this case so if you see the this particular example right so there's await and followed by the page do locator so previously we were using the get by title get by text or get by role or get by test ID but in this case when we are using the xath so we are using only locator so here we have to add the within a double quot or a single quotes we have to specify the xath here so this xath can be added or it can be ignore also so directly you can specify the xath value also so that is also accepted in the play right and similarly we have the CSS selector so we can write the CSS selector and that can be used as the locator to perform the actions th example is very much similar to the xath only so we have to use AIT followed by Page page. locator and here we have to pass the CSS so if you're passing CSS equal to R simply you can directly pass the one the directly CSS selector also so so this is not this is an optional value what you can pass onto the CSS selector and also to the xath where you are passing the xath equal to so this is not the mandatory value we need to write into the locator method and coming to the last one by placeholder we can identify the web page element so wherever you are having the placeholder attribute so that value can be passed on to the page dot by placeholder and here once you add the placeholder attribute value over here and you can perform the respective actions so let's see all these examples with respect to the real time web applications let's see the very first example that is by using the role how you can identify the element and uh how you can perform the actions on the web page element so let's quickly create the one JS file inside the tests folder so here I'll say locators dopc do JS so that's it I will go to the first test dot spec. GS file simply I'll copy this test and I will keep only the skeleton of the test then I will delete the rest of of the details and here I will modify the test name so here I'll say locators test that's it so we are using await page. go to to navigate to the URL so I will remove this URL and we will use the new URL so here I'll say firstly by rooll so by role we are going to identify the the element and then we will perform the actions on that particular element so firstly here I'm am navigating to the google.com and searching with Cypress by testers talk and that's it guys so simply I will take this particular URL so this is the URL for us and if you see the video images shopping news so these are the links here so let's click on this particular videos or images or shopping shopping sorry so if I inspect this particular videos right so this is the link guys so you can take an example of any button or checkbox also it will work fine so I'm showing an example with respect to the link how you can use the link to identify the element by using the role so if you see here so this is the anchor tag that means it is a link right so simply I will copy this particular URL and then we will click on the this particular videos very first time then we will click on the images so here I'm navigating to this particular URL by using the page. go to method and after that so here I'm using the await followed by Page dot get by roll so here we have to pass the firstly here we have to say whether it is a link or checkbox or button or yeah so these are the few values or a combo box also if you see here so here you can see that some of the examples also so right now we are adding only link here you can see that combo box checkbox and there are many other inbuilt value can be passed over here to the get by role so firstly I'm passing the link and followed by that we have to pass the the object so that is the name colon and in the single quotation we have to add the videos right now I want to click on this particular videos this is the link and then later we will click on the images as well so that's it guys then I will perform the action as click so let's wait for some time so after clicking on the videos so here I will use the await followed by Page dot wait for timeout so here I will pass around 7,000 milliseconds that means 7 Seconds that's it guys now let's run this particular test and we should be able to click on the videos and I will come back and I will show you what are the different ways of using the get by role and if you see here so it it has already click clicked on the videos link and already it is closed the browser and also our test is getting passed now let's pass the images now and this time it should click on the images and if you see here it has clicked on the images also right so this is how you can use the get by role locator and if I who my mouse on the get by ro so here you can see the possible examples also so get by ro can be used by using the you can pass the heading checkbox button also you can pass even the link also so these are the couple of examples to identify the element by using the get by ro now let's identify the element by using the area label so here I'll say label that's it guys so what I will do right in this example let me comment out this part let me take this particular first line we will navigate to the one of the URL firstly so we will navigate to the Google google.com and here if I inspect this particular search text box so which is the text area tag and inside this we have the one attribute called area label so if you see here so area lab area area label is equal to search so we will pass this particular search value inside the get by label function so I will go back to the vs code and here I will add the URL as google.com and then so we have to identify that element by using the get by label so here I'll say page Dot get by label so here I'll pass the search as the value and after that so here we have to pass the another object also so here we have to say exact colon true so I'm finding an element by using the area label which has the exact search as the value so that's the reason here I'm passing the true so let's enter something in that Google search text box so here I'll say API testing by tester stock that's it and once we enter value inside this text box so we will hit the enter by using the keyboard so simply I will take this particular locator and then I will call to the one method called press so inside press simply I will pass the enter so this will press presses the enter from the keyboard that's it guys so here we are using the get by label and we are passing the value of the area label attribute that's it guys so let's run this particular test so you have seen how you can use the get by ro previously and now we are going to see how we can use the get by label also so so I'm showing one way so if you see here so it has entered the text and also it has pressed the enter also we saw the results for the required Search keywords and if I Mouse who are on the get label so there are POS different ways of using the get by label also so if you see here so we have the input tag where we have the array label and respective value and second tag where it has a label as the tag name name and we have the value as a password and next tag we have the input and we have the ID and if you see here down so these are the possible ways of using the get by label and where you are passing the respective just keywords and we are performing the respective actions so this is how you can use the get by role and get by label now let's see how to use get by all text and get by test ID so here I will navigate to the web page and here so we need to navigate to the github.com /ban so you can take any web page example where you are able to find the alt as the attribute so if I inspect this particular image so we have the one attribute called alt and if you see here so we have the attribute called so we have the attribute and which has the view bapas bakap and full sized aatar right so we will use this particular value and we will identify the this particular image and we will click on this particular image by using the get by Alt text so here I will navigate to the vs code and so here I will comment out this particular part so which is not required and we are going to identify the element by using the alt text right so firstly we have to navigate to the URL so here I'll say page dot go to and here we will add the URL and after that we have to identify the element so by using the page dot so get by Alt text and inside that we have to Simply add the text so here I'll say text added or inside the all text method and after that we have to click on that particular image that's it so we have performed the click operation here so before that we have to add the URL let's copy the URL and I have added the URL that's it guys it's very simple so wherever you see the alt attribute and which has the value and you can use the get by all text so I will run the test now so it has opened the browser and it has navigated and if you see here it has clicked on the that particular image also right so it is waiting for some seconds and our test is getting passed also here you can see the check check mark also right so this is how we can use the all text now let's see how to use the get by test ID so here I'll say by test ID so here I will navigate to the GitHub dot sorry github.com followed by that so simply I will pass the login so this will navigate to the sign into to GitHub page so if I inspect this particular username text box which has the multiple attributes and respective use so here we are taking the one attribute called autoc complete so so whatever this particular way of identifying the element if you have seen right so as I said earlier also get by test ID so this particular attribute we are going to add it in the configuration file and this particular attribute should be used across the project such kind of attribute can be added in the configuration file so I will go back to the web page once again now so here I'm considering this auto complete is the attribute so which is repeating again and again in my project so I will take this particular attribute and after that I will pass only the respective value wherever I'm using the autocomplete attribute so let's add this attribute into the our configuration file so it'll say test ID attribute colon and then in the single quotation simply add the attribute name and put the common that's it so once you add this particular test ID attribute into the configuration file come back to the your test file and here so let's navigate to the URL first so here we are navigating to the GitHub do github.com /login so we will enter something in this particular particular username text field by using the autocomplete attribute value so here I will enter the URL first and then let's identify the element by using the page dot get by test ID so we have added a test ID attribute in the configuration file so that's the reason so simply I will pass the this particular respective value so wherever you see autoc complete as the attribute and respective value so you can use the get by test ID where you can simply pass the respective value so no need to worry about the attribute name then here I'll say fill so I so that I can enter something in the username so here I'll say tester stock that's it guys so we are done with adding the configuration in the playright conf configuration file and also we have return the locator for the get by test ID also so this will opens up the github.com login page that's signin page and it will add the username value in the field and then it will closes the browser so if you look at here so it has added the value which we have passed from the play right test and it is closing the browser right so we are seeing the check mark here and also here we can see the results also it's working perfectly fine now I will discuss how to use the get by text where we can pass the complete text and as well as the partial text and also we will see how to use the get by title also to identify the web page element now let's see how to use the get by text so here firstly we will navigate to the YouTube ./ testers talk so we will use this particular URL and once we come down here so we have the multiple playlist so firstly we will use the partial text by using that we will perform the action on the web element so here I will just use the Cypress by and we will click on the this particular playlist so if you see here the complete text is Cypress by tested stock but we are mentioning just Cypress SP so here I will navigate to the vs code and so here I'll say by text and after that I will use the directly a wait keyword followed by that I will use the page and then here I'll say go to inside this I will add the URL and after that we will identify the element by using the get by text so here I'll say page dot get by text so here we will add the partial text so here I'll say only Cypress by and we will click on the playlist so here will say just click operation that's it guys now let's execute the playr test and we will see the results so it has navigated to the YouTube link and it has to open the Cypress by tester stock playlist and also it has done that and our test is passing right so this is this how you can pass the partial text now this time I'm passing the complete text so here I'm saying C press by tester stock so I will run the same test once again this time also it opens the YouTube page and it goes to the Cypress by tester stock playlist and if you see here so it has clicked on the Cypress by tester stock and it is closing the browser and if you see here our test is getting passed so this is how we can use the get by text where you can pass the partial text or the complete text now let's see how to use the title so here let Say by using the title so we will navigate to the same URL so that's the reason I will copy this particular line where we are navigating to the youtube.com/ theate tester stock and if I inspect this particular playlist Cypress by tested stock so we have the attributes multiple attributes and within that you will be finding one attribute called title equal to Cypress by tester stocks so simply copy this particular value now we are going to identify the Cypress by tester stock playlist link by using the get by title so we navigate it to the YouTube link and now we have to identify the element so here I'm saying page Dot get by title and here I'm adding the value of value of the title attribute and then I'm calling to the function called click that's it guys so we are done with writing the simple one line of code so here we have we are using the get by title and we are performing The Click operation so let's run the play play right test now so it has to open the Chrome browser and it has to it has to navigate to the YouTube link and then finally it will navigate to the Cypress by tester stock playlist and finally it is our test is getting past right so this is working as expected that's it guys now let see how to use the X paath and CSS selector so we will navigate to the just youtube.com and here we are going to identify the search text box by using the xath first so here I'm using the attribute called name so which has the search uncore query as the value and firstly I will write the two for slash star and in the square brackets at the rate attribute and followed by the value we have to pass it so this is a simple x paath I'm writing it and if you see here so it is matching that it is matching with that particular search text box let's copy this particular X path so before that so let's copy the these two lines and here I'll say by xath and I will pass the youtube.com link here that's a URL and let's identify the element so here let say eight followed by Page and here I'll say get by sorry so for xath and CSS selector we have to use the locator so here simply you have to pass the EXP path equal to the x paath value we have to pass it so I will pass this particular X paath here that's it firstly I will click on that particular search text box and after that I will pass the Search keywords so firstly I'm using the click method and then next I'm using the fill method to enter the Search keywords so here I'll say JavaScript by testers top that's it guys so after entering the text in the search text box by using the same locator so I will click on I will sorry I will press the enter from the keyboard so here I'm using the one method called press and inside that I'm passing the value as enter so that will processess the enter from the keyboard so this will navigates to the youtube.com then it will enters the search keyword and it will presses the enter and it will wait for some time and it will close the browser so this time we are using the X paath to identify the web page element so as I said just before xath equal to is an optional value where you can pass it inside the locator method and if you see here so it has navigated to the search results of the YouTube page and our test is getting passed right so this time what I'm doing is simply I will remove this particular xath equal to so this is an optional value you can pass it or you can ignore it and if I run this test and it will work fine so it has entered JavaScript by test stock and it got it got the results also and it is closing the browser and our test is getting passed right in the similar way so what we will do is let's let's add the CSS selector now so for CSS selector simply we have to remove the two forward slash and star and at the rate that's it so this is our CSS selector so I will go back here and I will copy the whole thing and I will comment out these four lines and here I'll say CSS selector and here I will pass the CSS selector value that's it guys so I will copy this CSS selector value so that's it guys we are done with adding the CSS selector to identify the element by using the CSS selector now let's run the play test and next time we will pass the CSS equal to value in the locator method so this time we are passing directly CSS selector value so it has entered the JavaScript by tested stock and it got the results also and our test is perfectly working fine and here you can pass the CSS equal to so this is an optional value you can add it or you can ignore it so that's it guys so let's run the play right test now and it should work fine and if you see here we got the results also and our test is perfectly working fine and if you see here our test is getting passed and here also you can see the check mark here in this play right tutorial we are going to discuss about how to capture the screenshot in playright so we will capture the screenshot by using the playright so it can be the element screenshot it can be the page screenshot or it can be the full page screenshot we will see how to capture the all these screenshot screenshots using the playr tool so now I will navigate to the vs code and here under the tests folder I'm creating one file called screenshots dot spec. JS so that's it guys now I will go to the first test. speec file and here I will take this test and I will copy the test here so simply I will keep the only skeleton of the play right test and rest of the details I will delete it and here I will give the test name as take screenshot in playright and that's it guys now let's look at the manual manual scenario then we will come back here and we will see how to c capture the element screenshot and then we will see how to capture the page screenshot and also we'll see how to capture the full page screenshot in playright automation tool so here I will navigate to the web browser so firstly we will open the youtube.com/ theate tester stock so here we have a one element called Channel header if I inspect this particular Channel header so we are going to identify this channel header and we are going to capture the element screenshot so you can identify any element in the web page and you can try to capture the screenshot so if I inspect this particular Channel header and if you see here so this particular D tag has the ID so I'll copy this particular ID and here I'm just using the hash followed by the ID value so here I have written a simple CSS selector and by using this we can identify the element and then we can see how to capture the screenshot in playright so let's navigate to this URL first and I'll copy this URL and I will enter the URL here so that's it guys now we have to identify the channel header element first so here I'm using await keyword followed by Page dot so here I'll say locator and inside the locator function I will pass the CSS selector value that's it once we pass the CSS selector value over there and simply you need to call the one function called screenshot so here we have to pass the one object that is the location of the file so let's create a one folder inside our project so here I'm creating one folder called screenshots so we will keep all the screenshots inside the screenshots folder so firstly we will keep the element screenshot inside the screenshots folder so here we have to specify the path so here I'm saying path colon in the single quotation so I'm adding dot slash and the folder name screenshots and followed by that we have to specify the screenshot name so here I'll say element do PNG so that's it guys so firstly we have identified the element by using the CSS selector and here we are adding the location where we want to capture the screenshot and also we are adding the screenshot name as element. PNG so that's it guys and and finally I will add some weight here by using the await followed by Page dot wait for timeout so here I'll pass 5,000 milliseconds and that's it guys under the screenshots folder right now we don't have anything so after running the this particular automation test so it is going to capture the screenshot of the web page element m m and also it will keep inside the screenshots folder that's it guys and if you see here so our test is getting passed I will go to the screenshots folder and if you see here so already it has captured the element screenshot and also it has added inside the screenshots folder so let's go to the location where exactly it has placed so simply I will open the screenshot and if you see here so play rate has captured the element screenshot right so this is how you can capture the web page element screenshot now let's see how to capture the page screenshot so it is very easy so we have to use the await keyword followed by page so I don't want to capture the particular element screenshot here so I want want to capture the current page screenshot so that's the reason directly I'm calling the screenshot method and here again we have to pass the location of the file where we want to keep the screenshot also so simply I will copy the same location and we will update the file name so here I will give the screenshot name as page.png so our screenshot name would be the page so that's it guys let's run the test now so this time playright will take the current page screenshot that's it guys and if you see here so our test is passing and if you see the screenshots folder so we have the another screenshot called page.png got added so let's go to to the location so let's open the page screenshot and if you see here so playright has captured the current page screenshot so this is how you can capture the screenshot of the element or the current page now this time we we will capture the full page screenshot so it is very much similar whatever the syntax what we have used for the capturing the screenshot of the current page and here we have to pass the another object called so that's another flag so here we have to use the full page colon and here we have to pass the true or false so here I'm passing the true as the value so that it is going to capture the full page screenshot and I will give the name of the screenshot as full page do PNG so that's it guys now I will run this particular test now this time we are going to capture the full page screenshot using play right tool and if you see here so our test is passing and you can see the test results also so our test is getting passed and if you see the screenshots folder so there is another screenshot added in the same location full page.png so let's go to the location and if I open that particular screenshot so if you see here so this is a full page screenshot So currently the page is not loaded and you can try to scroll down and you can take the full page screenshot that time the whole page will be visible properly so this is how you can capture the element screenshot page screenshot full page screenshot using playright in the next playright tutorial I will be discussing how to capture the screenshot and how to add into the report when test is failed in this play tutorial we are going to see how to take a screenshot and how to add the screenshot into the play test report when test failed so let's navigate to the vs code now so here I will open one of the spec file called first test. spc. JS file so I will simply run the this particular test so this is a currently working test so our test will pass so it will not capture the screenshot and even if it is failed also it will not capture the screenshot and add into the play right test report and we'll see how to do that so if you see our test is getting passed and if I open the HTML report so you will be not seeing any screenshot here so whenever test is getting passed or failed also so if I scroll down so there is a no screenshot and our test is getting passed so now I will make intentionally this test getting failed so I'll make this test failure so it will pass the incorrect expected value so our test will fail now because actual value and expected value is not matching so once our test got failed so this time also it is not going to capture the screenshot and if you see here so our test is getting failed where it is not able to match the actual and expected value so let's go to the report and let's refresh the report and if you see here so this is the expect Ed string and this is the actual string so it is not matching both the strings and if I scroll down you'll be not finding any screenshot here and here you can see that where exactly our test got failed also so let's see how to add the screenshot into the playr test report when test is getting failed so here I will go to the play. config.js file and under the defined config so I will come down so there is another object called use inside this we have to add the one flag called screenshot colon and here we have to pass the value as only on failure that's it guys so this is the very simple configuration you need to do it in the playright config file now I will go back to the our vs vs C test here that's the first test. spec file and and I will rerun the test so this time our playright will capture the screenshot and also it will add the screenshot into the play right test report whenever the test is getting failed and if you see here our test is getting failed I will go to the report again then I will ref refesh the page so our test is getting failed so because of expected string and received strings are not matching and if I scroll down here you can see the step and also you can if I if I scroll down a little bit down so here you will be seeing the screenshot section under the screenshots you'll be finding the screenshot where exactly play test is getting failed so this is how you can capture the screenshot and this is how you can add the screenshot into the playright test report in this playr tutorial we are going to see what are Hooks and how to implement hooks in the play right framework so let's understand what are hooks so hooks are nothing but the block of code and that will be getting executed before executing your tests or after executing the your tests so these are the four hooks we have in the play right tool the very first one is before each second one is before all third one one is after each and fourth one is after all so let's understand what exactly each hooks does we have the before each so that name itself says that this particular block of code will be executing before each test and coming to the next one before all so this is a function so it will contain the block of code that block of code will be getting executed before executing all your tests and coming to the third one and fourth one so these two are exactly opposite to the before each and before all so after each is nothing but so this block of code will be executed after executing the each test and coming to the final one after all so this is a function it contains the block of code and that will be getting executed after complete in the all the test execution so let's see how to implement books in the playright so I will navigate to the vs code now so here I'm creating a one spec file inside the tests folder hooks dopc do JS that's it guys so I will go to the one of the spec file called first test. spc. JS file and I will copy the all the code from the this particular spec file and I will come inside the hooks dopc dogs file so here I have copied the first test spec. JS file test into the hooks do spec. JS file so let me explain what exactly this test is doing and we will update the test name later so firstly we are navigating to the YouTube youtube.com then we are searching with Cypress by test stock so that means we are entering this particular text in the search text box then we are clicking on the search icon and once we got the results we are clicking on the playlist and there then we are validating the title of the web page so that's it guys at high level so here I will rename the test name as hooks in play right so that's it guys so if you see here if if I'm having right now I'm having only one test and if I need to write the 10 automation test like this so I need to use the await followed by the page. go to so this precondition is required for each and every test case that means launching the browser and entering this particular URL so I don't want to write it in the all the 10 automation test so I want to keep it in only in single place so that will be used across the all the test so that's the reason what I'm doing is simply I will cut this particular part and I will place it inside the one hook called before each so let's implement the before each now so here I'm using the test object and here I will add the test dot before each so here we have to say which hook we are using then here I'm adding the name of this function as run before each test that's it and followed by this I'm using the async async function so here I'm adding the page object and followed by that so I'm using the arrow function that's it guys so simply I will paste the code which is launching the browser and and entering the URL right so now I will run the test so now this time also it should work fine so let me run the test now and if you see here it has opened the browser and also it is entering the URL and also it is navigating to the playlist and it is validating properly and if you see the test results also our test is getting passed right now so here I will add one log that's a console DOT log and here I'll add the message as running before each test that's it guys so this is how you can implement the before each test or some data you want to clean up or some data you want to create it so those kind of functionalities can be implemented inside the before H now let's let's implement the before all also so it very much similar so here is here we have to replace this before each with the before all and here I'll say before all test and I'm not doing anything inside the before all so simply I'm writing the one simple message called running before all test that's it guys say for example if you are having test data which you want to read it from the different sources it can be the CSV file Excel file Json file so that data can be loaded inside the before all hooks so if I run the test so this particular block of code will be getting executed before running any of the tests so as of now we have only one test so we will try to use the sorry guys so we should not use the page object here sorry guys so we should not use the page object inside the before all so let's remove that and let's run the test now and we will add the same test once again then we will have the two automation test so it is able to navigate to the URL and it is performing all the actions L and our test is getting fed also so I will take the same test and I will create a second test and I will remove some of the actions here so simply it will navigates to the youtube.com and it searches with the Cypress by tester stock so instead of Cypress by tester stock here I'll say API testing by test test stop this time and here I will say the test name as hooks in playright 2 so that's it guys so right now we are having to Total two test so before running this particular test so our browser should get launched and before running the second test also it should launch the browser and and it should perform all the actions so here I'm going to the testing and then I will run the hooks spec file so far we have implemented before each and before all hooks in the play right and let's quickly implement the after each and after all hooks also so firstly it is searching with the Cypress by test stock and second time so it has to search with API testing by tester stock and if you see here so it is able to search the search with the second set of search keyword and if you see here our two tests are working fine so as I said before after each and after all so those two hooks are exactly opposite to the before each and before all so here I'll say after each and I will update the description and also I will update the log also so here I'm not doing anything inside the before sorry after each hook also and here I'll say after all and same thing I will update inside the console.log so for example if you want to clean up the data or if you want to close the connection with the extern external sources so those kind of things can be written inside the after each and the after all so if I execute this particular test right so let me trigger the whole test and we will go back to the report and we will see in which order all the hooks are working and also we'll see how the tests are getting executed also so firstly it will work the before all and then before each then test then after each and after all so this is a usual order play right test will work when we are using the hooks in the play right so if you see here so all the two tests are working fine so let's go to the report and if you see here so our tests are working fine so I will go down and I will click on the STD out so if you see here so firstly it is running the before all test then before each test and after that running after each test so this is a very first test that's the reason after all test is not got executed so if I go to the test two so this is a test which got executed last and if I go to the STD out so here you will be able to see the firstly before each test then after after each test then at last it is running the after all the test right so this is how you can implement the hooks in playright in this playright tutorial we are going to see how to handle drop down list in playright there are two ways we can select the any drop- down value the first one is by using value we can select the drop down list and second one is by using visible text we can select the any drop down value so let's see the manual scenario first and then we will perform all these actions practically and at the end we are going to see how to verify the drop down value so you can verify the default value or you can verify the even selected value as well so let's look at the manual scenario first so we will navigate to the facebook.com and then we will click on the create new account and then so we will come here so we will select any value from the month drop down list and also we will validate the default value and also we will validate the any selected value after the selecting it from the drop-down list so let's navigate to the vs code now let's quickly create a script so let me close all the windows so under the tests folder so I'm creating one file called drop down list dopc dot JS so that's it so I will go to the first test. spec file simply I will copy the test here and I will come to the drop down list spec file so simply I will delete the some lines of code which are not required so here I will keep only skeleton of the play right test and here I will update the test name as handle drop down list in play right so that's it firstly we have to navigate to the one URL so here I will add the URL by using the goto method so I will navigate to the facebook.com so once we navigated once we navigate to the facebook.com so we have to ident ify the one element called create new account so I will use the visible text by using that we will identify this button and we we will click on the create new account so here I'll say get by text and I will pass the text that is the create new account then I will call the method called click so that will perform the click action so once we navigated to the popup that's the alert so here we have to identify this particular drop down list that's a month so I will inspect the month drop down list and if you see here so this particular select tag has the area label Name ID so here I will use the ID and by using the ID so simply I'll say hash and followed by the ID value so I have written a simple CSS selector and I'll copy this CSS selector and here what I will do is simply I will use the page do locator then I will add the locator here then I will assign back to the one constant variable called drop down list so that's it so by using this element I can select the any value from this particular drop down value so let's see by using the value how we can select the drop- down list so if I navigate to the Dom details of the month and if you see here so for the Jan value is one for Feb it is a two and if I scroll down for May it is five for June it is a six so let us select the m so simply I will pass the value as five and here I will use the drop down list dot select option and simply I will pass the value because I want to select the may now so that's the reason here I'm passing the F that's it and here I will provide some weight so that we can see the execution properly so here let say wait for timeout and here I'll pass 5,000 milliseconds so by default our web page is selecting the December as the month and our test will select the May so I will run the test now so it is navigating to the facebook.com and then if you see here may got selected and our test is working fine if you see here so we got the check mark and also we got the test got passed so this is how you can select the drop down value using the play right so let's try to select the June this time so I will pass the six here so if you see the Dom details so for to select June we have to pass the value as six so that's the reason I'm passing the value as six here and I will run the test and if you see here June got selected and our test is perfectly working fine right so these are the two examples what we have seen how to select a drop down using the value so this time what I will do is I will pass the visible text say for example I want to select August so simply I will pass the August here so previously we were passing the value but this time I'm passing the visible text so if I run the test so at the end of the test it will seel it it is going to select the August as the month from the drop down list and if you see here August got selected so this is how you can select the drop down value using value and visible text in playright now let's see how to verify the drop down value so for example if I after navigating to facebook.com and then once we click on create new account so default value is December for December if I inspect in the Dom so let's check the value of the December so it will be 12 right so let's in sorry let's assert this particular value whether December is getting selected or not we will verify it so here what I will do is after navigating to this particular web page then here I will assert the before selecting anything in the drop down list so I'm going to assert the December as the value so here I am using the await followed by as I said previously we have to use the expect keyword and followed by that we have to use the element and then here we have to say to have value and here we have to pass the value that's it so by default value is 12 this time so that's the reason here I'm passing 12 and if I run the test and this will work fine so basically we are checking that default drop down value is correctly displaying or not so this time our test will work fine because December is the month by default it is getting selected let's say if I pass two and this time our test will get failed so you can assert even the after selecting the any drop down value in the similar way so I have showed you how to validate the default value so default selected drop down value and if you see here so we have the assertion failure here the expected stram string is two but we have received the 12 as the string so this is the expected failure so this is how you can select drop down values in play right and also how this is how you can validate the drop- down values in this playr tutorial we are going to discuss how to handle if frames and also I am going to discuss about how to drag and drop elements in play right so let's navigate to the web browser we we will see the manual scenario first so we will navigate to jQuery ui.com dropable first then here if I if you scroll down so here we have two elements one is drag me to Target so this is a source element and drop here is a destination element so simply we can take this Source element and we can drop inside the destination element so this is the scenario overall scenario guys so I will go to the vs code let's create a play play write test now under the tests folder I'm creating iframe then drag and drop dopc do JS that's it guys then I will go to the first test spec file so here I will copy the test and I will come back to the iframe drag and drop spec file so here I will keep the only skeleton of the play test and here I will update the test name as handle I frames in playright and I'll say here drag and drop so that's it guys so firstly we have to navigate to the URL so here I'm using go to Method by using that we will open the browser and we will navigate to the this URL that's it now if I go to the web browser and Let me refresh this page so I will open the Dom details now so if you if I inspect the source element and this is a destination element below one is and if I go little bit up here so here we have the I frame first firstly we have to identify the I frame and then we have to switch to this particular I frame then we can perform actions on the elements which are there inside the I frame so let's identify the I frame now so here we are having the class equal to demo hy1 frame so I will take this particular value class value and simply I'll press Dot and the value so we are able to identify the iframe by using the CSS selector so here I will copy the CSS selector and I'll come down here I'll say firstly we will find the I frame then we will find the drag end that is the source sign destination element then finally we will perform the drag and draw of the element so that's it guys it is very simple now let's identify the iframe now so here I will use the sorry AIT sorry I will not use the AIT here so directly I will use the page dot so here I'll say frame frame locator and inside the frame locator method I will pass the frame whatever we have written the CSS selector to identify the I frame then I will assign back back to the constant variable called iframe element so that's it guys so we have identified the iframe now now we have to identify the source and destination element and once we are having source and destination element directly we can drag and drop the element into the destination side so let's identify the source element now so here I will inspect the source element so if you see here this particular D tag has the ID so that's the reason ID equal to dragable so I will simply use this ID equal to dragable and I will write the simple CSS selector and I will remove the double quotes I will put the single Cotes that's it guys so we are able to identify the source element right so it is highlighting The Source element to identify this particular drag that's a source element draggable element so this I this element is present inside the iframe so that's the reason I will use the this particular iframe element after that I'm going to use the locator method so firstly we have to switch to this particular frame by using this Frame we we are going to find the source and destination element and then we can perform the action so here I'm saying I frame element so we are using the frame then we are locating the element that is the source element so here I'm adding The Source element locator value then I'm assigning back to the constant variable called here I'll say drag element in the similar way let's identify the destination element that is a droppable element so here I'll say drop element and here we will replace the ID so I will go to the web page and if I come down here so it is highlighting the respective drop element so simply I'll take this ID of the drop element and I'll add it here that it guys so we have the I frame and we have the source sign destination elements now it is very easy we can directly drag and drop the element so we can use the weit followed by so here I'm using the drag element first and followed by that I'm calling one method called drag two and inside this we have to Simply pass the drop element that that's it guys so we are done with most of the work here so I will give some weight here so it'll say page dot wait for timeout so that's it guys now our test is ready now I will run the test now so it is very simple we have opened the URL then we have identified the frame then source and destination element ments then we are simply dragging and dropping the element if you see here so this is perfectly working fine so we are able to drag the source element into the destination side so we are able to drop the element element into the destination element and also you can see here outest is perfectly working fine and outest is getting ped right so this is how you can handle the if frames in play right and also this is how you can drag and drop the element in play right in this play right tutorial we are going to see how to perform the mouse actions using play right tool so let's navigate to the web browser and let's look at the scenario so we will navigate to the google.com and here I will search with tester stock and I will take the sum part of the URL so I will take this part of the URL so we will enter this particular URL and we will do firstly just normal click double click and right click from the mouse middle button click from the mouse and left button click from the mouse and also we will see how to who the mouse on The Elements also so if I who my mouse here on the vi so it is displaying the some text search by wise so if I H on the image so it is saying search by image like that so at the end we will see how to who are the mouse on the particular element so now I will navigate to the vs code and we will use this particular URL and here I'm creating one simple spec file under the tests folder so here I'll say mouse actions dopc do jsy so that's it I will go to the first test dopc file and here I'll copy this test and I will keep only the skeleton of play right test and here I will modify the test name as Mouse actions in playright that's it guys so let's enter the URL here first so I will go to the browser and I will take the URL and then I'll come back to the vs code now so here I have entered the URL so let's do the very normal click and double click so these are the generic clicks what we will do so here'll say just click and then we have a double click so we'll see one by one how to do all these and here I'll say mouse right click and in the similar way we have the mouse middle button click and then we will perform the left button click from the mouse and at the end we are performing the mouse whoover so these are the things we will be doing it in couple of minutes so that's it guys now so let's perform perform a normal click so here I will go to the page so let's identify this particular tester stock link by using the get roll so here I will go to the vs code so here I will use await keyword followed by Page Dot and here I'll say get by role so here I will mention as a link by using the link text we are going to identify by the element then I will pass the object and inside the object I will pass the value as test stock that's it guys now so there might be n number of ma end number of matches to the our link text so that's a reason so if you look at this particular search results so there can be a number of matches so that's a reason here I'm calling one function called first so this will focus on the only very first element then I'll say the regular click method that's it guys so I will put some wait so that we can see the execution at the end of the test so here I'll say wait for timeout so here I'll add some seconds so that's it guys now let's verify whether we are able to perform the normal click so I will the test now so it is launching the browser and it is entering the URL and it should click on the tester stock and it is navigating to the tester stock Channel and if you see here so test is perfectly working fine so this is how you can perform the our regular click or the normal click so I will take the same locator and we will see how to perform the double click on any element using play right so previously we have called click function now we have to call the DB DBL click so that's it guys so that means or double click so now we are double clicking on this particular test tester stock link so here I will run the test once again so DBL click is nothing but the double click so if you see here it is navigating to the YouTube channel and finally it is closing the browser so this is how you can perform the double click now let's see how to perform the mouse right click so we will take the same element so basically I'll take the same element here and then if I go to the web browser so simply we will right click on this particular link like this right so I will go back here and so here I'm calling one method called click so inside the click method so here I'm passing as button so instead so we have to pass the object guys not directly button we can pass it so inside the object we can pass the button colon then here we can pass the values inside this so firstly let's perform the right click from the mouse so simply you need to pass the right and this is going to right click on the element by using the mouse so let's run the test now and if you see here so it has performed a right click on the the web page element and then it is closing the browser and if you see here so our test is getting passed right now let let's take the same line of code and simply we have to pass the different value to The Click method so firstly we have clicked on the element that means we have performed right click on the element now this time we are going to perform the middle click so here I'll pass as middle that's it guys so I will go to the browser and if I do the middle middle click on the web page element so this is going to open the next tab like this right so let's verify this whether it is properly performing the action or not so let's run the test now so we are performing the middle click and if you see here it has opened the another tab so so it has opened that particular particular Link in the second tab so that's it guys and if you see here our test is perfectly working fine so this is how we can perform the middle button click from the mouse now this time we will perform the left button click from the mouse so simply here we have to pass the different value so here we have to pass the left as the value to the button so that means we are passing the object to the click method so that's it guys now I will run the test and this time it will perform the left button click from the mouse so it is basically it navigates to the channel so that's how it is and that's it guys and if you see here so our test test is getting passed now let's see the final one how to who are on the any web page element let's say for example I want to Mouse who on any of these elements right so let's inspect this particular element and we will do the mouse who run the element so I'm inspecting search by wi so if you see here so we have the DU tag and under that we have the area label equal to search by y so simply I'll take this particular attribute and value and I'll paste it here that's it guys and we are able to identify the element by using the CSS selector that's attribute equal to Value simply I will take this CSS selector and I'll come down here so here I'm using iate keyword so we are going to identify the element now so I will use the page dot locator and here we have to pass the locator value whatever we have ident identified it so that's it guys so we have identified the element now I'm calling one method called whoover so this function does the most whoover on the web page element so that's it guys so if you see here so whenever you open the page normally so this particular text will be not displayed only if you whoover on the page element then it will display the text as search by wise right now let's run the test and see the results and if you see here guys so it has performed the action because I have used my mouse just I was rolling my mouse so that's the reason that text got disappeared so let's run the same test once again I will not do anything this time and you'll be seeing the text as search by wise if you see that search by wise is displayed so this is how you can perform the mouse who on any element using the playright in this playright tutorial we are going to see how to perform keyboard actions in playright so I will show you couple of examples over here so we can perform many actions from the keyboard and if you see here so there are multiple options so very commonly used uh actions from the keyboards are pressing backspace tab enter escape and you can also press the enter insert page down page up and also you can press the functions from F1 to F2 and also you can press the digits from the keyboard and also we can press keys from a to zed as well so like this there are many actions we can do it from the keyboard so let's see couple of examples in the vs code now now so here I will quickly create a one spec file so here I'll say keyboard actions dot spec. JS so that's it so I will go to one of the spec file and I will copy the test and here I will keep only the skeleton of playr test so that's it guys so let's update the test name as keyboard actions in playright so that's it now let's discuss the manual scenario what we are going to do it in few minutes so firstly I will navigate to the google.com and we will identify this search text box then we'll fill some data over here and by using the keyboard we will hit the enter first so let's perform this setion first so let's copy the URL now here I'll go and I will add the URL inside the goto method and let's identify the search text box so here I'm using the one attribute called area label equal to search so simply I will add the square brackets so inside the square brackets I will add the attribute name and attribute value so here I'm trying to add the single quotation in between the single quotation I'm adding the value so we are able to locate the element right so let's copy that element and here so I'm using the so let's add the steps here firstly we will press the enter so will say press enter and then we'll say control plus a sorry so Control Plus all so we will see how to press the control+ A sorry let me add here press control+ a and also we'll see how to press tab also and also we will see how to press the delete from the keyboard so these are the couple of examples we will be seeing in few minutes so I will identify the element first here I'll say eight for followed by that page dot here I'll say locator and inside that I will add the locator value what we copied it from the Google page and firstly I will perform the click operation so I want to click on that search text box firstly then we will enter something in the search text box so here I'm adding play right by tester stock so that's it now let's verify whether this test is working fine or not then finally I will use uh await followed by Page dot here I'll say wait for timeout so here I will give some some some seconds so after completing the test so it will wait for some time so let's see whether this test is working fine or not then we will see how to press enter how to press contr a how to press delete and how to press the tab also it looks like it is not working so let's see what is the issue also so I will navigate to the vs code still it is running and if you see here sorry so here we have given the Press so here we have to call the method called fill so that is the reason so our test got failed now this time we should be able to open the google.com and we should be able to enter the some value in the search text box and if you see here so we are able to enter the playright by tester stock great so now let's see how to press the enter from the keyboard so I will take this locator and followed by that so here I'm calling one me calling to the one method called press and insert the Press I'm passing the value as enter Because I want to press enter from the keyboard so that's the reason I'm passing the enter value so you can pass any value from the this particular list right so it will be acceptable value so right now I'm pressing the enter so once I add the text here let's say play right by tester stock if I press enter from the keyboard we got the search result here right now let's see this test whether it will fetch the results or not so I'm running the test now if you see the results here so we are able to fetch the results after pressing the enter so here I will be doing a very small modification so after the web element locator value I'm calling one function called First and same thing I will do it for the line number 10 also in the line number 13 also so why I'm doing this particular why I'm adding this particular statement is so if it is this particular locator is matching with multiple elements and it will perform on the perform the action on the very first element so that's the reason here I'm saying identify the first element and perform the action that's what I'm saying here so that's it guys we know how to press enter from the keyboard now let's see so after pressing enter right so if I close this particular inspector so what I will do is next action so we will use the control+ A and also we will use the delete so in this scenario again I will click on the this text box I will select all the text and then I will delete it from the keyboard that's it guys so this is action what we are doing it now so firstly we have to click on the text box so that's the reason I'm copying the line number nine which is clicking on the search text box then we have to press the control a from the keyboard so that's the reason I will copy this particular part where we are performing the enter so here I'm passing the value as control+ a so this will selects the all the text which is there in this particular search text box that's it guys once we are able to select the text which is there inside the text box simply we can delete it by using the delete so here I'm right now I'm passing the delete as the value for the Press so this is going to delete the value value whatever we selected by using the contr a that's it guys our scenario is very simple so firstly we have entered the search text box and after that we are pressing enter from the keyboard and again we are selecting the same text box here then we are selecting all the text which is there inside the text box then finally we are deleting that text now let's run the test and see the results if you see here guys everything got cleared so and if you see the output also out test is perfectly working fine right so this is how you can use the control a that selects all the text and also we are deleting the selected text now let's see how to press tab so the scenario is very simple guys so I will go to the google.com so already we have identified this search text box firstly we will click on this search text box and after that I'm pressing one Tab and after that the after pressing the tab cursor is going onto the search by voice right and if I hit enter from the keyboard it is going to open up the one alert right so let's perform this particular action we will see how to use the tab and enter also so right now I will comment out the line number 10 and line number 13 and line number 16 17 and 18 so that's it guys so we have opened the google.com and we have clicked on the search text box and now we have to press Tab and enter so here I'm using the await keyword followed by the page dot keyboard because already we are clicking on the text box here so directly we have to click the tab and then we have to press the enter from the keyboard so that's the reason here I'm saying press so firstly we have to press the tab so that's the reason here I'm passing Tab and followed by that we have to press the enter as well and then I will press the enter so that's it guys so I will give a little bit more weight so we are done with how to implement or how to use the tab and enter from the keyboard in a play rate automation tool so let's run the test now and if you see here so we got the alert which we expected it so it will wait for some time and if you see here our test test is getting passed and also here you can see the check mark so this is how you can use the all the keyboard actions in the playright in this play right tutorial we are going to see how to work with the date picker so I will be discussing how to select the today's date and how to select the custom dates as well from the date picker field so let's navigate to the browser we will see the scenario and then we'll come back to the vs code and we will create the spec file and we will create the playr test so we will navigate to the this particular URL gquery ui.com /d picker so here we have the one field called date and where we can select the any dates right so this is the scenario what we are going to automate it in few minutes so let's navigate to the vs code and here I'm creating quickly One spec file as date picker doec do JS so that's it so I will copy the one of the test and I will come back to the date picker dopc file and I will delete the respective code here I need just the skeleton of the playr test and here I'm updating the name of the test as date picker in playright so that's it guys so firstly we will navigate to the URL so here I will add the URL first and once we navigated to the specified URL we have to identify the this particular element so this element is present inside the I frame if I inspect the element so we have the one I frame firstly we have to switch into this particular I frame and then we can perform the action on this particular date field element so let's identify the I frame first so we have the class equal to demo frame so simply I will take the class value and here I'll say dot followed by class value so we are able to locate the iframe and simply I will copy the iframe now so we have the iframe locator name and here I'll say page dot so here I'll call to the one function called frame locator so firstly we have to switch into this particular frame then I will asend back to the one constant variable called frame element so we have the frame Now by using this Frame I can perform the any action on this particular date field element right so let's inspect the date field now and if you see here which is a which has the input tag and it has the respective attributes and values so I'm identifying this element by using the class value simply I will copy the class value again I will put the dot and I will add the class value so if you see here so we are able to locate the date field so let's copy the locator now so here I will use the frame element followed by locator so let's add the locator value here then simply I will use the fill so here I can pass the date format so let's see which which format of date is this field is accepting now so if I select today's date so it is accepting month followed by date and year so let's pass the any date here so let's pass 22 or let's pass 20 sorry first we have to pass the 12 that's a month followed by date let's pass 20 as a date and followed by the year so that's it guys so we are done with identifying the frame and by using the frame so we are going inside the frame then we are identifying the date picker field and we are selecting the date in that field so I will put some weight so that we can see the execution properly so that's it guys so this is a one way guys how we can select the custom date and next we will see how to select the today's Days today's date so we don't know like what will be the today's date right so dynamically how to select the date you will see after executing this test so this is the very simple way how we can select any custom date so it can be today's date you can pass it or you can pass the if it's here so we are able to select the 1220 and 20 2023 and if you see here our test is getting passed so this is the one way of selecting the date from the date picker so let's look at the second way how we can select the dynamically today's date so I will go back to the web page now I will refresh it once again I will inspect the date field so if you here so today date is 20 22 so I I have clicked on this particular input box firstly and then I'm going to inspect the today's date so if you see here this particular DD tag followed by the we have class and if you see the class value right which is ending with UI date picker today and if I inspect the next date or even previous state so this particular TD tag and followed by the class does not have the whole value whatever we have seen in the today's date tag right so if you see here the above one which has the different value together right all together so this is a very unique value which will be there if it is the today's state so let's identify the element by using the class so firstly let's click on the this text box then we will get the calendar then we will select the today's date by using the class so here I'm firstly using this particular locator so previously we have used to enter the data now I'm using the same locator then I'm simply calling the method called click so this will clicks on the date field text box then now we have to identify the identify the today's date so if it is let's say today is 22 so it will select the 22 if I execute tomorrow if it is 23 it will select the 23 because based on the class value we are going we are going to identify the element so simply I will press control F and followed by that there'll say dot value if you see here so it is highlighting the respective element on the calendar right so today date is 22 let's copy this in inspected value and here I will use the await followed by then I will say frame locator dot locator and then I will pass the CSS selector and here I'll say just click on that date that's it guys so this time so our test should select the today's date that's the 22 date let's run the test and see and after this test we we will see the next way off if you see here guys so it has selected the 1222 and if you see here our test is getting passed right so so these are the two ways of selecting the date pick cut so there is another way also so that is the another way of selecting the custom date value so let's see how to select the custom date value So based on the today's date for example today date is 22 say for example I want to select the three days back date that is the 19 date or say for example I want to select future date I want to select after 4 days date so like this custom date can be selected by using this particular approach so let's see what is this approach so simply I will take this particular locator we have return to identify the today's date right so if I put this particular locator so it is highlighting the sorry guys so let me refresh the page once now let's add the locator so if you see here so it is highlighting the today's state so if I go inside the TD tag we have the another tag called anchor tag so I will put one arrow and here I'll say AR a anchor tag so right now it is highlighting the this particular today's date anchor tag and if you see the details of this anchor tag so there is a one attribute called Data hyph date which has the exact value of the today's date right so we will get this particular date by using this we can add the days or we can sub substract the days and based on the the result we can select the custom date so now I what I will do is simply I will take this particular CSS selector and here I'm using the frame element do locator and here I will add the locator value so I will save back to the con constant variable called default date so that's it guys so once I'm having the locator by using this one so I will get the data hyund date value by using the get get attribute so here I'll say get attribute and inside this we have to specify the attribute name as data hyphen date so this returns me the 22 right now so I will assign back this to the another variable called here I will say let and I'll say date value so that's it guys now once we are having the so let me add it as a current date value so once we are having the current date value so we will simply perform some arithmetic operation let's say for example I want to select the 3 days back date so I will take this current date value and here I'll say so I'll put the brackets and then here I will say three that means it it is going to return me the 19 as the value and once the operation is done then here I will convert back to the integer so here I'll say parent so that's it guys so I will put the brackets and I will assign send back to the one variable called custom date so here I'll say const and variable name is custom date so that's it guys it's very simple now so once we are having the custom date so right now this is going to return me the 22 as the as a value and then here we are doing the calculation and this Cal calculation returns me the 99 as value right so now what I will do is so here I'm creating one locator as so here I will say element so what I'm doing is here I'm writing a simple CSS selector guys so the CSS selector is very simple bracket Open Bracket data iph date and followed by that I need to pass the so this particular custom date over here so that it will matches to the respective data date say for example I want to select 23 so here I need to pass the 23 as the value so in our case based on the calculations so it may return the 19 as the value it is going to it is going to select the 19 as the value so here simply I will say custom date and then I will say here two string that's it guys now after that so I need to pad the single quotation that means I need to write this particular data in the single quotation so that's a reason so here I'm writing single quotation so this is the closing single quotation in the similar way I need to write the another opening single quotation so that's the reason here I'll add single quotation and after that simply we have to close the this particular bracket so I will say here bracket so that's it guys we are done with creating the element also now what we will do is by using simply this particular locator that that is element then we will click on the element so firstly we have to use the frame because we have the date picker inside the frame and here I'll say locator and inside the locator I'm passing the element what we formatted just now by using the custom date and then so simply I'm calling a method called click here so that's it guys so we are done with the implementation so now it should select 19 as the value because current date is 22 22 - 3 is is 19 right so let's run the program and we will see the output so let me comment out selecting the today's date which is not required so let me summarize what we have done once again so firstly we are navigating to this URL then we are identifying the frame by using the frame we are clicking on the date selecting field and after that we are identifying the today's date so based on the today's date we are performing the some calculations here and based on the custom date then we are forming the locator by using that locator simply we are performing The Click operation here so that's it guys so let's run the test and we'll see the output output so if you see here guys so there is a some problem we are not able to pass the proper data inside the data hyphen date attribute right so let's see what is the problem here so here we missed to pass the await keywords for the line number 22 and line number 26 so let's pass the await keyword here so that it will gets the promised value from the data hyphen date and and also I will pass the await keyword here for the line number 26 so that's it guys now let's rerun the play right test now so it should select the 19 as the date so 1219 20123 it should select if you see the date here so it is selecting the proper date say for example I want to select the today's date plus three that means it will let's say today today date is 22 and if I add three it will be 25 so it should select 1225 and 2023 so let's run the test now and let's verify the output so if you see here so right now it is selecting the still 19 let me check what is the problem so here we have not added the plus sorry I missed it so this time it should select the 1225 2023 so if you see here so it has selected 1225 2023 so this is how you can select the custom dates in the playright in this playr tutorial we are going to see assertions in playright there are two types of assertions one is hard assertion and second one is soft assertion so let's understand what is hard assertion say for example we have a one test case that contains five steps say for example I have written assertion after the second step in that case if assertion got failed in the Second Step that test will be terminate terminated then and there itself but in case of soft assertion the execution will be happen till the fifth step basically So Soft assertions are nothing but so these are the type of assertions so whenever assertion got failed so it will not stop the test execution it will complete the test execution if you're using the soft assertion if you're using the hard assertion your test will be terminated when assertion got failed so let's see the important assertions you'll be using across the project the very first one is URL so we will see how to verify the URL L and second one is title how you can verify the title of the web page and the third one is text for example you want to validate a text displayed on the web page so that can be validated by using the method called to have text and next one is editable so let's let's say for example we have a button so we want to check whether that button is editable or not let's say we have the text box so we will check with whether text box is editable or Not by using the Tob editable method and next one we have visible so we will be using the to be visible we will be checking the element is visible or not so that we can perform the next action so it can be click or it can be entering some data into the element and next one we have is enabled so we will check whether element is enabled or not so that if it is enabled we can perform the action on that web page element and the seventh one we have is disabled so many times we will be checking whether the element is disabled or enabled so such kind of scenarios so there might be a scenario after entering the data and we will be saving the record and after that we will be seeing that whether that data is editable or not whether it is disabled or not so that can be checked by using the to be disabled and next one we have the empty to be empty method so for example we have the text box so we'll check whether that particular text box text box is empty or Not by using the to be empty method and the last one we have we have is to have count so basically let's say for example we have identified a element and we have let's say five elements so we have written xath or CS selector so that matches with the five elements so whenever I open the web page all the five elements should be present in the web page right so that count can be asserted by using the to have count so let's see all these examples in the realtime web application now I will navigate to the vs code and let's create a quickly onepc file so here I'll see the file name as assertions dopc do JS and I will go to the one of the test and I will simply copy the test and I will come back to the assertions spec file so I will keep the only play right test skeleton so let's update the test name as assertions in play right so that's it guys now let's see the scenario so firstly we will validate the URL title and text so here I have opened the google.com and here I will search with playright by testers talk so here I will take the some part of the URL and I will open the another tab so this is a URL what we are using it so after hitting the URL we are getting the this Google search results right so let's use this URL and we will validate the this URL is correctly appearing or not not so firstly I will add the URL let's navigate to the URL first to assert anything we have to use the so let's say here assert URL so we have to use the one keyword called expect to verify anything to get the URL simply I'm using the current page object followed by simply I'm calling one method called to have URL and inside this function simply we have to pass the expected value so I will pass the correct value this time so this is what we are expecting in this URL and I will put some weight here I'll say a wait followed by Page wait for timeout and here I'll pass some seconds that's it guys so if I run this test it should launch the browser and it should enter the URL and it should validate the URL also and if you see here our test is getting passed let's say for example I will remove some part of the URL in the expected result and this time it will get failed because the actual URL and the expected Ur URLs are not matching in this case and if you see here so this is the expected string and this is the actual string so those both both the strings are not matching so that's the reason our test is getting failed so this is the expected failure now let's see how to assert the title so if you see the title of this particular web page so it is displaying play right by test stock hyphen Google search so let's assert the this particular web page title so here I'll say assert title so it is very simple guys same syntax we have to use it and here simply we have to call to the method called to have title so this function will get the current page title and here we have to add the expected value value so expected value is play rate by tester stock after that there is a hyph and followed by Google search so let's add that text here so Google search so that's it guys now let's run the test now and if you see here so our test is getting passed right say for example if I remove something here let's say I will remove by so this time our test will get failed because the titles will be not matching so whatever the actual and expected value will be not matching so if you see here expected and actual values are not matching so this is the expected failure now let's see how to validate the so here I'll say assert text say for example in this web page we will inspect this particular search text box and we will get the this particular text and we will validate with the our actual value so simply I will inspect the element and we will write a simple CSS selector by using that we will identify the element so here I'm writing just uh single quotation and the brackets for the attribute and value and if you see here so it is matching with three elements but we will focus on the very first element so let's copy the CSS selector so this time we are asserting the text from the web page so here I'm using await followed by so expect keyword I'm using and inside this I'm using the page object dot so here I'm saying locator and inside the locator I'm adding the locator what we just copied it from the Google and once we are having the locator so here I'm saying the first so this particular element was matching with three elements so that's the reason I want to find only first element and perform the action that's it guys so here we have the locator now so I want to verify this locator text right so that's the reason here I'm calling to the method called to have text and here we have to pass the expected value so this is the expected value so let's copy the play right by tested stock that's it guys now let's run the test and it should compare the web element text and the expected text and if you see here guys so our test is perfectly working fine so if I pass some incorrect data in the expected that time it will not match the expected and actual value then obviously our test will get failed and if you see here actual and expected values are not matching so this is the expected failure so that's it guys so we have seen how to verify the URL title and and text now we will see how to use the to be editable to be visible and to be enabled so already we have identified the text box you will see whether that particular text box is editable visible or enabled or not so here I'll say assert editable enabled and another one is is visible so let's do all the three things in a single time so what I will do is simply I will take this particular element so this particular element is nothing but the search text box what we have identified just now so that's it guys so here simply I'm calling to the one method called to be editable if it is editable then our test will be passed if it is not editable our test will get failed so in our case it is editable so our test will get passed in the similar way we can use the to be visible so basically we can check whether element is visible or Not by using that we can perform the next set of actions so here I'll say to be visible and in the similar way I will call to the another method called to be enabled so in our case so all the assertions will get passed because our text box is editable it is visible and it is enabled also right now let's run the test now and our test will pass and if you see here guys so our test is perfectly working fine so there are no failures also now let's see how to use to be disabled to be empty and to have count so basically disabled we are verifying whether element is disabled or not and we are using to be empty to check the element is empty or not and final one we are checking the count so let's see all three examples so here I'll say assert disabled and followed by that empty we are checking the element is empty or not then we are checking the final one is count so we have we have already the locator that's the text box we have identified we'll check this text box is disabled or not so in our case it is enabled our test will get fail so that is fine so here it say to be disabled so our test will fine sorry our test will get fail because we are checking this element is disabled or not but in our case it is got enabled the expected behavior is our test will get fil so our our element is active now and if you see here received is enabled and expected is disabled so this is the expected failure guys this is how you can use the to be disabled you can apply this to be disabled where you can see the element got disabled now let's use how to check the empty so for example here I'm calling one method called to be empty so I'm using the same element I'm checking whether this element is empty or not in our case this element is not empty it it has already some text in it the behavior of this particular assertion is it will get fail that is fine we can run it so you can check any text box where it is empty so in that case this assertion will get pass and if you see here guys so expected value is empty we are expecting empty as a text box but we are receiving not empty so here you can write after the bracket simply we can pass the doot so here I'm checking not empty that particular text box right so if I run this test and this will work fine so previously we were checking only the text box is empty or not but this time we are checking text box should not be empty it should have some value so this time our test will get passed pass and if you see here our test is getting passed right so this is how you can use the 2 BMT method as well now let's see how to use the to have count if you see here guys so we have the one method called to have count so by using this one we can get the current page elements for example if we have located one element and if it is matching with multiple elements basically that will returns you the count of that element and then we can compare it by using the to have count so if you see the X paath sorry if you see the CSS selector whatever we have WR right so this CSS selector is matching with the three elements right and if you see the third element guys so this is the third element if is here three of three and if I go a little bit up here right so this particular element is there inside the I frame so that's the reason the count is here only two and here I'm again using using the same locator and this time I'm not using the first and after that here I'm calling to the method called to have count and inside that I'm passing the expected value as two that's it guys so our test will get passed because this particular locator is matching with only two elements as I said the third element is there inside the another I frame so we should not we will be not able to identify the Third element so that's the reason count of this locator is two let's run the test now and it should find the locator count and it should match with the expected count value and if you see here so we have the sum error so directly we have to pass the number not a string so that's a reason let's remove the quotations that is fine now I will rerun the test once again so if you see here guys our test is perfectly working fine right say for example if I pass three number here so our test will get fail because the element is matching with only two elements and if you see here guys the expected value is three but we received only two from the web page so this is the expected failure guys so this is how you can use the all different types of assertions in the playright now let's see how to use softt assertions in playright so far you have seen all the assertion examples with respect to the hard assertion right so let's see couple of examples for the soft assertion as well so as I said so when we apply the soft assertion so our test execution will continue it will not terminate there exactly right so our test is working fine right now so I'm just running the test so there are no failures in the playrate test so all the assertions are working perfectly fine right so intentionally I will fail this assertion I will run the test so where we are asserting the URL I'm failing it and our test will fail in the verification of the URL and if you see here guys so it is getting failed it is not able to match the expected URL and the actual URL so this is the expected failure so what you can do is simply to apply the soft assertion you need to say after the expect so simply you need to call to the one method called here called Soft that's it so here I have called to the soft method after the expect and if I run this test right so it will make only this particular step as a failure and it will run the rest of the steps in the test so that's the beauty of the soft assertion but still our test will be getting failed in that particular step and if you see here guys our test got failed in while validating the URL so let's look at the report now so I will go to the report and let me open the index. HTML report and if you see this test right guys only our test is getting filled in this particular step but if you see the rest of the steps so rest of the steps are perfectly working fine right now let's apply another soft assertion so here I will make so while validating the text I will pass the incorrect expected value so our test will get fail here also right so that's the reason here I will apply the soft assertion in playright so that's it guys so I will run the test and this time our test will get fail in two steps so previously our test was getting failed in the only one step and rest of the steps were getting executed uted successfully so that's it guys so here you can see that expected and actual results and I will go back to the playright test report and I will refresh it so let's go to the steps and if you see here also it is listing down the first assertion failure First Step failure and this is the second step failure and if you see the steps also of the step sorry test the first failure is there here while validating the URL and the second failure is there in the while validating the text so this is how you can apply the soft assertion in the playright in this playright tutorial we are going to see what is watch mode and how to use watch mode in play right so let's understand understand what is watch mode first so watch mode is nothing but so whenever I making some changes in the play right test right so after making the changes automatically that test execution will be triggered after making the changes and once you save the file automatic test ex execution will be triggered if you switch on the watch mode to the any spec file or any test so let's see how to use the watch mode now so I will go to the vs code and here I will navigate to the terminal so let's open the play right test Runner first so here I'll write npx followed by play right test and followed by hyphen hyphen UI this command will open the playright test Runner if you see guys so it has opened the playrate test Runner so it list Downs all the spec file and all the all your automation tests so here I'm selecting one of the spec file called assertions do spec. JS so if I select this particular test right so if I come right side so there are three icons and if you see here guys so there is a one icon called watch so before we switch on this Swatch mode so let's run the test and we'll see whether this test is working fine or not then later we will switch on the watch mode and we'll make the changes to the this particular test and we will see whether it is playright is automatically triggering the test or not so if you see here guys so our test is perfectly working fine and also here you can see the check mark and here you can see that so our test is passing one of one so here I will simply click on the I icon that that is the watch mode so if I click on that one so it is turned on now so if you see the other play right test so these are the automation tests so it is not enabled with the watch mode so only this particular test is switched on with the watch mode so I will go to this particular spec file and I will make the changes automatically this test will be triggered for the execution so I will go to the vs code and and this is the spec file what we are referring it so here I'm writing very simple statement here so console DOT log so simply I will write some statement inside the log method so I will say assertions in playright test is running that's it guys so I have saved it and if I come back here so if you see here guys so it has started the execution because I did not actually click on the run for this particular test so automatically test execution is started so this is the beauty of the watch mode guys so I will go back to the vs code once again so I will make small change here and if you see here guys I have not saved this particular file right if you see here so this file is not saved yet and I will go to the play right test Runner so this execution is not started now so let me save it and we'll come back and we'll see the execution once again I have saved the file and if you see here guys so it is already CED for the execution and also execution is started and if you see here on the right side window guys so our test is getting executed and also here you can see so our test is getting passed so this is how you can use the watch mode in playright in this playright tutorial we are going to see how to enable traces so whenever the test got failed so we will add the more information about the test execution life cycle so these traces will be added into the play test report where we will be seeing all these information so we can see all what are the actions done metad dat console data logs Network details and also we can see the screenshots with respect to the time frame also so now I will go to the vs code and here I will quickly create a one spec file so here I will give the spec file spec file name as failed test dopc do JS that's it I will go to the one of the test and simply I will copy the test and I will go inside the just now create a test and I will paste it so intentionally I will fail this test and we will check the playright test report whether test failure traces are added or not so we have to modify one flag in the configuration file then we will get the TSS added into the play test report now we have not enabled it so you will not find the any Trace information and if you see here guys so our test is getting failed so we it is not able to match the actual string and the received string so this is the expected failure and if I go to the play right report I will open the index.html report and if you see here guys so the our test got failed and if I scroll down only we have the screenshot that's it right so we will see how to add the trace information as well where you can see lots of details about the test execution life cycle so I will go back to the vs code so you need to add the one flag called so under the defined configuration so you need to go inside the use object so there is the one flag called Trace colon and here we can pass multiple values so if you have enabled retry mechanism you can keep this particular value otherwise so for demo purpose I'm editing it so simply you can select the retain on failure so if you not enabled retry mechanism simply you can keep the retain on failure so that's it guys so this particular flag you need to update it in your playright configuration file and then you can close it so here I'm using the terminal to run the test now so I will clear all this data that's it guys now I will run the this particular spec file fail test. spc. JS file from the terminal so here I will use npx followed by play right test hyphen hyphen headed and then I will specify the our spec file name fail test dopc Dot GS so that's it guys now I'm executing the spec file and when test got failed right it should attach the trace information to the play right test report so previously playright was not doing it we have enabled that particular flag so now it will attach us the trace information and also automatically it is going to open the report guys and if you see here guys so our test got failed so this is the expected failure right if I scroll down little bit down so here you can see where exactly this test got failed and also you can see the screenshot and if you scroll down here so there is another section called traces right so let's click on the traces and if you see here guys in the top you can see the time frames based on the time frames you will be seeing the screenshot right so you can verify all the screenshot and also here you can see the test and the respective test steps so what are the actions it has performed here right so if you select any test and on the right side you can see the screenshot also so here I'm selecting the test step and if you see here guys there's another section action and before and after so before means here I have selected the very first step so before means so before entering this URL so you can see the what is the screenshot of the browser so browser was very blank that's the reason you will be seeing the blank screenshot and once it is navigated to this particular step or once it is executed the First Step you can see what is a screenshot like what was the web page displayed right so you can select the step and you can see the before and after what happened here you can see the respective screenshots also and also you can see the metad data so when test ex execution started and browser details and how many actions are done or how many events are done all those metadata you can check inside the metadata section and coming to the below section so here you can see the call details say for example if I selected one of the step from the test so it will display what what is a call made you can see all the call details coming to the logs so it will display all the logs what it what are the locks it has created during the test execution so coming to the error information so it will display all the error details what is the reason how test got failed and coming to the console so this console is very much similar to the what you see in the browser guys so it has all the details console details and coming to the network so here you can see what are the calls it has made and these two tabs you'll be seeing it in the web browser as well console and network network tab so all those details you can find it here coming to the source so it has the source code like we have written the test right by using the JavaScript so that source code you can find it here and also you can see the where exactly our test got failed also and also it is displaying the all the error information here right by using that we can easily track it and coming to the last section that's the attachment so here you will be finding the screenshot where exactly our test got failed so this is how we can verify the traces when playrate test got failed and also you can verify all these details in the playright test Runner as well in the previous tutorial I have showed how to use the playright test Runner so all these sections are available in the playright test Runner as well when you are running it manually any playright test hi friends this is bakaa in this chapter three of playrate full course we are going to see what are annotations and what are the different types of annotations we are using in the play right so we will see how to skip a test and how to run only selected tests by using the playright annotations and then next we are seeing how to group The automation tests and how to execute it based on the groups and next we are going to see how to tag a test and how to execute the only tagged test throughout the project and next we are going to see how to repeat a test multiple times so based on the need or demand and next we are going to see how to automatically retry the failed test cases and next we are going to see how to perform parallel testing using playright and next we are going to see how to parameterize tests in playright so where basically how you can pass the different sets of test data to the play tests and finally we are going to see how to perform the visual comparison test testing using playr where we are comparing the two images that means screenshots of the actual web page and the expected web page in this playr tutorial we are going to see how to skip a test and how to run only selected tests in playright so there might be a situation where you want to run only few test cases from the spec file so that can be achieved by using the only keyword so let's see how to skip a test so here I will go to the vs code so let me create a quickly One spec file here annotations dopc do JS so that's it so here I will go to the one of the spec file simply I will copy the test and I'll paste it here that's it guys so this particular spec file has the only one test so I will copy this particular test and and I will add total three playright test so that's it guys then I will rename the test with so this is the third test I'm adding the name as assertions in play rate three so this is the third test and this is the second test and this is the first test right so currently we have three automation test in this annotations dopc file so let's run all these three automation test so we will verify whether all the three automation tests are working fine or not so I will run the test so here I'm running the spec file so currently it is running the very first test so once the execution is completed we will see how to skip a test from the test execution using playright so now the third test is running so that's it guys if you see here so all the three automation tests are perfectly working fine and those are getting passed so I will go to the Explorer now say for example I don't want to run the assertions in play right 2 so simply you can use the after the test simply write Dot and simply here add the skip so before I run this particular test guys so let's let's look at the report as well in that report you will be able to see the all the three automation tests are got passed so if you if you see here guys so total automation tests is three and those are those all are getting passed last right so this time I have added the skip after the test because I don't want to run this particular playright test so right now only assertions in playright test one and assertions in playright test three will be getting executed so I will run once again the spec file and also we can see the same report in the HTML as well so right now the first test is getting executed and now the third test is running because second test is getting skipped and you can see the output as well so that's it guys and if you see the output also one test is skipped two tests are passed so let let's go to the report and let's refresh the report also see if you see here guys total test is three two are getting pass and here you can see that one test got failed and here you can see the name of the test which got skipped so this is how you can use the skipped statement with the test in playright now let's see how you can run the only selected automation test right so there might be a scenario you don't want to run whole spec file right so in this case I want to run only assertions in play right one test so that's the reason so after the test simply you need to add the dot so so simply call to the one function called only that's it guys in this spec file only this particular test will be getting executed so let's run the spec file once again so here I'm running the annotations. spec file so this time only one test will be running because we have used only keyword to run only selected automation test so if you see here guys so only one test is there and that is got pass so let's look at the HTML report and if you see here guys total test is one and that is getting passed right so this is how we can use the Skip and only keywords in the playright in this playr tutorial we are going to see how to group test cases and how to run the group of test cases so basically we will see how to create a single group in playright and how to create multiple groups and how to execute the group of test cases we will see using the playright so here I will navigate to the vs code now and here I will create a simple spec file now so here I'll say group dopc do JS so that's it guys and here I will go to the one of the spec file and simply I will copy the One automation test and I'll paste it inside the group spec file so that's it guys so let's modify the test name as test one so right now we have the only one test so I will take the copy of this test and I will create a another test so basically I'm creating the duplicate of first test so here I I will give the name as Test 2 so that's it guys so this is a very common spec file you have seen already how to create a spec file and how to create the play test now let's see how to create a groups so we have to use the describe function to create the groups so here I'm using the test object followed by here I'm calling the describe function so inside the describe function we have to provide the group name so here I'm giving the first group name group name as smoke testing and followed by that I will simply give the function that's Arrow function simply I will close and simply I will close and open sorry here I'm just opening and closing the flower brackets that's it guys so we have created a one group now so similarly we can create the another group so here I'm creating another group called sanity testing that's it guys now I will come back and I will take this test one and test two and I will put into the smoke testing bucket so that's it guys so let me format this particular test and what I will do is so we have added two automation test into the smoke testing bucket now let's create one test under the sanity testing group as well so I will take the copy of this test and I'll paste it inside the sanity testing group so here I will read rename the test name as test three so that's it guys so we have created the one group called Smoke testing and the second group as sanity testing so smoke testing is having two test cases and Sanity testing is having only one test so now I will go to the testing so here I will just go to the spec file what we have just created so here I'm opening the spec file that's group Dot spec. JS file and if you see here guys we have the two groups one is smoke testing and another one is sanity testing so if you see here guys test one and test two is belonging to the Smoke testing and test test three is belonging to the sanity testing so in the realtime project you can put the multiple tests into the group and based on the need or based on the demand you can go and execute the group of test cases so simply I will trigger the smoke testing test cases so it will execute test one and test two the first test is getting executed now already it is launched the second test case execution and if you see here guys so it has executed the smoke testing group and that contains two tests those are getting passed and in the similar way we can trigger the sanity testing also so it opens the URL and it will validates the some of the things in this web page and it will wait for some time then it will closes the browser right so if you see here guys one test was there inside the sanity testing group and that test is getting passed so this is how you can create the groups and execute it from the playright in this playr tutorial we are going to see how to tag a test and how to execute the tagged tests in playright so here I will go to the vs code and quickly I will create a spec file here so here I'll say spec file name as tag test Dot spec. JS so that's it so here I will go to the one of the spec file and simply I will copy the one test and I will come back to the tag test dopc file and here so we have only one test so let me summarize what we are doing in this test so we are navigating to youtube.com and we are entering the SE Search keywords and we are clicking on the search icon and then once we got the results we are clicking on the playlist and then then we are validating the title of the web page that's it guys now let's see how you can tag a test so let me modify the test name as so I will give the test name as test one and similarly I will create the copy of this test so I want to create a total three automation test here so this is the second test test two and I'm creating another test that is test three that's it guys so tagging is very simple guys so whenever you are creating a test so whenever we are writing the description of the test then and there you can specify the tag name for this particular test so by using the atate symbol so here I'm giving the tag name as tag one and here you can give the tag name as smoke testing sanity testing or regression testing also you can give it for the test one I'm giving the tag one and I will come to the test two here and here I'm giving the tag name as test sorry tag two and for the test three I will give the tag name as atate tag one that's it guys so we have given two tags here one is atate tag 1 another one is at theate Tag 2 that's it guys for at theate TAG one we have two test at theate Tag 2 we have only one test now let's see how to execute the tagged test by using the terminal so I will open the terminal here so it is very easy guys so simply you can write the npx followed by play right and followed by test and then here you need to write The Hyphen hyen grap followed by that we need to specify the tag name so in our case I want to execute the tag one automation tests so that's the reason here I have entered a tag one for tag one we have total two automation tests and at theate Tag 2 contains only one automation test and if you see here guys so second test is getting executed just for the demo purpose I have given the at theate TAG one and atate tag 2 so in the realtime projects you can give the at theate smoke testing at the rate sanity testing at theate regression testing and if you see here guys output so we had two automation test belong to the at theate test one sorry tag one so those are getting executed here right so let's open the report and we will execute the tag to test as well if you see here guys so test one is belong to the atate tag one and test three is belong to the at theate TAG one right so total test count is two and those are getting passed here right so this time I want to execute the test which belong to the at theate Tag 2 only test two will be getting executed this time so here I will modify the tag name as at the sorry guys so we need to mention at theate TAG two and if you see here guys and only one test got triggered for the execution and that is already running right now so it validates the title of the web page and it will closes the browser that's it guys and if you see the output here so only one test it was having that was belong to the adate Tag 2 and those that particular test got executed so let's open the report and refresh it and if you see here so this time we have executed tests which are belong to the at theate Tag 2 so right now only one test is belong to the at theate Tag 2 so this is how you can create the tags for the playright tests and this is how you can execute the tests which belong to the specific tags in this playrate tutorial we are going to see how to run a test multiple times in playright to check the stability of an application to check the stability of an automation test as well so here I'm navigating to the vs code so here I'm inside the terminal terminal right now so let's execute the assertions do spec. JS file so which contains only one test so we will try to run the same test multiple times so here I'm using the command called npx followed by playright and followed by that test and here we have to specify the spec file name assertions dopc do JS that's it guys so this is a very basic command which we are using it for the executing the specific spec file now here you need to enter The Hyphen hyphen repeat and and hyphen each equal to here we have to specify the count say for example I want to run this particular test two times so here we have to pass the two as the value if you want to run 10 times you can pass the 10 as the value so first time the test is getting executed and the same test will run once again so it looks like it has already executed so let me rerun it so it is basically launching the two browsers at the same time so that's the reason you are seeing only one test in the UI and if you see here so second test also got completed and here you can see that two are passed now this time I will pass the three as the count so same test will run three times so if you see here guys so it has launched the two browsers right now that means two same test is executed two times in a two different browsers and now the third one will launch if you see here guys the third test got launched so once the execution is finished we will open the report and we will see it and if you see here guys the same test got executed three times so that's the reason here you can see three pass so let's open the report and we should be able to see the same test executed three times if you see here so this is this this is the test name and and here you can see that three entries right and also here you can see that total test count is three and pass test count is also three so this is how we can execute the same test multiple times in play right in this play tutorial we are going to see how to retry a test in play right so when automation test case got failed so we will set the configuration based on the configuration it will number of times it it is going to retry try the same test for the execution so let's see how to do this in the playright so here I will navigate to the vs code and already we have the one test created which is getting failed in the previous playr tutorial that is fail test. spec file so let's run this test and we'll make sure that this automation test is getting failed and then we will make the configuration changes and we will observe So based on the configuration whether it is retrying for the execution or not and if you see here guys so our test should get failed so it will throw the results let's wait for a few seconds and if you see here guys actual string and expected strings are not matching so that's the reason our test got failed so our test is getting failed failed so let's look at the report as well and if you see the report so our test is getting failed right and here you can see the all the error information and also steps and the screenshot and also you can see the trace information now how you can set the configuration to retry the failed automation test so you need to go to the playright doc config.js file and here you can see the defin configuration inside this one so we have the one flag called retrice so right now the value is passed on to the pipeline if you see here already two is there so whenever we are executing the playright automation test from the pipeline so it is going to ret try the two times when test is getting failed but to run that means to run the rerun the fail test automatically you need to pass the value over here so right now I'm passing it as one if my test got failed so it will retry for only one time so this particular configuration you need to set so that it will it it is going to retry the fail test automatically so I'm just saving it and closing it so again I'm going to rerun the test from the terminal so here I will write npx followed by play right and followed by test and after that simply I need to pass the spec file name so we want to execute the failed test dopc dogs so that's the reason here I'll write failed test dopc do JS so it is going to run the only one test because that spec file has only one test and if the test got failed it is going to retry for only one time because we have given the configuration value as one for the auto retrive so first time it got executed and our test got failed it is going to retry the first time so we we have added only one so that means it is going to retri the failed test only once and if you see the output also here that is the very first retry so it is going to open the report as well and if you see here our test is getting failed so this is the original run execution log details error information screenshot steps and traces and there is another tab for this particular test so here you can see the retry one so these are the details for the test execution where it is where it is got failed what is the screenshot and what is the traces so we have executed only one time after the test got failed right so if I add to here so it is going to retry two times if my test got failed so here I'll just press crl C so that's it I will close this particular report and I will rerun the test once again so this time two times retry will happen because the configuration value what we have added is two so this is the original test execution so this time our test got failed and first retry will happen here so retry number one so already execution is happening here that is the first retry and the secondary R TR also will be triggered So based on the configuration value if you see here guys so retry number two and here we can see the results also that means the execution is happening and that's it guys and if you see here so our test is got failed and it has opened the report so this is the original execution results and this is the first retry and this is the second retry so this is how you can set the configuration value for the retry in play right and this is how you can execute the failed test cases automatically in play right in this play right tutorial we are going to see how to perform parallel test execution in playright that means how to achieve the parallelism in the play right so I will navate to the vs code now and here so we are going to execute the one spec file called group. spec. JS file so which has the two groups one is smoke testing which contains the two automation test that is test one and test two and we have another group called sanity testing which contains the three automation test test three test four and test five so total we have five automation test in this group do spec do JS file so that's a bit about the spec file which we are going to execute it in couple of minutes so for the parallel test execution so we need to make sure that one flag is set to True inside the playr do configuration file that is under the defin configuration so there is a one flag called fully parallel colon and here we need to set the value as true always to run the play right test in parallel mode that's it guys now let's try to run the group. spc. JS file from the command prompt you can run it from the command prompt or you can run it from the terminal as well so simply I'm writing the npx and also we are passing the number of tests can be triggered for the execution so that parameter value also we are passing it from the terminal only so here I'm just passing the npx command followed by play right and after that I'm adding the test and here we have to specify the spec file name so here I'll say group dopc do JS and after that so this is where we have to pass the proper value so that play play rate can trigger the appropriate test executions that means the number of tests you want to trigger for the EXE tion at the same time so that parameter value you need to pass it here so simply you can write hyphen hyphen workers and space let's say we have the total five automation test so that's the reason here I'll write three that means at the same time it is going to execute the three automation test if I pass it as the three value so let's pass the three and we will see whether it is launching the three browsers and it is going to execute the three automation test at the same time so it has triggered the all the let me just minimize this window and if you see here guys it has triggered the three test for the execution and also it has triggered the next two automation test for the execution and then finally it is going to complete the test execution so right now this is the last test execution is happening so total we have the five automation test and if I go to the vs code and here you can see that five tests are passed and we can check the results inside the playright test report and there also we should be able to see all the five tests are passed so if you see here so this is the total count and this is the passed count so this is the expected results and also here you can see that test one and test two are belong to the Smoke testing group and test three test four test five is belong to the sanity testing group so let's trigger the five sorry let's trigger the four test cases execution at the same time this time so here I'm passing the worker workers as four that means at the same time it is going to execute the four test cases so it has opened all the browsers let me minimize all the browsers so that I can show you the execution if you look at the taskbar guys it has opened the four browsers that means four test case execution is happening right now so let's wait for some time so that it will completes the all the execution right now only one test execution is happening that's it guys so let's go to the vs code and if you see here guys so it has took 41 seconds and all the five test cases are passed so let's go to the report also so let's refresh the report and here you can see that all the tests are getting passed here so this is how you can perform the parallel testing in the playright in this play tutorial we are going to see how to parameterize tests in playright so here I will navigate to the vs code and here I'm creating quickly One spec file called parameterize test dopc do JS so that's it guys so here I will go to the one of the spec file so simply I will copy the test and I will add it inside the parameterize test dopc file so I will delete the stuff which are not required and I will keep only the skeleton of the playrate test so here I will update the test name as parameterize tests in play right so that's it guys now let's discuss the manual scenario first firstly we will navigate to the youtube.com so you need to copy this URL and you need to add it inside the goto method so already we have added this URL then we have to search with keywords that's it guys so this is the scenario what we are going to automate it so here simply we will add the play right by tester stock then we will press the enter from the keyboard so let's inspect this search text box first so I will go to the inspect and if you see here this particular input put tag details so I'm using the placeholder equal to search as the value so here simply I will copy this search value and here I'm using the await followed by Page dot get by placeholder and inside this one simply I will add the value as search so firstly I will click on the this search text box then we will enter the Search keywords later so here I will call to the method called click and then I will use the same locator and then I will call to the method called fill by using the fill I will enter the Search keywords so here I'll say play right by tester stop so that's it guys so once we enter the Search keywords we need to press the enter from the key keyboard or you can try to click on the search icon as well so in my case I'm pressing the enter from the keyboard so I'm using the same locator then I'm calling to the me calling to the method called press and inside the Press I'm just entering the enter as the value that's it guys then I will wait for some time so here I will use the await followed by page then I will call to the function called wait for timeout so here I will specify some milliseconds so that's it guys so let's verify this test is working perfectly fine or not then we will discuss how to per how to perform the parameterization in the play right so I will run the test now so it has navigated to the youtube.com then it has entered the Search keywords and also it is able to press the enter from the keyboard and also you can see the results our test is getting passed and here you can see the in the test results tab also our test is working perfectly fine right now let's see how to parameterize tests so here I'm creating one simple constant array variable so here I'll say constant here I'll say the variable name is Con sorry variable name as test parameters equal to square brackets I'll say here and inside the square brackets I will add the array elements so here I'll say first one and the second one and the third parameter the first parameter is play right by tester stock and then second time I will say Cypress by tester stock and third time I will say JavaScript by tester stock so these are the parameters I'm using that means these are the parameters I'm creating it so that I can parameterize this particular test so that let's say for the first time this particular test is running so it will search with parameterize sorry it will search with playright by tester stock first time and when second time it is running same test so it will search with the Cypress by tester stock and so on so we have the test data that means we have the test parameters to be passed on to the test is ready now so here we have to use a simple for Loop that is a for off Loop and here simply I will take the array variable that is a test parameters so simply I'll paste it here that's it guys and then here here I will give the variable name as search keyword so that's it guys so simply I will take this whole test and I'll keep inside the for Loop so let me format it so once we have the test parameters are ready and after wrting the for Loop so we have to read this particular test data that is the one by one this for Loop will gets the all these parameter values from the array and once this particular variable is having the respective value we have to read this test sorry we have to read the this variable name inside the our line number 15 where we are exactly searching with the keywords right so that's the reason what I will do is so simp simply here I'm writing dollar and Then followed by open flower bracket and close flower bracket so simply I'll take this variable and I'll paste inside the flower brackets that's it guys and also you need to make sure that you are writing this description inside the single quotation so that's it guys once you have written this one so let me check what what is the issue it is showing some error over here yeah it is clear now so once you are having the search keyword value inside the test description simply you can use the this particular variable name where you want to use that particular test parameter value guys that's it let me summarize what we have done so far so we have created simple test where we are uh navigating to the youtube.com and searching with the keywords and after that we have created the one array that contains the three Search keywords and this test data I'm passing on to the our test by using the for Loop that's it guys it's very simple so same test will be getting executed three times by passing the different sets of test data now let's run the test our test is ready now very first time it should pass the play right by tester stock in the search text box it has to enter the keyword so it is entering the play right by tester stock then second time it will search with Cypress by tester stock and it is perfectly working fine and this is the third time it should search with JavaScript by tester stock so that's it guys so it is working as expected so let's open the report and we will check the report and if you see here guys so till this it is the test test case name and at the end you can see the what is the data passed onto this particular test right and here you can see that total count is three and those three automation tests are getting passed and here you can see that different Search keywords are passed onto the same test so this is how we can achieve the parameterization in the play right in this playr tutorial we are going to see how to perform visual comp comparison testing or how to perform visual testing in playright so what does this means visual comparison or visual testing so basically let's say for example we have opened a web page and we will capture the screenshot of that particular web page and that will be saved as a reference screenshot for the future execution and whenever we second time we are trying to run the test and that will capture the actual page screenshot and it will Compares with the expected reference screenshot so basically it is a comparison of the two screenshots if there is a difference we will get to know like what is the difference between the actual and the expected screenshots so let's go to the vs code and let's see how to perform the visual comparison testing in the playright so here I'll quickly create a one speec file so here here I will give the the spec file name as visual testing dopc do JS that's it so here I will go to the one of the test simply I will take the copy of this test and I'll come back to the visual testing dopc file so here I will keep only the skeleton of the play right test so that's it now I will update the test name as visual comparison testing in play right so that's it guys now what I will do is so simply I will navigate to the web page here now let's discuss what is the scenario we are going to automated it so we will open the github.com /login page so so we'll open this particular page and we'll capture the snapshot of this particular page and we will keep it and whenever we execute it second time or third time and so on so it basically compares the actual screenshot with the expected snapshot screenshot so simply I will copy this particular URL and after that we will take the snapshot of this current page and here I'm adding the URL inside the go to Method so firstly we have navigated to the this URL now so here I will give the a wait do page dot so here I'll say wait for timeout so here I'll give the some 3,000 milliseconds that's it guys now to take the screenshot or to take the snapshot very first time when you are writing the auto test so simply you need to use the await keyword followed by you need to use the expect function here inside this you need to pass the page object and followed by you need to call to the one function called to have screenshot and inside this we have to give the snapshot screenshot reference name so here I'm giving snapshot screenshot name as GitHub page do PNG that's it guys so simply I will save the test and I will run it and if you see here under the tests folder right now there is no reference created and if I run this test it will create the one snapshot folder inside that we will be finding the one PNG format screenshot of the current web page now now I will run the play right test and if you see here guys so our test will get failed very first time and it says that a snapshot does not exist at this location so this is the expected failure guys when you are writing the or when you are implementing the script very first time you will get this exception so you can ignore it so simply you can delete this one and now if You observe on the left side so there is a folder created called visual testing dopc do JS iy snapshots inside this folder so there is a screenshot created with PNG format if you see here so this particular name what we have given and followed by that the browser name and followed by that based on your number of operating systems it has given the win32 so if you look at the folder name also this is the spec file name followed by the Snapchat shots right so now the snapshot is present here and if I rerun the same test this time it will perfectly work fine so our test will get pass there will be no issues and if you see here our test is working fine and our test is getting passed right so now what I will do is so I will go to the this login page and simply I will click on this username and I will enter something in this username field then there will be some difference in the actual web page actual screenshot and the expected screenshot then our test will then our test case will get failed so here I will use the ID of the web element so simply I will press crlf and here I'll press the Ash and followed by the ID value so I have return a simple CSS selector now we are able to identify the username text box and here I will use the AIT keyword followed by Page object dot so here I'll say do locator and inside the inside the locator I will add the CSS selector value firstly I will click on the username text box and after that I will enter some data inside the text box so here I'll say fill method and here I'll just write the some text inside the text box as tester stock that's it guys so whatever the image we have captured inside the snapshot right so this image does not have the entered data screenshot here right so this time our test will get failed so that is the expected failure so so basically we are performing the two images comparison using the playr tool so that's it guys now I will run the test now sorry guys so what we have done is just we have return return the locator and we have performed the action but we haven't compared it after that right so if you see here guys so after writing some data into the text field and we have to again verify this particular image right so simply I will take the same line of code that's the line number nine and I'll paste it after entering something in inside the text box right so in the line number n we are comparing the two images and in the line number 14 we are comparing the two images so this is the before actions to two images comparison and in the similar way here I'll say so this is the after action two images comparison right so that's it guys now I will execute the test once again so this time so it will get failed our test will get failed in the line number 14 so when we are trying to compare the two images in the second time so if you see here guys the error is very much clear so screenshot comparison got failed right now let's open the report so here I will go to the index.html report and I will open the HTML file and if you see here guys so these are some details about the screenshot sorry F and here you can see that where exactly it got failed and if you see here guys so there is another section got added image mismatch if I scroll down a little bit so we have the screenshot section and also we have the traces section but if you see here so we have the additional section got added when you are comparing the two images by using play right so that section name is image mismatch colon you can find the screenshot name and this is the difference guys so this is the actual image and this is the expected image and if you see the difference image so only the text what we have entered in the web page is only the difference right so this is how you can compare the two images in the playright automation tool hi friends this is bakaa in this chapter four of playright full course we are going to see what is environment file and how to create environment file and also we will see how to access the environment file configurations in the play right test and next we are going to see what is data driven testing and how to do a data driv testing using Json file and also we will see how to perform the data driv testing using CSV file in playright and next we are going to see how to run the playright test on the multiple environment such as Q environment stage environment broad environment like this and next we are going to see what is Page object model and why page object model is required and also we are going to see how to implement the page object model in playright and next we are going to see how to do video recording of the automation test execution in playright and finally we are going to see how to make the full screen browser using playright in this playr tutorial we are going to see how to create environment file and how to add the configurations into the environment file and also we are going to see how to use the configuration data in the playr test so before we get started with the spec file creation so you need to install one package called EnV so simply you can open the command prompt and you and you can enter the npm space install space. EnV and space hyph iPhone save so once you execute this particular command this will installs you the EnV package into your playright automation framework so once the installation is done so you can see here one package is looking for funding so it is already added the one package maybe if somebody is interested they can give the funding to what work on this particular package so if you see here guys already one package is added and once the once the installation is completed like this you can go to the vs code and open the package.json file and if you see here in the line number 14 dependencies part so there is a one package got added right so whatever the installation we have done so that package is added over here so once the installation is completed you will be seeing the this particular package name and respective version over here in this dependencies that's it guys so this is how you can install the EnV into the playright automation framework now let's quickly create a onepc file so here I'm creating a one speec file called read EnV file dopc do JS so that's it so here I will go to the one of the test and simply I will take the copy of this test and I'll paste it here and here I will delete the all the stuffs which are not required for us and then I will update the test name as read EnV file in play right so that's it guys now let's look at the manual scenario and we will automate that particular scenario then we will create the EnV file and we will add all the configuration in that EnV file then we'll see how to read the EnV file in playright so let's discuss the manual scenario first so firstly I will open the google.com and once we enter this URL we will inspect the search text box here and we will enter something here and then we will press the enter from the keyboard that's it guys so simply I will take the URL and I will go to the vs code so here I'm using the await followed by page. go to and simply I'm adding the URL here so once we open the browser so it will navigates to the this particular URL now we have to inspect the search keyword so here I'll say search with keywords so let's inspect the search text box here so there are multiple attributes and values over here so I'm using the ID value I'll take the ID and here I'll press hash and the value so I have written the simple CSS selector by using the ID I'm identifying the element so we have identified the search text box and here I'm using the AIT keyword followed by Page object dot so here I'll say locator and inside the locator I will add the CSS selector value then firstly I will click on that particular text box then I will use the same locator and then I will enter the data into the text box by using the fill function so here I'll say play right by testers talk that's it so once we enter the Search keywords so we will press the let's enter the play right by tester stock so once we got the results here right so we to get the results here we have to click on this search icon or we have to press the enter from the keyboard so we will press the enter from the keyboard so I will use the same locator and after that so simply I'm calling the one function called press and inside this I'm passing the value as enter that's it guys so let's wait for some time once we perform all the actions so here I'm saying wait for timeout so you can give any number of milliseconds here that's it guys so let's verify this test is working fine or not then we will quickly create the EnV file insert the playright automation framework then we will see how to read the EnV file and if you see here guys so we are able to search with playright by tester stock in the Google search page right and our test is working fine right that's it guys now what I will do is inside this our project I'm going to create a one file called ENB that's it guys so I have opened the file so here I'm adding the configurations you can add any configuration say for example I'm adding the first configuration as environment so here you can add the respective value and let's add the URL here and we can add the respective value we can add other fields also username so I will enter something some data over here and I will enter the key as password so we can pass the some password value here and so let's pass the URL here so in our case if you read if you see the our spec file so we have the URL right so we will read this particular URL from the environment file so simply I will cut this particular URL and I'll paste it inside the EnV file that's it guys so right now as of now we are reading only this URL and also we'll try to read the username and password but we are not using these values anywhere in the web application but I will show you how to read the other fields data as well just by using the key that's it guys so I will go back to the spec file and here we have to enter the URL right so you can simply use the process do EnV dot so simply you need to enter the key name here so that it pulls the respective data from the EnV file so in our case I want to read this URL so that's the reason simply I will pass the URL as the key here that's it guys so we are done with reading the data from the EnV file from the play right so once you save the both the files now let's try to run the test and later we will read the username value and password value from the EnV file see guys we are getting some error so it is saying that b expected string but got undefined so we are getting this particular error so we are missing one thing so what you need to do is so simply we need to go to the playright do config file right so here so you need to enable one line of code here in this configuration file so that is the line number eight so make sure that if this line is not there simply you can add the required inside the required specify the EnV and then do configurations so by default this line will be com commented in your configuration file and if it is not there make sure that you are adding this line and once you have added this particular line so this time we should be be able to read the configuration data in the play right test and if you see here guys so test launched the browser and it has entered the URL as a google.com so previous previously it was not able to get the URL because we have not enabled to read the data from the EnV configuration file and if you see here guys our test is perfectly working fine right so there are no issues at all now let's try to read the so here it say username and password so let's read the this username and password from the configuration file so here I'm writing simply console DOT log so here I'll say username is then simply I will use the process Dot and here I will specify the username user uncore name so this is the key what we have used in the configuration file so let's read the password as well in the similar way so while you are working in the realtime projects so you can always specify the all these configurations in the EnV file so simply I'll pass the here password as the key so that's it guys now let's run this test so we should be able to pull the URL username and password from the configuration file using play right so our test is working perfectly fine so let's look at the output as well and if you see here guys so we are able to read the username and as well as password so this is how you can create the configurations in the playright automation framework and this is how you can read it in the play right automation test in the previous playr tutorial you have seen how to read the EnV file that means the configurations from the EnV file and how to pass on to the playr test you have seen it in this playr tutorial we are going to discuss about how to perform data driven testing using Json file in play ride so here I will navigate to the vs code and I will create the one spec file as data driven testing Json dopc do JS so that's it so here I will go to the read EnV file spec file and simply I will copy the test here and I'll paste it here so that's it guys and here I will rename the test name as data D testing using Json file in play ride so that's it guys so let me explain what we are doing in this playrate test so in the line number seven so we are navigating to the URL so we are reading the URL from the configuration file so we are reading it from the EnV file so we are reading the google.com so after entering the google.com then we are identifying the search text box then we are entering the text as playright by tester stock then we are clicking the sorry we are pressing the enter from the keyboard that's it guys so we are not doing much here so use case is very simple so we are going to the google.com and we are searching with the some keywords now if you see here in the line number 11 so we are passing the some test data right so we will how to pass this particular test data from the Json file so before we go ahead and create the test data file so let's run this test and we'll make sure that this test is perfectly working fine so that's it guys so if you see here output our test is getting passed so this is the expect Ed behavior and so let's start creating the test data now so already I have created a folder so let me delete this particular folder so let's start creating it from the beginning just now I have tried it so I will create the one folder called test hyphen data and inside this folder I'm creating the another folder called keyway and based on the environment we we can create the multiple folders here and inside the qway I'm creating a one Json file called google. Json so here I'm giving the file name as Google because we are keeping the Google Search keywords inside the Json file so that's it guys I have opened the Json file now so simply I will create the one Json object here so here I'll say the object name as module one test data that's it guys so simply I will open and close the flower brackets so here we have to add the keys and respective values guys that's it so here I'm adding the three keys and three values that's it guys so here I'm giving the key name as skill one and here I'm adding the value as I will go to the data driven testing Json spec file so I'm passing the very first search keyword as playright by tester stock so this is the very first search keyword so then so this is the very first key and value and second key is skill two so here I'm adding the value as Cypress by tester stock and I'm adding the skill three as JavaScript by tester stock so that's it guys so I don't want to create more data so I think three sets of test data is enough for me so we will see how to pass all these test data to the playr test so we have the test data file is ready now so let's go to the spec file and here what I will do is so I need to use this particular test data so that's the reason we have to import the this particular file in the data driven testing Json spec file so that's the reason here I will say import and followed by that I'm storing into the one object so that's the reason simply I will give the object name as same name whatever we have in the Json test data file that's it and now what I will do is simply I will write the keyword as from and here we have to pass the location of the test data file where we have where actually we have created the google. Json file so we have to specify the path of the test data file so here I'm writing two dots that means it will focus on the our current project directory and here I will write the Slash and inside this current folder so we have to navigate to the test data then keyway folder so here I'm selecting the test data slash giveway and slash so if you have created multiple test data files so you need to select the respective test data file that's it guys now we have imported the our test data file in the current spec file now so simply we need to take this object moduel one test data say for example I want to pass the test data from Json file to the this particular line in this line I want to pass the test data from the Json file so simply I will remove this and I will add the module one test data dot so if you see here guys it's already suggesting all the keys which are there inside the test data file right so let's pass the skill one now that's it guys now if I run the test so firstly we we should be able to search with playright by tester stock and if you see here guys so it has picked the data from the Json file that is the skill one value and if you see the test so our test is getting passed now this time let's pass the skill three so now we should be able to search with JavaScript by tester stock so here I'll simply pass the skill three and if I run the test so we should be able to search in the the Google search page as JavaScript by testers talk and if you see here guys so we are able to pass the respective test data from the Json file so this is how you can read the test data from the Json file and this is how you can pass on to the playr test so far you have seen how to read the test data from Json file and how to pass on to the play right test now let's see how to perform the actual data driven testing in the sense how to pass the multiple sets of test data to the this particular test right so here what I'm doing is simply I'm writing the one for off Loop so here I'll say for off by using the for off loop I will get all the sets of test data from the this particular Json file and we'll pass one at a time so I will go to the spec file here so what I'm doing is so simply here I'm just using the object dot entries so inser the entries so I will pass the our Json object so that's it guys so whenever we receive received a data from the Json file so that will be in the format of key and value so that's the reason so here I will save that into the key and value format so that's it so once we are having the test data in the form of key and value so simply I will take this particular test and I'll keep it inside the for Loop so that's it guys so we are done with creating the for Loop so we are able to get the test data that means the Json object values in the form of keys and values so here I'm interested in only the value so let's say for example first time our test is running so we are going to pass the play rate by tester stock so whenever the second time our test is running so we'll pass the Cypress by tester stock and so on if you are having a multiple sets of test data like this so that's it guys it's very simple now so simply I will add the single quotes here and within the single course I'm adding the dollar symbol and followed by open and close flower brackets so I'm interested in only the values so I want to read only this these values one by one and I want to pass on to the my play right test so that's the reason so here I will take the only value from the Json object and I will use this particular value inside the out test where we are actually passing the test data in the line number 14 that's it guys so we are done with the implementation of how to pass the multiple sets of test data to the any single automation test so if I run the test so this test will get executed three times because we have the three sets of test data so if I run the test so it will start passing the very first test data called play right by tester stock so it has passed the play right by tester stock and then second time it is passing the Cypress by test stock and third time so it is going to pass the JavaScript by tester stock so this is how you can implement the data driven testing using Json file in playright and if you see here guys so three test cases are got passed right so this is how you can implement the data driven testing using Json file in playright in the previous playr tutorial we have discussed how to perform data driven testing using Json file in this playr tutorial we are going to discuss about how to perform data testing using CSV file in playright so let's navigate to the so vs code so here I'm creating one quickly spec file so before we create a spec file so you need to install one plugin called CSV pars so simply you can go to the terminal or command prompt and you need to install the one plug-in called npm install CSV passs and once this installation is completed so you can cross verify whether CSV hyphen pass plugin is installed in your automation framework or not so simply you can go to the package.json file and inser the dependencies section so you should be able to find the the plugin which you have installed with respect to the even you need to see the which version of the CSV pars plugin you are using it so make sure that this plugin is present over here that's it guys so this is about installation of CSV hyphen pars so let's create the spec file now so here I'm giving the spec file name as data driven testing CSV dopc do JS so that's it guys so I will go to the data driven testing json. speec file so simply I will copy the this particular test and I'll paste it here and here I will modify the test name as data driven testing using CSV file in playright so that's it guys so let me explain what we are doing in this playr test so in the line number 10 we are navigating to the google.com and then in the line number 13 and 14 we are clicking on the Google search text box and after that we are entering the value in the line number 14 then we are pressing the enter from the keyboard and after that we are waiting for some time and then so we are closing the test execution that's it guys and this particular test is surrounded with the for Loop so that means so in the previous tutorial we have seen how to perform the data D testing using Json file so we are getting the Json file and we are simply passing on to the our playrate test so that's it guys now to perform the data driven testing using CSV file so firstly we have to create the test data file so that means we have to create the CSV test data file then we will come back to this spec file and we will delete all the stuffs which are which are related to the Json file so here I will go to the QA folder and here we are going to create the test data file first so here I'm saying new and followed by text document so I will open this document and I will maximize this so all the values you need to write it within the double quotes so here I'm adding three columns and followed by two sets of test data the very first column name is test case ID that's it and the second column name I'm adding it as skill one and I'm adding the third column name as skill two now we have added the columns that means the headers now we have to add the data so every value is separated by the comma so in CSV file that's what we do it now so right now I'm adding the respective data so that's it guys so I'm am adding the three column data here first I will add the test case ID and then I then I will add the skill one then I will add the skill two so here I'm adding test case ideas tcore 01 so this is the second test case tcore 02 and here I'm adding the now skill one so skill one I'm adding it as playright by tester stock in the similar way I will add the skill two for the test case one so here I'll say Cypress by tester stock and then I will come to the test case two that is tcore 02 and here I will add the skill one as postman by tester stock and I will add the skill two as rest assured by tester stock so that's it guys so if you want you can add multiple sets of test data with respect to the test kee cases as of now I have created only two test cases with respect to that I'm adding the skill one data and the skill two data and here I will go to the file and here I'll choose the option as save as so here I'll select the all files and here I will provide the file name so here I'll say test data. CSV that's it guys and I'll save it so we are done with with creating the CSV file if you see here guys so our test file name is test data. CSV so we are done with creating the test data now I will go back to the vs code now so here we have to import three things one is so here I'm saying import FS from so you need to you need to import the file system from the fs that's it and the second thing you need to import the path from the path and the third import statement you need to write that is the parse and you need to get it from the here you can say from and followed by that you can say CSV iphon pass and slash you need to write the sync that's it guys so we need to use these three import statements so once you are done with adding all these import statements now let's write a statement which will fetch the test data from the CSV file so here here I'm writing the one constant variable as records and equal to here I'm saying pars for for this function so we are passing total two parameters one is the directory name file location that is the one part and the second part is so which column you need to take it and how you can skip the empty lines as well so those parameters we are passing on to the par function so here firstly I'm saying FS dot so I'm using the file system dot read file sync and for this function again we have to pass the two parameters one is the directory and another one is the exact file location of the CSV F so here I'm saying path dot join so inside this one we have to actually pass the directory followed by the file location where exactly we have the CSV test data file so here I'm directly saying dot two dots followed by test data and followed by that we are having the keyway folder let's add the keyway folder slash and we have the file name as test data. CSV so let's add the file name as test data. CSV so that's it guys now we are done with adding one parameter now so again now so here we have to pass the another object within this object so I'm passing two values so I'm saying to this play right so consider the columns so here I'm adding The Columns as true I'm setting the flag as true so read The Columns and then also I'm saying skip the empty lines so I don't want to read the empty lines so here I'm passing the value as true so that's it guys now simply I will put the semicolon at the end of the statement and let me summarize what we have done so far so firstly we have installed the plugin called CSV fun parts and then we have created the data driven testing CSV dopc file and we have copied one test so that test case is what it does is so simply it navigates to the google.com and it searches with the keyword basically right and after that we have created the test data file and after that so we have imported all these three statements and after that we have written the one simple statements by using that we are going to read the our test data file and once we are able to read the test data file so rest of the things are very easy guys so simply we have to write the one for for off Loop and inside that we have to use the our records variable so simply I will delete this stuff and I'll add it as a records and here I'll say the variable name as record so now I will delete the things which are related to the Json file so that's it guys now so this record right so this record variable is holding the each time whenever our test whenever our for Loop executes right so it picks the one row of test data that means one test case test data it will pick and it will pass on to the our test so right now we are having only two sets of test data so our test will get executed two times so that's the reason so simply I'll take this record and I'll pass on to the our test method description and here I will say record DOT test case name test case ID so this particular column name we have provided it in the test data file if you remember it so this is the very first column name what we have in the CSV file so that's it guys now so I will take the record and here I want to search with the skill one so here I'll say skill one that's it guys so we are done with implementing the for for Loop statement as well simply we are reading this records which contains the all the test data from the CSV file and we are passing on to the test title and once we have that data in the test title simply we are using that data in the in our test steps so let me go to the test data file guys once again so let me edit with the notepad++ so here I have passed the skill one right so firstly it will search us with the in the Google search text box it will enters the playright by tester stock that is a very first test and second time it will start searching the play rate by tester stock so if I pass skill two first time it will start searching with so I press by tester stock and the second time it will start searching with rested by tester stock so that's it guys now I will come back to the vs code now our test is ready guys now let's run the test so first it should start searching with the play R by tester stock so if you see here guys so we are able to search the the proper key proper data and second time we should be able to search with postman by tester stock and that's it guys if you see here guys our two tests are working perfectly fine so if I pass skill to here so basically whenever it enters in this test right so it fetches the one row of test data every time so you can use any data in that particular row and you can use it in in your automation test so this time I'm passing the skill two so let's execute the test firstly it will start searching with Cypress by tester stock and then it will search us with the rested by tester stock so this is the very first time our test is getting executed and this is the second time test executions triggered and if you see here guys our test is perfectly working fine and also you can see the results over here our two tests are perfectly working fine so this is how we can perform the data driven testing using CSV file in playright in the previous play tutorial we have discussed how to perform data driven testing using CSV file in playright in this playr tutorial we are going to see how to run a test on multiple environments by using the different sets of test data from the different environments such as keway environment stage environment broad environment so let's see one by one so what are the steps you need to follow to achieve the test execution on different environments so firstly here I will create the one spec file inside the tests folder so here I'm giving the spec file name as read data based on environment dopc dot JS so that's it guys so here I will go to the one of the file called Data driven testing Json dopc file so simply I will copy the test and I'll paste it here so that's it guys so here I don't want it I don't want the for Loop so I will delete the for Loop and let me update the test name as so here I'll put the single quotation and here I'm updating the test name as read test data based on different environment in playright so that's it guys so let me try to run this particular test so let me formate the test properly so that's it guys so we have the test ready so let's run the test and we will verify whether this test is working fine or not so before we run this test let me summarize what exactly this test is doing so firstly we are navigating to the google.com and in the Google search page we are searching with the some keywords so let me pass the exact keyword so previously we were reading the test data from the Json file so here I'll write playright by testers stock that's it guys so if I run this test so our test should work fine then we will quickly create the different environment test data file and we'll start reading that data in the play right test so that's it guys so we are able to search the keywords properly in the Google and if you look at this one output so test is getting passed that's it guys now so if you look at the test hyund data folder so inside this we have only one environment right now so the environment name is qway right now so let's try to create the another environment so inside the test hyph data so here I'm creating the another environment called stage so inside the stage folder I'm creating the one Json file as google. Json so that's it guys now I will open the google. Json file which is there inside the qway folder so simply I will copy the this particular test data and I'll paste it inside the stage google. Json file so that's it guys so right now we have the test data and with respect to the based on the environment so let's create the another Json object inside the test data file so I'm adding another object here guys so simply I will take the copy of this so just I will give the different object name so right now we are updating the Json file which is there inside the qway folder so here I'll Seca test data and that's it guys so I don't want to update the Search keywords here and in the similar way I'm opening the stage Json file and I'm adding the another data file here and here I will update the object Json object name as stage test data but in case of stage test data we are going to update the Search keywords so firstly I will write API testing by tester stock and here I'll say spec Flow by tester stock and then here I'll say easy Repro by tester stock so Search keywords are different in the different environments right now so that's all about the creation of the test data file guys so now so let's read these two test data file inside the spec file now so already we are reading the QA test data Json file so here we have to just specify the object name so let's add the object name here so I will copy this Json object here and I'll paste it here so that's it guys in the similar way so I'm trying to read the test data file that's a Json data file which is there inside the stage as well and here I need to update the Json object name so I will open the stage Json file and simply I will copy the Json object name and I'll paste it here and here we have to update the path as well so I'm now updating the path as stage so that's it guys so this is the location where we have the test data for the keyway environment so this is where we have the test data for the stage environment right so once we are done with reading the test data from the different location so here I'm using the one concept called test. describe so this particular describe function is used to create the group of test cases to align on the test data say for example we have the one test data so it can be the QA test data or stage test data so that variable we should be able to use across the all the tests which are written inside this particular spec file so that's the reason I'm using this test. describ grouping approach to align on the test data so here we can provide the any module name or anything so here I'll say model one test then I will put comma then I'll write the arrow function then I will close and open the flower brackets and inside this so I'm going to write the one hook called before before all so that's where we are deciding from which environment data we need to read it so here I'm using test dot before all so here we can provide the name as running before all test and that's it then we can put the arrow function they can then we can open and close the flower brackets inside the before all function so here I'm writing very simple if condition guys so if so basically I'm reading the configuration data from the EnV file if you look at this particular configuration data so here we are adding whether we want to run our playright test on the giveway environment or the stage environment so I want to read this particular configuration so that's the reason here I'm using process do EnV do EnV and if it is equal to the QA then I'm creating a one Global variable called let so here I'm saying the variable name as test data equal to null so initially the test data variable will be assigned with a null value and after that so we will use this particular null sorry test data variable so if it is the environment value is QA then simply assign the QA test object test data object to the test data that's it guys and here I'll write the another else statement and here I will assign the stage test data to the test data variable So based on the environment you can write the multiple if and else statement guys so based on the configuration based on the environment configuration so we are going to read the respective test data from the different Json files that's it guys we are done with writing the main configuration code now so we have the test right so let me copy this test so I'll cut it and I'll paste it inside the test. describe all so let me format it properly and that's it guys so if you look at here so what we have done so firstly we are reading the test data from the different environments and here based on the configurations from the EnV file so we are deciding which test data file we need to read it so right now so we are done with writing the all the test data to the respective variables here now we have to use this particular test data variable by using this one we can access the respective values so in the line number 26 we want to read the tested data from the different Json files based on the environment so simply I will use the test data dot so here we have to specify the key name say for example I want to read the skill one data so I want to read the playright from the qway environment if configuration is qway right so that's the reason I need to specify I need to specify the this particular key over here after the test data that it guys so let's say now our configuration is QA so it is going to read the QA Json file so it is going to pass the playright by testers talk so this is what it is going to search in the Google search page so that's it guys so I have saved the test now let's try to run it so if you see here guys so google.com has opened and and now we are searching with play right by testers talk right and if you see here so our test perfectly working fine let's say if I put two here now this time it is going to search with Cypress by tester stock so let me run the test once again so still we haven't updated the configuration right now our tests are running using the keyway environment test data so this time what I will do is I will update the configuration as stage so here I will go to the EnV file so here I will pass the value as stage so that's it so let me go to the stage test data file so if you see here guys the skill two is spec flow right in this case so now we should be able to search with specflow by tester stock in the eyi test so that's it guys we have done the configuration change now our configurations are pointing to the stage environment so let's run the test we should be able to search with specflow by tester stock and if you see here guys so we are able to search the data with the proper keywords so if I pass the one here skill one and we should be able to search with the API testing by tester stock so this is is the stage test data so let me run the test once again so if you see see here guys so we are able to search with API testing by tester stock and our test is perfectly working fine so this is how you can configure the data for the multiple environments such as QA environment stage environment Dev environment or it can be the prod environment also and this is how you can read the test data from the different environments and pass on to the playright test in the previous play tutorial we have discussed how to read the test data from the different environments and how to pass on to the play test so in this tutorial we are going to discuss about how to implement page object model in play ride so let's understand why page object model is required and what is Page object model and what are the advantages of using the page object model and what are the disadvantages of using the page object model and also we will see playright sample page object page and also we are going to see the sample page object test as well and after that we we will start implementing the page object model in the playright framework so let's see why page object model is required so if you look at this particular diagram guys and in the line number 19 we have we have added one locator so here I have highlighted all the locator wherever we have used a locator so right now we have hardcoded all the locator values right so this might be used in 100 test tests right say for example suddenly developer changes changes to the Dom details so I need to run through all the 100 automation tests and I need to update all these locators right so that will be a very tedious task for me so that's the reason so it is very important for us to implement the page object model in playright automation framework so let's understand what is Page object model first so page object model is a design pattern to create the object repository for the web page elements and every web page will be containing the corresponding page class so for example if I take an example of Google page so firstly we have the homepage so we will be creating a one class called homepage and if I search something in the Google search page so we will get the result page so we'll be creating a separate class called result page so like that for every web page there will be a corresponding page class created so if you're implementing the page object model in your automation framework so page class contains all the page elements of that page and also it contains the page method methods which performs the operations on those particular elements so for example so I have opened google.com I want to search with the keywords so those kind of methods or the actions can be implemented in the same page let's say we have created created a homepage So within that we should be able to identify the web page elements and also we should be able to implement the methods which performs the search of the keywords so at high level this is what all about the page object model so let's see what are the advantages of using the page object model so code will be cleaner and also it is easier to understand because we'll be having a separate pages and also we'll be having the separate automation test so our in our automation test we will be calling to the our page object model all the methods wherever it is required and object repository is independent of test scripts so obviously because object repository is nothing but the page object page what we have created for example homepage result page so like this so these are independent of the automation test test right the next Advantage is test script will be optimized because of the elements respective abstraction methods are in the page classes so our test will be optimized because we have implemented the abstraction methods in the respective page object classes itself and coming to the disadvantages so time and effort so you need to give a more time and effort initially when you are working when you started working on the project and after spending some time so less effort less effort and time is required to implement the page object model and it is the this particular implementation is only specific to the particular project so you cannot use this particular page object model for the another project so that is the second disadvantage now let's look at the how exactly sample page object page looks like so firstly we have included the page sorry we have included a playright model and after that we have created a simple class and that is the exportable class guys and within that class we have declared one Constructor within the Constructor so page object initialization is done and after that we can start adding like this n number of elements within the Constructor itself and then you can start creating the all the abstractions methods say for example I want to search with the search key keywords in the Google so that method will be implemented in this particular page itself so you cannot Implement in a different page so whatever the actions you are performing in that particular page that methods or those kind of methods can be implemented in the same page class so this is how exactly looks looks like the sample page object page of the play right now let's look at the sample page object test how exactly it looks like so firstly you need to include the uh play right module and after that so you need to import all the pages what you have created for example we have created homepage result page playlist page so like this you need to import it and after that so you need to create the object of respective page object Pages then you can start creating then you can start calling the methods which you have implemented inside the page object Pages for example if I take the example of this homepage so we have implemented one method called go to so if I go to the if I go to homepage here you can see that go to method is implemented inside the homepage and if I see the another method where we have called in the line number 14 Search keywords so if you see here guys so we have implemented that particular method within the homepage itself so this is how exactly looks like the sample page object test now let's start implementing the page object model in the play right firstly let's see the manual scenario then we'll come back to the vs code and we will start implementing the page object model in play right so firstly we will navigate to the google.com so this is the homepage for us we will be creating one homepage JS file and in the homepage so we have to implement one method to search the keywords also so here I'm searching with play right by test as stock and we have to press it enter from the keyboard and once we got the result p page so we'll be creating another class called result page and then we will click on by by using the link text we will click on the play right by tester stock so this is the second page that's the result page and this is the playlist page guys so we are going to create the total three pages one is homepage result page and then third one is playlist page and once we are in the playlist page so simply we will click on the very first video in this playlist so this is a scenario guys what we are going to automate it by using the page object model in play right so let's start creating the pages first so here I will navigate to the vs code and here I'm creating a one folder called pages so inside the pages I'm creating three Gs files first one is homepage Dot JS that's it and I'm creating the second J JS file as sorry result page.js and I'm creating the third Javascript file as playlist page.js so that's it guys so we are done with creating the pages now so firstly I will go to the homepage .js and here we have to include the very first playright moduel so here'll say include playright module that's it so here I will use the require and inside the requir so simply I will add the at theate play playright SL test then I'm assigning back to the constant variable object so here I'm adding inside the flower brackets here I'm adding it as the expect object so that's it guys so we are exporting this particular playright test in the current JavaScript CL JavaScript class so by using this expect so that we can assert the sum of the elements that's it guys now so we have to create the class create class so here I'm saying class followed by class name so here I'm saying class name as homepage and simply I will open and close the flower brackets so as I said these classes are exportable so that's a reason so here I'll say exports dot homepage that's it guys now we are done with creating the class so inside this class so firstly you need to write the Constructor so here I'm saying Constructor and which is accepting the page as the parameter so here I'll say page that's it guys so inside the Constructor we have to initialize the page object then we have to store the all the elements so here let say elements so that's it guys now to use all the page page functions or page methods so above the Constructor you need to do you need to write it as one for Slash and two star and that's it guys so this is the GS doc command so you need to add it about the Constructor to use all the functions from the page object so here I'll say simply import so let's remove all the stuff from here inser the brackets so here I'm saying directly at the playright SL test and after that here I'm saying Dot Page that's it guys now we we can use the all the page object methods inside the Constructor or in the abstraction functions now let's initialize the page object to the current page variable so here I'll say this Dot Page equal to page so that's it guys now we have done the page initialization and now we have to go to the this Google.com we have to inspect the search text bar search text box sorry and here here we have to search with the some keywords right so let's inspect the search text box and if you see here guys so it has lots of attributes and values so here I'm using the ID of the this particular text box so simply I'll press hash and the value if you see here guys so we are able to locate the search text box by using the ID so I'll take this locator and here so I'm using the this Dot and here we have to specify the variable name as search text box that's it then now we can use the page object to find the element so here I'm saying locator and inside that I'm adding the locator value guys that's it it is very simple so firstly we have created a Constructor within this we have done the initialization of the page object then we have created the one simple locator that is the text box locator so that's it guys we are done with creating the search text box locator now so firstly we will Implement one simple method that goes to the our google.com so simply I will take this s and I'll come back to the vs code and here I'm implementing the one a sync method so here I'm saying the method name as go to that's it guys so here I'm using the AIT as is well so this is the way of navigating to the URL so I'm using the a followed by page this. page do go to so inside this function we can add the URL so that's it guys so firstly we can call to this particular method so that we can navigate to the URL so once we navigated into this URL so we have to perform the search functionality in this Google homepage so let's Implement a method that performs the search functionality so here again I'm implementing the as sync method called Search keywords and this particular method is accepting the one parameter so we need to pass the search keyword to this particular method let's say in this in our case we are searching with the playright by tester stock so that keyword has to be passed onto the this particular method whenever we are calling to the Search keywords then so firstly I will check whether that element is enabled or not then we will cck click on that particular element then we will enter the sum data so here I'm using thewa followed by to check the enablement of that particular element so we have to use the expect object inside this so again we have to use this dot sorry guys so this Dot and so we want to check this text box is enabled or not right so let's take this element and now here I'm saying to be enabled if this element is enabled simply click on that particular element and after that once we click on that element sorry guys so here let's remove the or expect object so expect I don't want to use it because we will be using expect only to assert something so here I want to perform the click operation on this text box and after that I want to enter something so simply I'll take the locator and after that I will say fill method and inside this we have to pass this particular parameter so whatever we are passing it from the test so we should be able to search with that keywords and that's it guys so after entering the Search keywords so we have to press the enter from the keyboard so that's a reason I will use the locator and followed by that I'm calling to the one method called press so here I'm passing the value as enter so that's it guys we are done with implementing the homepage so let me summarize what we have done once again so firstly we have included the playright module then we have created a class inside the class so we have created a Constructor which contains the initialization of the page object and also it contains the elements and then we have implemented simple two abstraction methods one is going to the URL and second one is which searches with the keyword so that's it guys now let's copy this same skeleton of the class and I will go to the result page and I'll paste it here and here I will give the class name as result page and I'll pass the same class name here as well and that's it guys so now once we are in the result page so let's say here I want to search with play right by tester stock and here we have to identify the this particular playlist play right by tester stock so I want to identify this element by using the link text so that's the reason I will go to the class so let me delete all this stuff which is not required so here I will say firstly I will add the element name as playlist link that's it and here so here I'm using the get by rule as the locator value and inside this one so firstly here we have to say link and followed by that so we have to pass the object so name equal to some value so what is the text you want to pass it here so here we have to pass the text as play right by test as talk so that's it so we are identifying this particular playlist by using the link text right so here we have added the proper link text here that's it guys so we have identified the play playlist link now so I will take this playlist firstly I will check whether it is enabled or not so I will keep the as it is 20 line number and then so after that so here we have to say here I'm calling one method called first so I want to focus on the first element in the similar way I'll take this element and then I want to Simply click on that particular element guys that's it so we are done with implementing the click on playlist so that's it guys so we have REM renamed the function name as click on playlist and I don't want to accept any parameter over here so let me summarize what we have done in this result page so simply we have copied the same homepage and here we have updated the class name and after that here we have identified the playlist link by using the link text and after that I have written a simple function that will clicks on the play right by tester stock playlist that's it guys so let's copy the same skeleton and I will go to the playlist page so let's update the firstly class name so it'll say playlist page and let me add the same over here as well and that's it guys so once we click on the click on the this particular playlist so we have identify the this particular first video so here I'm identifying this particular element by using the CSS selector I will inspect this element and if you see here guys so which contains the thumbnail IDE is a thumbnail and idea is a container so if you look at the root tag and firstly I will identify by using the ID of the ID value that is a container and followed by that I will pass the ID value of the ID value as thumbnail so simply I will copy this container then I'll press contrl F then I'll press hash value and followed by this Arrow I'm giving and after that hash so simply I'm passing the thumbnail here so that's it guys if you see here guys so this particular element is so if you look at this selector and it is highlighting the very first video in this playlist so I will take this particular CSS selector and I will go to the playlist page.js file and here I I will rename the element name as video link and if you see here guys in this web page so this element is matching with the 20 elements but I will focus on the very first element by using the first method and I will perform the click operation on this particular video and so here I'll say locator and here we have to specify the locator value so simply I'll pass the locator value so that's it guys now let's implement the our abstraction method as click on video and here I will use the video link element then I will identify the first element and after that simply I will perform the click operation guys so that's it so very simple changes three changes we have done so firstly we have updated the class name then we have added the video link in the play playlist page and after that we have implemented one simple method that will performs The Click operation on the video guys that's it it's very simple guys so we are done with implementing the all the pages now let's quickly create the one spec file so here I'll say page object test. spc. JS so that's it guys so here I will go to the one of the test and simply I will copy the skeleton of the play right test so I'll paste it so I will delete all the stuffs which are not required so that's it guys so here I will update the test name as page object model in play right so that's it guys so let me list down what list down all the steps what we are doing here firstly we will go to the URL and after that we will search with so it will say search with keywords and once we search with the keywords we have to click on the playlist and after that so we need to click on the video as well in the inside the playlist so it will say click on video so that's it guys so steps are very simple now we need to start importing the all the pages inside this spec file so here I'll say require and inside the requir so we have to specify the path of the all the pages here guys so here set two dots and followed by that we have the pages folder and inside the pages we have the homepage and I will assign back to the constant object so it'll say constant so here I'll type the H page so like this I will import the rest of the two pages guys so I'll copy this and I'll paste it two times so let's import the result page here and then let's add the object name as result page and let's import the playlist page as well and and let's Ascend back to the playlist object so that's it guys so we are done with importing all the pages what we have created so far now firstly we have to navigate to the URL right so this navigation method is implemented inside the homepage if you look at this one so in the line number 19 we have we have implemented a method called go to and inside that we are navigating to the URL to use this particular method so so I need to create the object of this particular class so let's create the object of this particular class so here I'll say new followed by homepage so this homepage Constructor is accepting the page as the parameter simply pass the page as a parameter then we can assign back to the one constant variable then here we can save homepage as the variable that's it guys so firstly we have to navigate to the URL I will use the homepage object by using that I'm calling to the one method called go to so that's it but before that we need to add the one keyword called await so this is a very common keyword you'll be using while writing the play right test so that's it guys now let's try to run and see whether it is working properly or not then we'll start implementing the rest of the steps so it has has to navigate to the URL and that's the simple test so we'll make sure that this test is working perfectly fine and if you see here guys it is launching the browser and we are able to navigate to the URL and our test is getting passed right now let's Implement let's implement the rest of the steps now so we need to start searching with the keywords right sorry guys and here I will use the homepage object and for by I'm calling to the method called sear keywords so this method is accepting the one parameter guys if you see the homepage so this method is accepting the one parameter as a search keyword right so let's pass the keyword as play right by tester stop that's it and after that so we need to click on the playlist so this click operation we have implemented inside the our result page if you see here so click on playlist we have implemented inside the result page to call this particular method so we have to create the result page object so that's the reason so here I'm creating the result page object so it will say new and followed by that result page and also we have to pass the page as the parameter and we can assign back to the variable so it'll say result page so by using the result page I can click on the playlist right so it'll say click on playlist so once we click on the playlist now so it goes to the playlist page right so in this playlist page so we are clicking on the playlist video right to callate this particular method so again I have to create the another object of the playlist page so let's start creating the object of the playlist page and also we need to pass the page as the parameter then let's assign back to the variable called playlist page and that's it guys by using this object so I will call to the method called click on video so that's it guys it's very simple now right so after completing all this execution flow I'm writing AIT followed by page so here I want to wait for the time up so we can see the execution properly guys so that that's the reason I'm writing the some weight or here so our test is ready so firstly we are navigating to the URL and then we are searching in the Google search page then we are clicking on the playlist then finally we are performing The Click operation on the playlist video guys so that's it it's very simple test what we have implemented so far so let's run the test now so it has navigated and it has searched with the keywords and also it has clicked on the playlist and here we should be able to click on the video see guys so our test got failed so let me check what is the issue here so it is saying it is disabled actually so let me check once again so I will put some weight out here so that should be fine so here I'll put some weight as 2,000 so let's run the test now so if it is not working we will just uh remove the assertion for the enablement of the element so if you see here guys so our test is perfectly working fine so we can put the more weight word there and we can check it so YouTube is a heavy loaded application so that's the reason you need to use the sometimes so manual page in the automation test so it is started searching with the keywords and it is it has clicked on the playlist and it has to click on the first video in the playlist that's it guys so we are able to perform the action actions properly so that's it guys so so this is all I having in this session so this is how you can implement the page object model in playright in the previous playr tutorial we have discussed how to implement page object model in playr in this play a tutorial we are going to see how to do video recording of the automation test execution and also we are going to see how to attach the video recording of test execution into the playr test report so here I will go to the vs code and so I will try to run the one of the spec file so that is actually getting failed and we will check the report so we are not finding the any video attached into the playr test report and after enabling the video recording for the test execution then we should be able to find the video added into the test report so our test will get failed guys so this is the expected Behavior so let's ignore this and I will open the play right test report and that's it guys so if you see the report so we are finding the error information test steps and screenshot and at the end we are finding the traces so we need to enable one configuration by using that we can capture the video recording of the automation test execution and also we can attach into the report based on the demand so we can pass the multiple configuration value so we can pass whether you want to whether you want to capture the whether you want to record uh a video during the first retrive failure or on just a failure so like that configuration data we have to pass it in the playrate configuration file guys so I will close the report now we'll come back to this report after enabling the configuration in the playright config file so firstly I will enable the configurations and again we will reexecute the failed test. speec file so here I'm opening the play R.C config.js file and here under the defined configuration and you'll be finding the another Json object as used inside this you need to add the one configuration so here you need to say video colon and here you need to pass the two configurations one is mode so for this mode so we can pass the different values so here so based on the need or the demand you can pass the value so in my case I want to record the test execution retain on failure say for example if you have enabled retry mechanism you can uh select the third option so in my case just for the demo purpose I will select the retain on failure so that it is going to capture the it is going to record the test execution when our test is getting failed and also it will add into the play right test report and here we have to pass the another parameter so that is the size of the video so firstly you need to pass the width so normal width is it's a 640 so you can give the different value also that will also work out and here you need to specify the height so what is the height of the video so in my case I will specify the 480 so that's it guys this is what the simple configuration you need to enable in the playright configuration file so once the configuration is done so let's go to the our spec file now so that is the failed test. spc. JS file so let's execute the same spec file and we will see whether playright is recording the video of the test execution or not and also we will see whether it is attaching the video recording into the playright test report or not so that's it guys so our test will get fail so this is the expected failure so let's open the report once again and this time we should be able to find the video recording of the automation test execution and if you see here guys so here you can see that so this is a traces and this is the video added into the this particular test execution firstly you will see the errors error section and after that test steps and after that you will be finding the screenshots and then traces and if you see here guys so it has recorded the video of the test execution and also it has added into the report also right guys so if I go down so you can you can play the test execution video as well guys here only you can see like what is happened so firstly it has opened the youtube.com and then it will start searching with the keywords and it goes to the play right and that's it guys so this is the 30C video so this is how you can enable the video recording of the automation test execution when your test cases are getting failed so you can pass the particular configuration value as retain on failure right so let's say for example I'm not bothered about the failures I want the test test execution recording all the time so in that case you can simply pass the on here so for example so I will go to the one of the spec file where it is getting passed but still we will see the video is added into the play right test report so here I will open one of the spec file as page object test. spec file so I will run this spec file so it is a very simple test it goes to the google.com and it will search us with the keywords then it goes to the one of the playlist so it is getting failed guys so what I will do is simply I will put little bit of weight over there so here I'll go to the spec file and here I'll put a little bit of weight there as a 4 seconds and I will rerun the test so you can take any spec file which is perfectly working fine and you can simply run the test and uh we will see you can observe in the playright test report whether playright is adding the video recording or not so this time our test should work perfectly fine and if you see here guys our test is getting passed right now let's go to the report now so we have already opened the report so let me refresh this report and if you see here guys we have executed the page object test dope. JS file and here only you can see that video has added into this particular test execution and if you if I come come down here so here you will be finding the video section right so based on your need guys you can enable the configurations in the playright config do Json sorry JS file so this is a complete execution of the test case right guys so that's it guys so this is how you can do the video recording of the automation test execution in the play right in the previous playrate tutorial I have discussed about how to do video recording of the test case execution in this playr tutorial we are going to see how to maximize browser in playright or how to make the full screen browser in playright so here I will go to the vs code and I will open the one of the spec file and if I run this test guys so our browser is not Maxim Max imized and also you can see that it is not a full screen browser right if you look at the browser so we will see how to maximize the browser in playright or we will see how to make the full screen browser in playright so that's it guys so there are two ways so you can go to the play R.C config.js file and here you can make the configuration change so this is the one way and the second way is you can go to the function where exactly are launching the browser or entering the URL and there you need to just set the view Port size so that's it guys so here I'm just using one statement as await so before we navigate into the URL I'm writing a one simple statement over here guys that's it so here I'm writing a wait followed by that so I'm using the page object by using this one here I'm saying set view Port size and inside this we have to pass the object so first one we have to pass the width and if you see here guys so it is accepting two parameters one is width and the height so you can pass the custom size of the browser guys so here I will go to the one of the my browser and I will open the console and simply here you can type the outer width and that gives you the outer width of the browser and in the similar way you can get the outer height as well so these two numbers we have to pass over to the set viewport of the size method so width is 1366 so let's pass the width as 1366 so we can pass the custom size of the browser guys so that's the window size of the browser so let's pass the firstly width here I'll say 13 66 and in the similar way we can pass the height as well so we can pass the height as 728 so I will pass the height as 728 so that's it guys so I saved the this particular function now I will rerun the spec file so this time if you see here guys so our our browser got maximized and also you can see the full screen browser so this is how you can enable the full screen browser using playright our test is executing in the full screen browser and also you can see the result here so our test is getting passed right and here you can see the check mark also so this is how you can maximize the Browser in Play right

hi friends this is bakaa welcome to playrate full course in this chapter one of playrate full course so we will see how to get started with playright so we will be seeing very first topic that is the playright what is playright and what are the advantages of using playright and limitations of playright and how exactly playright works so we will see the playright architecture and then we will see uh what is the difference between playright and Cypress playright and selenium web driver and what are the softwares you need to install to work with the playright so basically you need to install the visual studio code and also you need to install the nodejs in your system and then we will see how to install playright using the visual studio code and also we will see the play right folder structure and then we will see about the test Explorer where you can see number of spec file and how you can run the specific spec file and how to run the specific test on the different browsers like Google Chrome browser Microsoft edge browser and webkit browser and also Firefox browser and then we will see how to record a test in vs code using the playright and also we will see how to generate the playright HTML test report and we will see what is recorded cursor in playright and next we are going to discuss what are the commonly used terminologies in the playright automation testing tool and then we&#39;ll see how to write first play right automation test then we will see what is pi locator in playright and next we are going to discuss about how to install playright using the command prompt and how to run play test in headless mode or headed mode using the terminal or the command prom command prompt and then we will see how to run the specific spec file in the playright and then we are going to see how to run playright test on the different browsers and then finally we are going to see how to use code gen to record the playright automation test in this playright tutorial we are going to see what is playright what are the advantages of using playright and of course we will see the limitations of using the playright automation tool so let&#39;s understand the first what is playright playright is an open source automation testing tool which is used used to perform the end to end testing of modern web applications mobile applications in the headed mode or the Headless mode so let&#39;s look at the what are the advantages of using the playright automation tool the first one is cross browser testing you can run playright automation test in the different browsers such as Chrome browser edge browser chromium and also you can run your test in the Firefox and webkit browsers and second advantages of using the play rate automation tool is it supports for the crossplatform testing so you can run your automation test in the different operating systems such as Windows LX and also you can run your test in the Mac operating system next one is cross programming languages support so you can write the automation test in the different programming languages such as JavaScript typescript python net and also you can write your write your automation test in the Java programming language which is very popular and next advantages advantage of using the playright automation tool is you can run your automation test in the web browser and also you can run your automation test in the mobile emulation of the Google Chrome for Android and also you can run your mobile mobile automation test in the mobile Safari also and next one is auto weight so whenever we are performing any any action on the web element so there is auto weight mechanism is present in the play right automation tool so by using that so you&#39;ll be seeing the very very less flaky test and next one is tracing in this tracing basically whenever test got executed which has 10 steps so you can see in each step what happened and also you will get the network details also what is the call it has made and what is the response it got you can see each and every details in each of the steps by using the tracing or Trace F also so one these are the same thing and it has the inbuilt reporting mechanism uh by using the reporting mechanism where you can see the number of tests got executed and how many are passed and how many are failed and also you can see how many tests are skipped also and next advantage of using the play rate automation tool is dynamic weight assertions where you can say for example you have asserted something or you are trying to validate something in the web element sorry in the web page so already weight is present so you can basically modify this particular weight and you can increase or decrease it so it has the inbuilt default weight time that&#39;s a polling time so it basically checks that particular element is present or not basically whenever element is present basically it will perform the asset operation and next one is it&#39;s a faster and reliable so definitely so play rate is very faster than the selenium and also you can compare to the Cypress also so play rate has the many features compared to selenium and Cyprus and also it is very faster and it&#39;s very reliable for example if I am running a one particular test 10 times it will gives you it will gives you the same result so that is the best thing best best thing about the playright automation tool and next Advantage is powerful tool tooling because of these features first one is cod by using Cod gen you can generate the automation code basically it is a uh recording the test and second feature is playright inspector so by using this playright inspector you can basically identify the element by using that element locator you can basically perform any action on that particular element or the locator and third point is how why we are saying a this particular playr tool is a powerful tool right so third one is Trace viewer so basically in this case you can track each and every details whenever test is got executed you can see what is happened in each of the steps by seeing the network details and also basically you can perform any action or basically you can identify the element by using the inspector so when you are viewing the trace viewer details and last Advantage is no flaky test so because of Auto weight and dynamic weight assertions so these are the two automatic weight mechanisms are present in the play automation tool so that&#39;s the reason you will not see the flaky test in the playright automation test while writing it and let&#39;s look at the limitations of using the playright automation tool the first one is so play right has the less Community Support compared to the selenium web driver because it is came into the market very recently so selenium is present in the market from long time so that&#39;s the reason you will see the less community support for the play rate and second limitation of using the play rate automation tool is it does not support for the Legacy browser such as I 11 browser so that&#39;s a Internet Explorer 11 version browser and the third limitation is it is not possible to test your mobile apps in the real sorry guys in the real device so that&#39;s the third disadvantages disadvantage of using the playright automation tool in this play right tutorial we are going to see playright architecture how exactly playright works when you write your test when you trigger the playright automation test so basically you will see the three components over here and two Protocols are being used in the playright architecture so let&#39;s look at the components first the first one is client component where we are writing the playright automation test by using the JavaScript Java python C and many other programming languages and second component is that is the play server and third component is browser engines it can be the Chrome Firefox webkit and other browsers also so as I said we are using the so sorry as I said so play is using the two protocols the first one is websocket protocol and the second one is play rate is using the another protocol called CDP that that is nothing but the Chrome Dev tools protocol so very first protocol protocol is being used between the client and the playrate server that is the web socket protocol and the second protocol is being used between the playrate server and the browser engines so that is comes over here so let&#39;s look at how exactly this playrate architecture works here so what is the workflow of the play rate architecture so let&#39;s understand one by one components so in the client we are writing the playrate automation code in the different programming languages such as JavaScript python C and etc etc and coming to the second component that is a server so where we are actually it is communicating between the client and the web browser engines so it can be the Chrome Firefox and Edge browsers so these are the browser engines so basically this particular play right server is communicating the communicating between the our code that is the client and the web browser engines and if you look at this particular line so playrate uses the CDP to communicate between the different browsers to communicate with the chromium or the Chrome browser so it is using the inbuilt protocol that is the Chrome tools protocol so to communicate with the Chrome browser or a chromium so play is using the CDP protocol to communicate with the other browsers such as Firefox webkit so it has implemented the W1 CDP protocol similar to the CDP it has implemented the another protocol to communicate with the other browsers it can be the Firefox webkit and other browsers also and let&#39;s look at the next point that is the web socket protocol so basically it is websocket is connection is established to the server from the client if you look at this particular diagram so client will establishes the web socket connection to the playright server where once the connection connection is established by using the process called websocket handshake so websocket handshake sorry web soet sends the response as as soon as it gets the real time request for example whenever client has sent the request to the play server through this particular protocol immediately it will respond to the client and all the communication happens between the client and the playr server or the only single connection that&#39;s all about it and as as usual we are using the CDP to communicate between the play server and the web browser engines and let&#39;s look at the last point that is the how exactly communication happens between the client playright server and as well as the web browser engines so firstly whenever we trigger the automation test execution what happens it will convert client will convert into the client will convert your automation code into the Json format and sends it sends to the server or the web socket protocol so as I said so basically client will convert your automation test code into the Json format and it will create the connection to the server by using the websocket protocol connection and it will pass the Json format data to the play right server and once the server received received the Json format data so basically it will respond back to the client by communicating to the web browser engines and play communicates all the request or a single web soet protocol connection so let&#39;s say you have triggered 10 automation test for the execution so all the 10 test execution will happen over the only single web socket protocol connection only so it will never close the connection after executing each of the test so all the test execution will happen over the single protocol connection that is the websocket protocol connection and if you look at the very last Point test failure and test fless is very less as because all the test will be getting executed over the single web socket protocol connection so this particular connection will be never terminated until unless it is terminated by the client or the server in this playr tutorial we are going to see what is the difference between playright and Cypress automation tool so let&#39;s look at the very first future that is a programming language support in case of playright so it supports for JavaScript typescript Java Python and c.net but in case of Cypress automation tool so it supports for only JavaScript programming language so the second point is browser support in case of playright it supports for multiple browsers and also it support for the mobile emulation for the Chrome and as well as a suffar but in case of Cypress automation tool so it supports for only for four browsers one is Chrome Edge Firefox and electron browser and the third difference between playrate automation tool and uh Cypress automation tool is framework so in case of playrate so it supports for moocha gist and Jasmine but in case of Cypress Cypress supports for the only mocha framework the fourth difference is operating system in case of playright so we can use Windows Linux and Mac but in case of Cypress it support supports for the windows L Linux and also it supports for the Mac but it supports for only the 10.9 and a versions only and the next difference is open source so Play Ride is completely open source automation testing tool but Cypress is few features are not available in the open source Cypress automation tool so few features if you want it so you need to buy the whole Cypress tool and the next future is support so playrate is a new automation testing tool so that&#39;s the reason you will find the bit less community support but Cypress coming to the Cypress side so it has a bit strong community support because it is uh in the market from uh few years ago so that&#39;s a reason so you will find the more support from the community side whenever you stuck in the any project or with any issues so many people will be able to guide you and the seventh difference between the playright and Cypress is so in case of play right so it does not support for the testing the mobile app in the real devices but in case of Cypress so you can test the mobile app in the real devices by connecting to the cloud and the eighth difference between playrate and Cypress is reporting in case of playright you can generate the report directly within few seconds but in case of Cypress it is not possible so you need to install the third party plugins and then you can generate the reports for the automation test execution in this playr tutorial we are going to see what is the difference between play rate automation tool and selenium web driver so let&#39;s look at the first difference programming language support in case of playright automation tool so it supports for the JavaScript typescript Java Python and c.net but in case of selenium web driver so it will support additionally so it will support all the programming language which supports for the playright additional to that so it supports for the Ruby perland PHP programming language and the second difference is browser support in case of play right it supports for the Chrome Edge Firefox chromium mobile Chrome and also it supports for the mobile Safari and additionally it will support for the webkit browser but in case of selenium web driver so it does not supports for the webkit browser so selenium web driver supports for the Chrome browser edge browser Firefox browser Safari browser and Opera browser so selenium web web driver does not support for the web kit browser and the third difference is framework in case of playright so it supports for the gist jasine AA mocha and vest but in case of selenium y driver it supports for multiple Frameworks such as Jasmine mocha web driver IO test ngj unit and any n unit also and coming to the fourth difference between the playright and selenium web driver is operating system support in case of playright it supports for the windows Linux and Mac OS but in case of selenium web driver it supports all the three operating system plus additionally it supports for the Solaris and the fifth difference is open source yeah in case of playright so it is a completely open source automation tool which is developed by the Microsoft but in case of selenium web driver so selenium web driver is also the completely open source framework sorry open source API which is developed by the community and the sixth difference is support so playrate has the less community support because it is a new tool so very recently came into the market so rapidly it is growing the its Community but coming to the selenium web driver so it has the very large community support and also very well documentation and the seventh difference between the play right and selenium web driver is mobile app testing in case of play rate it is possible but in case of selenium web driver it is not possible so it is possible in the selum web driver also but we have to use the third party tool called APM by by using that we can perform the mobile app testing coming to the next difference that is a speed so play rate automation tool is very faster than compared to the selenium web driver so selenium web driver is very slow compared to the playright automation tool and next difference is reporting so playright by default it provides the reporting mechanism but selenium does not provide the reporting mechanism we have to use the third party tool called test NG extent report or Allure report like that and the 10th difference between play right and selenium of driver is auto weight in case of play right automation tool automatic weight is available whenever we are trying to identify any web Element Auto weight is there automatically it will pull the element and it will check whether it is available or not if it is available it will perform the action on that particular web element so that that mechanism is there in the play rate but in case of selenium driver we have to write the custom code to check the element and the 11th difference between play rate automation tool and the selenium web driver is architecture in case of play rate headless browser with the event driven architecture but in case of selenium web driver it is a four layer architecture so the first one is we have the selenium client client library and second one is Json wire protocol and fourth one is sorry third one is browser drivers and fourth one is browsers so it&#39;s a four layer protocol and the next difference is prerequisites in case of play so you need to install the nodejs but in case of selenium web driver if you want to write the selenium automation test you need to have the API and drivers to perform the action on the web application so that&#39;s this is all about the difference between the playrate automation tool and the selenium web driver in this playr tutorial we are going to see what are the software requirement for the playright full course so basically you need to install the nodejs first then you can install the visual studio code and we will be using the JavaScript for writing the late automation test and anyway you&#39;ll be having the operating system it can be Windows operating system Mac or LX so in the next tutorial I will be showing you how to install nodejs and visual studio code and also how to verify whether these two softwares are installed or not in your system that we are going to see in the next playr tutorial in this play right tutorial we are going to see firstly how to install the nodejs you can go to the google.com and here search with download nodejs and here you can go to the official link of nodejs and based on the operating system you&#39;ll be finding the nodejs software here so firstly it is listing the windows Mac OS and then Linux and based on your number of bits of operating system you can click on that respective uh link and that will downloads you the nodejs software in my case mine is Windows so here I have downloaded the MSI 64bit because my system is 64-bit and once I click on this one it will start downloading the software so simply I will give the one of the location and that&#39;s here I&#39;ll say save and simply I will pass this particular download as well because in my case I have already downloaded it and once the download is completed so you will find the nodejs software like this so in my case I have downloaded little bit uh long back and once you downloaded simply double click on this particular. exe file that is a nodejs exe file the installation is very simple so you have seen how to download the nodejs software in your system and once you are having the nodejs software in your system simply double click on that particular software and the first window will open like this click on next and select this checkbox that is I accept the terms in the L License agreement and click on next and click on next installation is very very simple guys you can click on the next button once again and here also you need to click on next and after clicking on the install button it will take few seconds to install the software in your system and then finally you can click on the Finish button and once the installation is completed simply you can go to the command prompt in your system and simply so let me open the command prompt over here and once the node is nodejs is installed in your system simply type node space hyphen V and if nodejs is installed properly in your system and automatically it will returns to the version of the nodejs so this is how you can download and install the nodejs now let&#39;s see how to install the visual studio code you can go to the google.com and here search with download vs code so vs is nothing but Visual Studio code and here you can go to the very first link that is the official website of the visual studio code and here based on your operating system you will be finding the vs code software so in my case it is a Windows I have clicked on this particular windows and if your system is Mac you can click on this Mac and if your system is red hat or Fedora or you want you can click on the respective links so in my case as I said it is a Windows I have clicked on this particular windows and then I got this particular dotexe file and simply double click on this particular software installation is very very simple simply you need to click on the next next next and finish it once the installation is finished simply in the start type Visual Studio code so in my case it is already installed so simply I I&#39;m selecting the visual studio code so it will open the window like this and if it is Visual Studio code is successfully installed so in my case I have already opened one of the folder like this from the file that&#39;s it guys so this is how you can download and install the vs code in your system in this playr tutorial we are going to see how to install playright using visual studio code so there are very easy and simple three steps which you need to follow the first one is step one you need to install one extension called play right test for we PS code and step two is then you need to press control shift p and then you need to enter install Play rate then finally in the step three you need to select the play rate configurations and then you need to click on okay button and you need to wait for a couple of seconds to complete the playright installation in your system so let&#39;s navigate to the vs code and let&#39;s see how to install Play right in vs code so here you need to create a one new folder that is a empty folder in my case I have already created play tutorial full course empty folder if you look at here so this folder is empty so I&#39;m going to open this particular folder from the vs code you can go to the file and here select open folder and select the newly created folder that&#39;s it so let&#39;s install the extension first so you can go to the very last icon that is extensions you can click on that icon and here you type play right test for vs code and if you see here so this is the extension and if you look at the develop developed by so it is so this particular plugin is developed by the Microsoft so simply click on the install button so it is already installed now and if you see here you are getting the uninstall button that means so this extension is installed in your system and you can go back to the Explorer and here now you need to press the control shift plus P so here you need you need to type install play right so in my case I have already in I have tried installing it so that&#39;s the reason you can see the very first option and also you can see the recently used recently used command so simply you need to type the install playright and then select the install playright and after that here you need to select the playright configurations so here I&#39;m selecting all the browsers chromium Firefox webk so we are using JavaScript for the automation code so that&#39;s the reason here I&#39;m checking this particular checkbox if you are using typescript by default it will take the typescript as the configuration and here I&#39;m removing the add GitHub actions workflow as of now it is not required so that&#39;s the reason I&#39;m removing it and then you can click on the okay button that&#39;s it guys so if you look at here in this terminal so it is started installing all the required playright libraries and plugins and also slowly it will start even downloading the all the browser exe file also so if you look at on the left side package.json file created and also nodecore models also created package hyphen log. Json file Al created and also you can see the tests folder tests hyphen examples folder so if you see here it has installed the playright in your system in this playright tutorial we are going to see default playright folder structure so let&#39;s navigate to the vs code so this particular installation we have done in the previous playright tutorial so let&#39;s look look at the all the folders and at high level we will see what exactly it contains so firstly we have the node nodecore models so this particular folder it contains all the GS file that is a Javascript file and also it contains all the plugins which are required to run the JavaScript code and as well as the playright automation test coming to the second folder that is tests so if if we look at the example dot spec. JS file so it contains very basic two test cases so if you look at the sample test so here they are navigating to the URL and here they validating something they have provided the that means Microsoft has provided the sample very basic to automation test that&#39;s it and if I come to the next folder that is the tests hyphen examples so if I open this demo hyphen to do hyphen app. spc. JS file so it contains multiple automation test cases so by using this also we can explore how to write the playright automation tests so basically it is a kind of advanced advanced level playright automation tests by referring this you can learn how to write the automation code at high level and coming to the next file that is the package.json file so in this file so it contains the all the dependency details if you look at in the line number 10 so far it has installed the two plugins one is playr test and another one is types node and also you can see the respective version also if I install any plug-in so automatically that will be added over here so basically at high level package.json file it contains the dependency details and the last file is play. config.js JS file that is so if you look at this particular file so it contains the all the playrate configurations here you can specify where exactly your automation tests are present and whether you want to run the automation tests parall or not you can also specify how many times you want to retry when test is getting failed and also you can specify the whether you want to generate the report or not after the execution and also you can specify the all the different types of browsers also if you look at all the this configuration so at high level if you think about the play. config file so it contains the all the configurations which are required to run the test basically for example you have a automation test you want to run it in the Chrome browser so that configuration can be done here and also you want to run your test in the Headless mode that configuration can be added or updated in the play. config.js file so this is all about the default playright folder structure in this play tutorial we are going to see how to run playright automation test in the visual studio code and also I&#39;m going to discuss about test Explorer where you can uh run your automation test in the different browsers and also you can filter the automation tests and also we can run our debug the playright automation tests so let&#39;s see how to run the playrate automation test first and then we will move on to the test Explorer so here I&#39;m navigating to the vs code so as I said earlier all our automation tests are present under the tests folder so here I&#39;m opening the example do spec. GS file and if you see here so currently it has two test cases that is a line number four and line number 11 and on the left side you can see the one icon simply you can right click on that particular icon and you can see the multiple options here you can run the test and also you can debug the this particular test here as of now so let&#39;s run the test directly you can click on this particular icon it will run the play right automation test or you can right click on this icon and select the option as run test So currently it this particular test is running in the Chromium browser and also our test is getting passed right so let me run the second test also simply I&#39;m clicking on that particular run Icon and also here here you can see that browser name and also here you can see the status of the automation test execution so this is how you can run the any playright automation test from the spec file now let&#39;s move on to the test Explorer where you can execute the all the automation test at one go on the left side you can see the very last icon that is a testing simply click on that particular testing and here you will get the test Explorer icon and on the top side you can see that the configurations so default configuration is chromium if I want to run my test on the Firefox simply I need to select the Firefox here that&#39;s it guys so right now my playright automation test tests are getting executed in the headless mode and also let&#39;s add the one of the flag in the playright configuration so if I add one flag so that will run our playright automation test in the headed mode so after the line number 29 in the line number 30 I&#39;m adding one flag called headless colon and here I&#39;m adding the bullan value as a false that&#39;s it guys so let&#39;s make sure that our automation test is getting executed in the headed mode so once again I will go back to the example. speec file and then we will move on to the test Explorer once again so let&#39;s run the test so this time browser should open up so if you look at this one so browser is getting opened and also our test is getting passed also so let&#39;s try to run the second test also so it has opened the Chromium browser and also our test is getting passed right so that this is it guys very simple flag we have to add it in the play. config.js file so that will run your automation test in the headed mode headed mode or headless mode so right now I have added buan value as false if I make it as a true then it will run our automation test in the Headless mode so I want to run my all the automation tests in the headed mode only so I will go back to the test Explorer so as I said that is a very first configuration so by default our tests automation test tests are getting executed in the chromium and if I select any of the other browsers so it will get execute on the different browser browsers also and also you can debug the test so at the project level and also if you see here so we are getting only the tests folder under the tests if that particular spec file is present all the specs spec file will be coming inside the tests folder so right now only one spec file we have so that&#39;s the reason you can see the only one spec file and this particular spec file has two automation test right so you can execute the this whole spec file by clicking on the run test icon and also you can debug the spec file by clicking on the debug test icon and also you can specifically if you want to run a specific test in those cases you can select that particular test and you can click on the run test and also you can debug this particular test by clicking on the debug test and also you you can in this test Explorer you can also filter the spec files and also the automation tests if you click on this particular icon so you can filter the automation test based on the fail tests and only executed tests and also you can filter the play right automation test in a active file manner also and also you can write write the fuzzy match based on that also all the spec file and automation test will be be listed over here and based on that you can trigger the automation test execution so let&#39;s run the this particular spec file so if I click on this run test so it is going to run the these two test in the parallel mode because if you look at this particular configuration file play. config.js file so let it finish the execution then we will go back to the playright configuration file so if you look at the result also our two tests are getting executed so here in this configuration file in the line number 16 so by default flag is true that&#39;s the reason our two tests are getting executed parallely so if I want to run my test sequentially simply here you have to pass the F flag as false that&#39;s it guys so now it is reloading all the test and I will come back to the test EXP Explorer here and once again I will trigger the example dopc dogs file so I started the ex execution now so right now it is executing the very first s case and then it started the second s execution that&#39;s it guys so this is all about how you can run the play rate automation test and also how you can use the playright test Explorer to maintain and manage the automation tests in this playrate tutorial we are going to see how to run playrate automation test on the Branded browsers such as uh Chrome browser Microsoft edge browser so let&#39;s navigate to the vs code and let&#39;s understand how to run the playright automation test in the different browsers so this is a test Explorer from here also you can run the your automation test in the different browsers so if you look at the test Explorer beside that there is the configuration you can click on that Arrow icon say for example I want to run my automation test on the webkit browser so simply we need to select this particular webkit so it will start executing the all the playright automation test on the webkit browser so if you look at the result so our tests are working fine right so this is a one way guys now I will go back back to the Explorer and the second way is you can open the play.con JS file and here so you need to comment the line number from line number 37 to the line number 50 that&#39;s it guys now we will execute the all our playright automation test in the edge browser firstly so if you look at the line number 63 from 60 3 to 66 you can uncomment the line that&#39;s it so I will go back to the our tests folder inside the tests we have the example dopc file so currently we are having the only two tests so let&#39;s try to run the one by one these two tests so simply I will click on this icon it will start executing the automation test on the edge browser so later we will see how to execute the playright automation test on the Chrome browser also so if you look at this one so it has opened the edge browser and also it has executed our test so let&#39;s run the second test also and if you look at this test results so previously it has executed the automation test on the Microsoft edge browser so let&#39;s trigger the second test also so because of some reasons that was disabled so that&#39;s the reason previously it was not executed so our test second is running and also you can see the test results also so sorry guys and it is executed on the Microsoft edge browser now I will go back to the test Explorer from here also we can run the all the test so here I&#39;m going to trigger the our spec file for the test execution so it should execute all our playright automation test on the edge browser you see here so it is able to execute the all our automation test on the Microsoft edge browser so in the similar way we can go back to the Explorer and also we can modify the code in the configurations so so far we have executed play rate automation code on the Microsoft edge browser in the similar way we can execute the play rate automation test on the Google Chrome Google Chrome browser also so here I&#39;m uncommenting the line number 67 to the 70 Line number that&#39;s it guys so you can see the name as Google Chrome and that is the desktop Chrome so now I will go back to the example dopc file to load the configuration it will take few seconds and if I execute the very first test and it should run on the Chrome browser and if you see this particular browser also so it is St executing the test on the Chrome browser and also here you can see the test results so you can run your both the test from the Explorer so it has loaded the configurations now I will execute the spec file which has the two automation test so right now it is running the first test and then executing the second test also and also you can look at the results also so our two tests are getting executed on the Google Chrome browser so this is how you can execute the playright automation test on the Branded browsers like edge browser and Google Chrome browser in this play right tutorial we are going to see how to record a playright automation test in Visual Studio code and later I will discuss about where exactly playright HTML test report will be generated so let&#39;s discuss the manual scenario then we will record that manual scenario by using the playrate Coden so here I will open this particular URL that is the github.com followed by the buaka and then I will click on sign in link then I will click on the text box that is the username text box so let&#39;s enter something here and I will come to the next text box that is that password and let us enter some data over here and then we are we are going to click on the signin button and if you see here so we have the error message displayed over here in the alert so finally we will validate this particular error message by using the play right automation tool so this is the whole end to end scenario what we are going to automate it by using the record and Play Future by the play rate automation tool so let&#39;s navigate to the vs code and here you need to navigate to the testing that is a test Explorer and if you see the down left side so there are multiple feutures are listed by the play right and simply you need to click on the recorded record new and if you see here so play right code gen started running and it brings up the browser basically so here we have to enter the URL first so let&#39;s copy the URL so this is a browser opened by the play right so here first firstly I will enter the URL and it opens up the GitHub page and then we are going to click on the signin link and then we are entering the username so let&#39;s enter some username over here then I will click on the password text box so let us let&#39;s enter some data over there and then we are going to click on the signin button and if you see here so error message is displayed and we have to verify this particular error message so there are three ways we can validate this particular element or particular text box sorry text displayed on the web page so if you look at this particular grid so that&#39;s a particular part of the UI so it has multiple options over here so if you look at the last three options the very first option is assert visibility so basically if I click on this particular particular assert visibility so it validates the whether element is displayed or not and the second future is we can assert the text basically it it validates whether particular text is present or not and also the last future is you can basically verify the specific value from the web element so I want to verify this particular text which is displayed on the web page so that&#39;s the reason I will select the assert text here and once you click on this assert text and you need to click on the text which you want to validate it so once you click on that particular web element and here you will it will open the one popup window and simply you need to click on the accept button that&#39;s it guys and then simply you can close the browser and if you see here in the visual studio code so already it has generated the all the code what we have performed a actions in the web page so let&#39;s navigate to the Explorer here so by default automatically it has created the test hyph 1. spc. TS file so you can rename this particular file so in my case I will give the file name as so by default it will create the TS file so you can rename that that into the JS as well so here I&#39;ll say record test dopc dogs that&#39;s it guys then I will save it so let me explain you the code as well so in the line number four it is navigating to to the URL then we are clicking on the signin link then in the line number six and seven firstly we are clicking on that particular username text box and then we are entering this data and next we are clicking on the password text box and we are entering the data in the password field and in the line number 10 we are clicking on the signin button and finally we are validating the whether that particular text is displayed on the sorry guys so finally we are validating that particular text is displayed on the web page or not so let&#39;s run the play right test and if you see here so it has launched the browser and it basically it&#39;s performing all the actions perfectly fine and also you can see here so our test is getting passed and also over here also you can see that our test is getting passed and also you can see the in which browser our test is getting executed right so now this time what I will do is so now test is getting passed and it is able to validate the text which is displayed on the web page by using the two content text right so here I will enter the different text so which is not matching with the web element text right so this time our test should get failed basically right so let&#39;s run the playright automation test now and this time it should get failed so it has opened the browser then it has to click on the signin link and then it will enter the username and password then it will verify the displayed text right so if you look at here so it is showing in the line number 11 so it&#39;s getting failed over here so it is not able to match the actual value and expected value right so this is the expected result and also test is getting failed and also here you can see that one test test is failed right so this is how you can record a playright automation test by using the Cod gen extension in the vs code now let us see about the playright HTML test report so where exactly this report will be generated you can navigate to the vs code and over here you can see that by default automatically one folder one folder will be created whenever you run playr automation test the folder is playr hyphen report inside this you will find the index. HTML report you can go to the location of this particular file and where you can find the HTML report simply open that report and if you see here so this is a total number of test cases and this is a pass count this is a fail count and this is a flaky count and skipped count so in our case only one test is there and that is getting failed so let&#39;s click on the failed one and here you will see the test so this is a spec file name and this is a test case name so simply you can click on the test case name and here you can see the firstly test name and also spec name spec file name and also here you can see the in which browser this particular test got executed and if you see here so this is the expected value but we are getting this particular value from the web page right so basically it is not matching the actual and expected value so this particular test what we have created just now by using the record and play feature by the play right tool and also we have executed this particular test and if you come down so here it will list down all the steps that particular test contains and also you can see that in which Step so our test is got failed also and also here you can see on the right side the the number of seconds or minutes it has taken that particular step so let&#39;s go to the vs code now so this time what I will do is so here I will pass the correct value in the expected right this time our test should get pass so it has opened the browser and it has to click on the link and then it will pass all the data and it will click it will click on the sign in button and also you can see here so our test is getting passed now and in the test results also you can see that our test is getting passed so let&#39;s navigate to the report now so you can refresh this particular page that&#39;s index index.html and here you can see that so our test is getting past and here you can click on the test and you can see the all the steps which this particular test case has and our test is getting passed also right so this is how you can record the playright automation test and also you can generate the playright test report in this playr tutorial we are going to see record at cursor future so what does this means right say for example we have the automation test already return and you want to add some validation in between the test and that code can be generated by using the playright recorded cursor feature so let me go to the web page uh this particular scenario what we have recorded in the previous playrate tutorial so we nav navigated to this particular URL and then we clicked on the signin link and here we have entered some data over here and and then we are click clicking on the signin button right so here if you want to perform some other actions for example in our case what we are going to do is so we will verify this particular button is displayed or not and then we are going to click on this particular button so visibility of this but button we we haven&#39;t checked it or we haven&#39;t written that particular set of code right so we will insert this particular visibility of this particular signin button code in the already existing play automation test right so let&#39;s navigate to the vs code now and here I will go to the file so already just now I have tried it so let me delete this particular file so what I&#39;m doing is simply I will copy the record test doc. JS file and I will paste it inside the tests folder then I will rename the file name as recorded cursor test dopc dogs so that&#39;s it guys so if you look at this particular code also automation test in the line number four we are navigating to to the navigating to the URL we are clicking on the link and we are entering the username and then password here in the line number nine and after the line number nine so directly we are clicking on the sign in button right here if you look at the line number 10 so we are clicking on the signin button directly so what we are do we are going to do is by using the record at cursor future by using that feature we are going to insert the code after the line number nine so we will check the visibility of this signin button so in the realtime project you can insert your number you might be having a scenarios where you want to uh add a specific scenario code or where you want to generate set of codes also so in my case I&#39;m generating only one line of code after the line number nine here so what you need to do is simply you can go to the testing grid and here you can come down and on the left side down you can see the multiple Futures are here and you need to check the show browser check box and you need to click on the recorded cursor and if you see here so it will brings up the browser code gen and here we have to enter the URL so let&#39;s enter the URL so before you enter the URL what you need to do is simply you need to stop the recording so you need to click on this particular record so recording will be disabled and here I&#39;m entering the URL so it is all about what does the record at cursor means says that inserting the set of lines or set of code generation will be done in between the automation test at a nutshell so we navigated to this URL and click on sign in so let&#39;s enter some data over here and then that&#39;s it guys now what you need to do is again you can go back to the vs code and now once again click on the recorded cursor so I will open the same browser where we have navigated by using the GitHub page and if you see here on the top side so we got the set of features enabled by the playright so I will go to the vs code and if you see here so I will place my cursor after the line number nine because we want to validate this particular sign in button is visible or not so I want to insert the visibility of the element code after the line number n so that&#39;s the reason my cursor cursor is here in the line number 10 now now I will come back to the browser and here so I will select the assert visibility option then we need to click on the element so which element you want to check the visibility so in our case we want to verify the visibility of the signin button click on sign in and I will come back to the vs code and if you see here in the line number 10 the code is got generated if you see here so after the element at the end you can see that to be visible if it is visible then only it is going to click on that particular signin button right so this is it guys so you can generate n number of lines code by using the playright record at cursor future then simply I will close the browser that&#39;s it guys now let&#39;s run this particular test so I will go back to the recorded cursor test. speec file and here I will click on run test and it should work fine as of now because all the code is working fine in in our case because we do not have the codee which is actually breaking the things that&#39;s it guys if you look at here so our test is getting passed here you can see that check mark and also here also you can see that one test is passed so let me close it once again and also we can run it once again and see the test results so results will be very stable because the functionality is working fine here and also the web page is constant and if you see the output over here so our test is getting passed right now what I will do is so here I will pass the incorrect roll data for example I will pass something else and this time what it does is in the line number 10 it is unable to identify the element so this element is not visible over here so let&#39;s say here instead of sign in I will pass the some other data right so signin button will be not visible and our test will get failed so let&#39;s see the output of the automation test and if you see here so our our test is still running and also you can see the so our test is getting failed in the line number 10 right it is not able to locate that particular element so let me rerun it once again so it has executed in the open browser because we have checked the show browser option so now I have closed the closed the browser let&#39;s run it once again and it will get failed in the line number 10 because element is not visible then it will not click on the signin button so it has opened the URL and it performed all the actions and it will be not able to locate the locate the particular element that is a signin button right so this is this is the expected failure right and this is how you can use the recorded cursor feature by the playright automation tool in this playright tutorial we are going to see very commonly used terminologies in playright automation test so these are the five keywords which we will be using while writing the play rate automation test the very first one is require second one is a sync keyword third one is await and fourth one is Page and the last one is expect so let&#39;s look at each keyword what exactly that does in the playright automation tool so the very first one is require so we will use the requir to include the playright model in the current JavaScript Javascript file or to use the playright model in the current Javascript file so that&#39;s the reason we are using the required keyword to include the playrite model in the current Javascript file and the second and third keyword is is async and await so async is a function and AIT is a keyword and that will be written inside the O sync function only so we can write async sorry await keywords or await keywords with the Expressions so we can write zero or more await Expressions within the a sync function and whenever each time a sync function is called so it returns you the new promise value which will be resolved with the value return by the assing function or it can be rejected with the exception so basically it is a similar to the try and catch block guys so whenever a sying function is called so it gets the promise value or it can get the any exception that is the rejected value at high level so let&#39;s look at the another keyword page so it is a browser context object by using this context object we can open the any URL and also we can interact with browser so we can perform the actions on the web browser elements and the last keyword is expect so it is a library for JavaScript and typescript so it is in int intended for using the with the test Runner called just or the play right test so basically we are using a expect keyword to write the better assertions for entn testing and as well as the component testing so assertions we are using to validate whether element is displayed or any web element contains the text value or any web element contains the specific test so those kind of validations can be written by using the expect keyword so these are the very commonly used ter terminologies in the playright automation test in this playright tutorial we are going to see how to write first playright automation test and also we are going to see pick locator in playright so why we are using pick locator is to identify the web page element locator value so by using that we can write the playright automation test so let&#39;s look at the manual scenario first and then we will automate the manual scenario by using the playright automation testing tool so here I will navigate to the first youtube.com and then in the search text box I will enter the Cypress by testers talk then I will click click on the search icon and then here we are going to click on the Cypress by tester stock playlist so here we are going to validate the this web page tab title so if you see the tab title so it is a video description followed by The Hyphen and YouTube so we will validate the title of this web page now let&#39;s navigate to the vs code so here let&#39;s create the quickly one GS file so under the tests folder and I&#39;m adding the one spec file first test do speec dot JS that&#39;s it guys so here let&#39;s list down all the steps what we are going to do it the very first step is we need to include playright module and then second step is we need to write a test then inside the test so we are going to firstly navigate to the URL so that&#39;s the reason here I&#39;ll write go to URL and followed by that so we need to search with keywords so firstly we are navigating to the youtube.com then we will search with the keywords and after that we are going to click on the playlist click on playlist and finally we are validating the title that&#39;s it guys so these are the steps what we are going to implement automation code by using the playright automation tool so let&#39;s include the playright model first so here we have to write the required keyword and inside this we need to pass the at theate SL test so that&#39;s it so we have to assign back to the constant variable so that&#39;s the reason here I&#39;m writing constant and here we have to assign back to the object and the very first variable name I&#39;m giving is test and followed by the expect so we are using a test to create the test cases and expect we are using to validate or to the web element or any text so that&#39;s it guys so this is how you can include the playright model and then so let&#39;s start implementing the test as well so we have to use this particular test object so here I&#39;m using test followed by that we have to add the test name so here I&#39;m adding the test name as validate YouTube title that&#39;s it and then here we have to use the another function called a sync and here I will add the arrow function and followed by this I will open and close the curly braces so firstly I I need to navigate to this particular URL right so simply I will put inside this test now so firstly we need to navigate to the URL so if I need to navigate to the URL we have to use the page object so that page object can be we can get it from the a sync method so here we need to add the page so by using this page object we can interact with the browser so let&#39;s use the page and firstly you need to use the keyword called await and followed by the page dot to go to the URL simply you need to say go to method and inside this we can add the URL so here we have to provide the URL now I will go to the browser and I will copy the this particular URL and I will add it inside the go to function that that&#39;s it guys now we need to identify the this particular search text box by using the pick locator right now what I will do is I will go to the testing here and here if you see the one option called pick locator click on pick locator and here let&#39;s add the URL first so it has opened a browser where you can navigate in the web page so firstly we have to nav we have to find the search text box so simply you need to click on the search text box and you need to come back to the vs code if you see here to accept this particular locator simply you need to if you want to copy this particular locator you need to press the enter to cancel you need to press the Escape so I&#39;m pressing the enter so we have copied the locator now so here I&#39;m using the await keyword so if you do not have any idea about the require a sync await and expect so if you do not know about these keywords you can refer the previous tutorial of this playright full course so here I&#39;m using the playright sorry page followed by Dot and simply I will paste the locator value and then so firstly I will click on the search text box and followed by that once I clicked on the search text box then I will enter the search keyword so here I&#39;ll call to the one method called fill so this will enters the data in the search text box so here I&#39;m writing Cypress by testers talk that&#39;s it so we are done with performing actions on the search text box now we have to click on the this particular search icon as well right so here I will go to the vs code again and I will click on pick locator then I will go back to the browser and simply I will select the web element and I will come back to the vs code and if you see here so we got the element simply press the enter we have copied the locator now so firstly I will check whether that particular search icon is displayed or not so that&#39;s the reason I&#39;m using the one keyword called expect by using this we can validate whether element is displayed or not or whether element is enabled or not so that&#39;s the reason here I&#39;m adding the locator so inside the expect simply we are adding the locator here and followed by that we can call to the one function called to be enabled that&#39;s it so if element is enabled then click on that particular search icon so simply I&#39;ll copy this whole line and then I will remove the expect so expect keyword is used to to assert the element or text from the web page so here I&#39;m simply calling the click method so we are going to click on the search icon that&#39;s it guys now we need to click on the once we click on the search icon so we will get the search results and once we got the search result here so let&#39;s add the Cypress by tester stock and once we click on this search icon we will get the search results and here we have to click on this particular particular playlist right so let&#39;s identify this playlist so I will go to the vs code and I will click on pick locator so let&#39;s identify the playlist and here I will copy the locator and then I will use the await followed by Page object dot so here I will pass the locator then we have to perform the click operation that&#39;s it so we are clicking on the playlist once we click on the playlist so before we click on the playlist so let&#39;s wait for some time so this weight is not required guys so simply for demo purpose I&#39;m writing it page dot so wait for timeout so here I&#39;m putting an explicit weight as 5,000 milliseconds that means 5 seconds then once we click on the playlist we have to validate the title to validate the title so we have to use the await keyword and followed by that we can use the page sorry so we can use the expect keyword because here we are validating the something from the web page so that&#39;s the reason we have to use the expect keyword and inside this we have to pass the page object and if I call here one method called to have title so here I&#39;m calling one method called to have title so this will gets the title from the web page so here we have to add the expected title right so as I said so this particular web page title is combination of video description and followed by hyon and YouTube so simply I will copy this text so right now we are adding the expected test text text in the automation test and followed by this we have the hyphen and Then followed by that we have the YouTube that&#39;s it guys so we are done with creating the end to end test so let me summarize once again what we have done firstly we have included playright module and we started writing the test and followed by that firstly we are going to the URL and we are searching with the keywords then we are clicking on the playlist and finally we are validating the title of the web page so let now let&#39;s run the test so here I&#39;ll click on run test so it has opened browser then it is entering the URL so it will perform the actions very quickly and it is searching with the keywords and it is going to click on the playlist as well and also it is validated the title of the web page and also here you can see the check mark and our test is getting passed right so in the line number 22 let&#39;s say for example if I edit something or if I delete something over here so now this time what happens actual value from the web page and the expected value so these two two values will be not matching and our test will get filled and also we will check the report so I will run the test once again and if you look at here so our test is getting failed in the line number 22 so this is the expected failure right now let&#39;s go to the reports and in the reports also we should be able to see that this particular test results and the status of this test should be failed with the comparing the both the values and if you see here so this is the expected string and this is the received string from the web page right so this is the expected output so if I just modif modify the expected value over here and if I run the test and this time our test will work fine and also we can see the output in the play right test report so if you see here so our test is getting passed right so same should be reflected in the our test report as well so if you see here so our test is getting passed there are zero failures right and you can see the all the steps also so everything is getting passed so this is how you can create the very first playright automation test by using the pick locator in this play tutorial we are going to see how to install play right using command prompt so you need to follow the very simple two steps and then you will have the playright installed in your machine the very first step is so you need to enter the command called npm followed by init play right at the test and after entering this particular command in a command prompt and in the step two you need to select the playright configurations and then you will have to wait for some time and playright will be installed in your machine so let&#39;s do this in the command prompt now so I will navigate to the one of the folder here so I have created a one empty folder here playright tutorial full course 2 so I will go inside this and then I will open the command prompt and here we have to type the npm followed by init then play right at theate latest so that&#39;s it so this particular command we are using using to install the playright in the system so here we have to select the so after entering this particular command we have to select the play rate configurations so here it is asking us whether you need the typescript or JavaScript so in our case we will select the JavaScript and here again it is asking the second configuration so where to put the end to end tests so I will say test test only and then you want to add the GitHub actions workflow so I will say false I don&#39;t required right right now and then so it is asking you want to install the playrate browsers so here it is a true that means I want to install it and it will start installing all the configurations and playright module as well so it will will take few seconds to install the play right so right now it is downloading the browsers and if you look at here so here you see the success and it has created a play right test project at this particular location so let&#39;s navigate to the location so if you see here so playright we have installed in our system so let&#39;s open this particular folder from the vs code and we will see whether we have installed the play right properly or not so we will run the one simple example test from the playright framework so I will go to the file and I will select open folder so this is where we have installed installed the play right so I will select the folder which where we have installed the playright framework so this will have the example test under the tests folder so simply I will open the example. spec. JS file and I will click on the Run button so if play right is installed properly in your system so automatically it will start executing the this particular test so if you look at here so our test is running perfectly fine and also here you can see the check mark so that means play rate has installed all the things properly in your system so this is how you can inst install the playright in your system by using the command prompt in this playr tutorial we are going to see how to run playr test in headless mode and also we will see how to open the playr test report from the terminal and as well as the command PR so let&#39;s run the play test from the terminal first and later we will run run the test from the command prompt so here I will navigate to the vs code and here you need to click on the terminal and you need to use the command called npx followed by play right and followed by that simply you need to type the test that&#39;s it so by default it will run all the test which are present inside the tests folder so I will hit the enter now this particular example dopc dogs file has the two tests and basically by default play right runs all your automation test in the all three different browsers one is chromium second one is Firefox and third one is webkit now it is running our automation test in the Headless mode so that&#39;s the reason you are not seeing any UI so it will take couple of seconds and it will finish as the execution if you look at here so total six total six test were there because right now we are having two test two into three browsers so it will be total six test and all the six test are tests are getting passed over here right so this is the total time taken to execute the all the six test so we can open the playrate test report by using the very simple command called npx followed by playright and followed by show hyphen report so simply we have to enter this particular command so here I&#39;m executing the same command now automatically it opens up the HTML report if you see here the title is play right test report and also here you can see so we have executed only two test and those two tests tests are got executed on different browser if you look at here so firstly it has executed these two test on the chromium and same tests are executed on the Firefox browser and if you see here in the last section so same two test cases are executed on the web kit browser right and also you can see here all the test test cases are passed here and also here you can see the total count also in the pass section and also here you can see that total time taken and also based on the test also you can see that how long that particular test run particular test ran on chromium or Firefox and also you can compare the web kit also so on the webkit this particular test has title took the very less time and then followed by that you can see that on chromium it has took the 4.1 and on the Firefox it has took the almost 13 seconds so this is how you can run the play test from the terminal now we can go to the command prompt here also we can use the same command npx followed by play right and followed by test so this command will run your play right automation test in the Headless mode so if you look at here so it is running six test in a three browsers so we have two test and we have the three browsers so so it will take some time to execute the two test cases in all the three browsers so let&#39;s wait for some time so this is a test case now it is getting executed has title and then and the F and the browser is Firefox right now and also it will run our test on the webkit browser as well finally so we have observed our report also so it is taking more time on the Firefox browser while executing the automation test so command is very simple guys so simply you need to use npx followed by playright and followed by test so it will execute all the test cases or automation tests which are present inside the tests folder so still execution is going on so let&#39;s wait for some more time so now if you see here so at last our tests are running in the webkit browser and if you see here so all the six tests are passing here right so let&#39;s open the report simply we have to use the same command npx followed Follow by playright and followed by show hyph report now we should be able to run the report properly and also we should be able to see it if it&#39;s here and our report is open properly and also you can see the total test count is six because we have two test cases and into three browsers it will be six number it will be six count so firstly it has executed on the Chromium browser and then Firefox browser and finally it has executed playrate test on the webkit browser so this is how you can run the playright test in headless mode and also you can open the report from the terminal or command prompt in the previous playrate tutorial I have discussed about how to run playrate test in headless mode in this playrate tutorial I&#39;m going to discuss about how to run playright test in UI mode from the command prompt so you can use the same command in the terminal terminal also so that will also work fine so you can use this particular command in the terminal or you can use the same command in the command promt also so simply so let me give you a brief idea like what we are going to do right now so we have created this particular project so we have installed a playright in the previous tutorials and we are going to run the example. spc. JS file so it has two automation test one is has title and second one is get started link and whenever I execute a command so these two automation test will be getting executed on the three different browsers one is chromium second one is Firefox and third one is webkit so I&#39;m going to the command prompt now now we will see how to execute Play Right test in the headed mode so simply you need to enter npx followed by play rate and followed by that test and then you need to type to hyphen and then headed so in the previous tutorial we were running our automation test in the Headless mode so we were entering the command npx followed by play rate and followed by test that&#39;s it so if you are adding hyphen hyphen headed that means your automation test will run in the headed mode so now this time you will be able to see the UI so where exactly the tests will be running and you will be able to see the what are the actions are performing in the web page by the automation test test so firstly it is running the Chrome browser chromium automation test and if you see here so two tests got executed so two tests are running parallell if you see the this particular output over here so it is using the two workers so that&#39;s the reason every time it is triggering the two automation test so Firefox execution is completed now it will execute the two test in the web kit browser also right so it is done now let&#39;s wait for the output now and if you see here the output also so because of some reason one test got failed in the Firefox and rest of the five tests are getting passed and also you can see the report got generated and also also it has opened automatically and total we have the six test and five tests are getting passed and one is getting failed right now let&#39;s re-trigger the execution so here I&#39;ll press contrl C and this time our test should work fine so I&#39;m closing this particular report now so it has started already executing the automation test on the chromium and then so it will start executing the playright test in the Firefox browser so this is a Firefox browser test now over test r on the webkit browser and if you see here so we had a six test and all are getting passed so let&#39;s run the report so let&#39;s open the report by using the npx play right show hyphen report so this time all the tests will be passed if you see here so all the tests are getting passed there are zero failures and uh you can use the same command by using this you can run the playright automation test in the headed mode so you can try to run same command in the this particular terminal and if you face any difficulties in doing it you can comment in the comment section so this how you can run the play test in the headed mode or a UI mode in this playright tutorial we will see how to run specific playright spec file so here I will navigate to the vs code and under the tests folder we have only one spec file so simply I will copy this spec file and I will create the another spec file so here I will rename the this particular file with so here I&#39;ll say demo Dot spec do JS so that&#39;s it so I will keep only one test inside the demo do spec. JS file and I will rename the test name with demo 1 2 3 so that&#39;s it guys right now we are having two spec files inside the tests folder right now here I will go to the terminal so you can go to the command prompt or terminal that is fine so you can use the same command so now I will try to execute the only demo do spec. JS file so simply you need to write npx so simply you need to write npx followed by play right and followed by test and hyphen hyen headed so we want to run our test in the headed mode so that&#39;s the reason I&#39;m adding the hyph iph headed and here we have to specify the spec file name so in our case we want to run only demo dopc dot JS file so that&#39;s it so it will start running the our test in the different browsers so firstly it has executed our test in the chromium and then and if you look at this particular output also so all the tests are getting failed so let&#39;s see what what is the issue here so if you see here so it is able to it is not able to load the URL so in my case internet got disconnect connect sorry guys in my case internet got disconnected that&#39;s the reason it is not able to load the URL so let me reconnect the internet so just give me a few seconds guys I will connect the internet back and then our test will be working fine so let me close all the report and I will go back to the vs code now here I&#39;ll press contrl C that&#39;s it so now I will execute same command once again so npx followed by playright test hyphen hyphen headed and we have given the specific spec file name so if you look at here so firstly our test is ran on the chromium and then Firefox browser then finally it is running on the webkit browser and here you can see the results also so our three tests are running perfectly fine and also we can open the report so we had only one test inside the demo. speec file and test name what we have given is demo 123 and the same test is executed in different browsers so that&#39;s the reason we are having the three test in the similar way we can run the another file also so let&#39;s try to run the example. spc. JSL this time so let me close the reporting part so here I will give the spec file name example dopc dot JS so I have given the npx followed by playright test followed by hyphen hyph headed Then followed by spec file name so this is how you can execute the any playright specific spec file so now this time we have two test cases inside the example spec file so that&#39;s a reason we will have the total six tests and it will execute the all the two test cases in the different three browsers so execution is going on currently and finally it will execute the playr test in the web kit browser also so parallel execution is going on if you see here and all the six tests are running perfectly fine and also you can open this particular report and you can verify it so these commands can be used in the command prompt also you can try it and let me know if you are having any issues you can comment in the comment section so this is how you can execute the playright specific spec file in this playr tutorial we are going to discuss about how to run playr test on different browsers using the commands so let&#39;s navigate to the vs code now so if you look at the tests folder we have to spec file and I will navigate to the testing so under the tests folder we have two spec file under the demo spec file we have one test under the example spec file we have two test cases so right now we are having total three automation test so I will go back to the Explorer and I will open the terminal you can use the terminal or you can use the command prompt also so now let&#39;s try to execute the all these three automation test on the chromium you can try to execute on the different browsers it can be Microsoft edge browser or it can be Google Chrome browser also and also you can try to execute on the Firefox webkit browsers also so so right now I&#39;m executing our automation test on the chromium so here I&#39;m writing one command called npx play right followed by that test and here we have to specify Hy Hy project project equal to chromium that&#39;s it guys so if I add chromium then it will run our automation test on the Chromium browser and if I add webkit it will execute our automation test on the webkit browsers so firstly it has opened so because already par mode is on so that&#39;s the reason it will trigger the multiple test cases at the same time and if you see here output so we had three automation test and all are getting passed right so we have executed our test on the Chromium browser right now and in the similar way even we can open the report so let&#39;s open the report and we will validate the browser name also on the report then we will come back and we will execute our automation test on the webkit browser also if you see here so total automation test is three and all are getting passed and here you can see the two spec file under demo spec file we have one test and that is getting passed under example spec file we have two test and that those are getting passed and here you can see the which browser also right now I will come back to the vs code so simply I will quit this reporting and I will close the play right test report now this time I will trigger the our play right test on the webkit browser so I will remove chromium and here I&#39;ll type webkit now this time our test will run on the web kit browser so you can see that so all the tests are getting executed so all the tests tests are working fine and let&#39;s view the report so by using the command called npx playright show hyph report so this will opens up the HTML play right test report so firstly you can see the project so our test tests are executed on the C sorry webkit browser and here you can see the two spec file and three automation tests and also those are getting passed here so this is how you can execute Play Right test on the different browsers in this playrate tutorial we are going to see how to record play right automation test using Code gen using the command prompt or terminal so let&#39;s navigate to the vs code now so simply we here we have to enter the one command called npx followed by playright and followed by Coden so here I have opened a fresh terminal so here we have to use npx followed by play right and code so if I hit enter after entering this particular command so this will opens up two windows one is browser and second one is playright inspector so let&#39;s hit the enter so let&#39;s wait for a few seconds so you will get the if you see here so it has opened the play right inspector and it has the sample test and also it has opened the browser also so let me give you a overview on manual scenario then we will record that manual scenario by using the playright automation tool so firstly we will navigate to the youtube.com and then we will search with API testing by tester stock then once we got the results we are going to click on the playlist called API testing by tester stock then we will validate the title of the playlist so here I will enter the first URL here I&#39;ll say youtube.com and then in the search text box we are going to enter API testing by tester stop and then so we have to click on the this particular search icon so before we click on this particular search icon we will verify whether this search icon is displayed or not so by using the assert visibility so simply I will select the that particular element after clicking on the assert visibility and if I open the playright inspector so here you can see the code got generated so firstly it has navigated to the youtube.com then it is entering the search text box and after that it is going to verify the visibility of the search icon now I will come back here so we have to click on the search icon let&#39;s click on the search icon and once we got the results here in the result page we need to click on the API testing by tester stock playlist so let&#39;s click on that particular playlist and also we can validate the same code is generated or not in the play right inspector also here you can see that line number eight is line number eight is generated for the action which we have done on the playlist so that&#39;s it guys once we navigate to the playlist so here we are verifying the title of this particular playlist so I will verify it by using the assert text so first you need to click on the assert text and followed by the L payment that&#39;s it guys so if I go to the playright inspector and here you can see that all the code got generated over here right so simply I will copy this particular test and I will go back to the our vs code so under the tests folder so I&#39;m creating a one spec spec file so here I&#39;ll say record and play test dopc do JS and I will paste the code whatever I have copied it from the playright inspector so here what I&#39;m doing is before we enter anything in the search text box right in the line number five so simply I&#39;m taking this particular locator and before we enter anything in the search text box so we want to click on that particular search text box so that&#39;s it guys and after that what I&#39;m doing is so here I see that in the line number 10 some dumy code got generated that&#39;s the line number 10 simply I will delete this and what I will do is in the line number 10 so I&#39;m putting some manual weight so that we can see the execution properly so that&#39;s the reason here I&#39;m using page dot sorry await followed by Page dot wait for timeout so here we have to pass the milliseconds so here I&#39;m passing 5,000 milliseconds that is nothing but the 5 Seconds that&#39;s it guys and also I will Val I will rename the test name as record and play test and I will close the browser which has open by the Coden and if I close the browser and automatically playright inspector will be also closed so now the test is ready and let&#39;s run the test so it should Open the youtube.com then it should search with API testing by tester stock and it should navigate to the playlist and it has it has to verify the text of the playlist so it is taking bit of time I think it is got failed so let&#39;s see what is the reason behind this so it is failing in the line number nine right so we&#39;ll come back here and let&#39;s see the code little bit so in the line number five and six we are entering the search text box then we are going to click on the search icon in the line number seven and eight and after that we are going to get the playlist and we need to click on the that particular playlist and at the end we are verifying the text of the playlist that&#39;s it guys so what I will do is so simply I will put the some weight after going to the P sorry youtube.com so simply I will copy the line number 10 and I&#39;ll paste it here then I will re rerun this particular playright test so let&#39;s see this time it should work fine so it has opened the browser now so sometimes if my internet is uh slow because of that also it might get fail so that could be the one of the reason so again it is coming here and it is getting failed so let me verify it once again what we are doing so let me put another weit after the line number 7 because YouTube is a heavy loaded application that&#39;s the reason it might be taking little bit little bit of time so that&#39;s the reason I want to put a little bit of weight so that our test will run perfectly fine so I&#39;m rerunning the test once again so if you see here it is loading very slowly youtube.com and it has clicked on the search icon and it got the results and also it is clicking on the playlist and it should verify the text also so let me check like what is the issue here so it is saying that test is finished because of the because our test should get execute within the 30 seconds so that&#39;s the reason so this configuration is done in the playright configuration so now let&#39;s rerun the test because this time everything is working fine and let me remove a little bit of so let me close this run and I will put the less weight here I will say 3,000 that means 3 seconds so I will put 2,000 here so now let&#39;s rerun the test now so because YouTube is heavy loaded application and it needs a little bit of faster internet so that is the main reason behind the failures now it should search with search with the Search keywords and it should navigate to the results and playlist and it should verify the title of the playlist right and if you see here our test is getting passed right so I didn&#39;t do much modifications here and also here you can see that our test test is getting passed so this is how you can use the Cod gen for recording the playrate test hi friends this is bakaa in this chapter two of play rate full course we are going to see water locators different types of locators and then next we will see how to capture element screenshot how to take the web page screenshot and also we will see how to take the full page screenshot and next we are going to see how to implement Hooks and how to write the precond conditions and how to write the post conditions by using the hooks next we are going to see how to add a screenshot into play right test report when test got failed and then we will see how to select the drop down list value and how to validate the drop down value and then we will see how to work with if frames and then next we are going to discuss how to select the dates so it can be today&#39;s date or any customized date then next we are going to see how to perform the mouse actions keyboard actions and how to drag and drop the element using playright and next we are going to see assertions so we will be discussing about the hard assertion and soft assertion questions in play right then next we are going to see what is watch mode and how to enable the watch mode to write the playright automation test and then finally we are going to see how to enable the traces so that we can attach traces information into the playright test report in this play tutorial we are going to discuss about locators in playright so there are multiple ways of identifying the web element by using the playright so let&#39;s see one by one the very first one is by role we can identify the web page element so this is an example here you can see that await keyword followed by Page dot get by rooll so here I have added link so this can be checkbox or even it can be the button also and also we have to specify the respective value over here so this is the name is the constant field so which we have to add it and after that we can perform the respective actions so it can be click on the checkbox or button and uh we can use the fill also to enter some data into the text box if it is a text box and second one is by label we can identify the web page element the example is very much similar to the above example and in this case we are using the label value that means the ever you see the tag is having a multiple attributes So within that attributes if you are able to find the area label you can pass that particular value over here and then you can pass the whether you need a partial match or the exact match if you want a exact match you need to pass the two here and then you can perform the respective action it can be click or fill the value into the text box and third one is by using the alt text so here also example is very much same so here you can use the await keyword followed by Page dot get by Alt text so here so wherever you are seeing the alt attribute then that has the text so that text can be passed over here and then you can perform the action actions whatever it is it can be click or you can enter the some data into the text field and next one is by using the test ID for example so by using the test ID also we can identify the web page element so this is a very custom attribute this attribute name will be configured in the playright configuration file so it is very simple guys so this particular attribute name will be configured in the configuration file and then simply you need to pass the respective value over here so this particular configuration will be done only to the field which is very common across the whole project only then you can perform the respective actions and the next one is by using the text you can identify the web page element so if you&#39;re using directly by text and if you&#39;re not specifying the exact colon true that means that is a partial match and it will perform the actions on the web page element and if you&#39;re if you&#39;re adding the exact colon true so this is the complete match with the text what you are adding inside the get by text method and coming to the next way of identifying the web page element is by using the title so wherever you are seeing the tag is having the title attribute simply you can pass the title value over here and so this is a method what we will we will be using to identify the element by using the get by title so title attribute value we have to pass onto this particular function then we can perform the respective actions and the seventh locator type is xath so in this case so if you see the this particular example right so there&#39;s await and followed by the page do locator so previously we were using the get by title get by text or get by role or get by test ID but in this case when we are using the xath so we are using only locator so here we have to add the within a double quot or a single quotes we have to specify the xath here so this xath can be added or it can be ignore also so directly you can specify the xath value also so that is also accepted in the play right and similarly we have the CSS selector so we can write the CSS selector and that can be used as the locator to perform the actions th example is very much similar to the xath only so we have to use AIT followed by Page page. locator and here we have to pass the CSS so if you&#39;re passing CSS equal to R simply you can directly pass the one the directly CSS selector also so so this is not this is an optional value what you can pass onto the CSS selector and also to the xath where you are passing the xath equal to so this is not the mandatory value we need to write into the locator method and coming to the last one by placeholder we can identify the web page element so wherever you are having the placeholder attribute so that value can be passed on to the page dot by placeholder and here once you add the placeholder attribute value over here and you can perform the respective actions so let&#39;s see all these examples with respect to the real time web applications let&#39;s see the very first example that is by using the role how you can identify the element and uh how you can perform the actions on the web page element so let&#39;s quickly create the one JS file inside the tests folder so here I&#39;ll say locators dopc do JS so that&#39;s it I will go to the first test dot spec. GS file simply I&#39;ll copy this test and I will keep only the skeleton of the test then I will delete the rest of of the details and here I will modify the test name so here I&#39;ll say locators test that&#39;s it so we are using await page. go to to navigate to the URL so I will remove this URL and we will use the new URL so here I&#39;ll say firstly by rooll so by role we are going to identify the the element and then we will perform the actions on that particular element so firstly here I&#39;m am navigating to the google.com and searching with Cypress by testers talk and that&#39;s it guys so simply I will take this particular URL so this is the URL for us and if you see the video images shopping news so these are the links here so let&#39;s click on this particular videos or images or shopping shopping sorry so if I inspect this particular videos right so this is the link guys so you can take an example of any button or checkbox also it will work fine so I&#39;m showing an example with respect to the link how you can use the link to identify the element by using the role so if you see here so this is the anchor tag that means it is a link right so simply I will copy this particular URL and then we will click on the this particular videos very first time then we will click on the images so here I&#39;m navigating to this particular URL by using the page. go to method and after that so here I&#39;m using the await followed by Page dot get by roll so here we have to pass the firstly here we have to say whether it is a link or checkbox or button or yeah so these are the few values or a combo box also if you see here so here you can see that some of the examples also so right now we are adding only link here you can see that combo box checkbox and there are many other inbuilt value can be passed over here to the get by role so firstly I&#39;m passing the link and followed by that we have to pass the the object so that is the name colon and in the single quotation we have to add the videos right now I want to click on this particular videos this is the link and then later we will click on the images as well so that&#39;s it guys then I will perform the action as click so let&#39;s wait for some time so after clicking on the videos so here I will use the await followed by Page dot wait for timeout so here I will pass around 7,000 milliseconds that means 7 Seconds that&#39;s it guys now let&#39;s run this particular test and we should be able to click on the videos and I will come back and I will show you what are the different ways of using the get by role and if you see here so it it has already click clicked on the videos link and already it is closed the browser and also our test is getting passed now let&#39;s pass the images now and this time it should click on the images and if you see here it has clicked on the images also right so this is how you can use the get by role locator and if I who my mouse on the get by ro so here you can see the possible examples also so get by ro can be used by using the you can pass the heading checkbox button also you can pass even the link also so these are the couple of examples to identify the element by using the get by ro now let&#39;s identify the element by using the area label so here I&#39;ll say label that&#39;s it guys so what I will do right in this example let me comment out this part let me take this particular first line we will navigate to the one of the URL firstly so we will navigate to the Google google.com and here if I inspect this particular search text box so which is the text area tag and inside this we have the one attribute called area label so if you see here so area lab area area label is equal to search so we will pass this particular search value inside the get by label function so I will go back to the vs code and here I will add the URL as google.com and then so we have to identify that element by using the get by label so here I&#39;ll say page Dot get by label so here I&#39;ll pass the search as the value and after that so here we have to pass the another object also so here we have to say exact colon true so I&#39;m finding an element by using the area label which has the exact search as the value so that&#39;s the reason here I&#39;m passing the true so let&#39;s enter something in that Google search text box so here I&#39;ll say API testing by tester stock that&#39;s it and once we enter value inside this text box so we will hit the enter by using the keyboard so simply I will take this particular locator and then I will call to the one method called press so inside press simply I will pass the enter so this will press presses the enter from the keyboard that&#39;s it guys so here we are using the get by label and we are passing the value of the area label attribute that&#39;s it guys so let&#39;s run this particular test so you have seen how you can use the get by ro previously and now we are going to see how we can use the get by label also so so I&#39;m showing one way so if you see here so it has entered the text and also it has pressed the enter also we saw the results for the required Search keywords and if I Mouse who are on the get label so there are POS different ways of using the get by label also so if you see here so we have the input tag where we have the array label and respective value and second tag where it has a label as the tag name name and we have the value as a password and next tag we have the input and we have the ID and if you see here down so these are the possible ways of using the get by label and where you are passing the respective just keywords and we are performing the respective actions so this is how you can use the get by role and get by label now let&#39;s see how to use get by all text and get by test ID so here I will navigate to the web page and here so we need to navigate to the github.com /ban so you can take any web page example where you are able to find the alt as the attribute so if I inspect this particular image so we have the one attribute called alt and if you see here so we have the attribute called so we have the attribute and which has the view bapas bakap and full sized aatar right so we will use this particular value and we will identify the this particular image and we will click on this particular image by using the get by Alt text so here I will navigate to the vs code and so here I will comment out this particular part so which is not required and we are going to identify the element by using the alt text right so firstly we have to navigate to the URL so here I&#39;ll say page dot go to and here we will add the URL and after that we have to identify the element so by using the page dot so get by Alt text and inside that we have to Simply add the text so here I&#39;ll say text added or inside the all text method and after that we have to click on that particular image that&#39;s it so we have performed the click operation here so before that we have to add the URL let&#39;s copy the URL and I have added the URL that&#39;s it guys it&#39;s very simple so wherever you see the alt attribute and which has the value and you can use the get by all text so I will run the test now so it has opened the browser and it has navigated and if you see here it has clicked on the that particular image also right so it is waiting for some seconds and our test is getting passed also here you can see the check check mark also right so this is how we can use the all text now let&#39;s see how to use the get by test ID so here I&#39;ll say by test ID so here I will navigate to the GitHub dot sorry github.com followed by that so simply I will pass the login so this will navigate to the sign into to GitHub page so if I inspect this particular username text box which has the multiple attributes and respective use so here we are taking the one attribute called autoc complete so so whatever this particular way of identifying the element if you have seen right so as I said earlier also get by test ID so this particular attribute we are going to add it in the configuration file and this particular attribute should be used across the project such kind of attribute can be added in the configuration file so I will go back to the web page once again now so here I&#39;m considering this auto complete is the attribute so which is repeating again and again in my project so I will take this particular attribute and after that I will pass only the respective value wherever I&#39;m using the autocomplete attribute so let&#39;s add this attribute into the our configuration file so it&#39;ll say test ID attribute colon and then in the single quotation simply add the attribute name and put the common that&#39;s it so once you add this particular test ID attribute into the configuration file come back to the your test file and here so let&#39;s navigate to the URL first so here we are navigating to the GitHub do github.com /login so we will enter something in this particular particular username text field by using the autocomplete attribute value so here I will enter the URL first and then let&#39;s identify the element by using the page dot get by test ID so we have added a test ID attribute in the configuration file so that&#39;s the reason so simply I will pass the this particular respective value so wherever you see autoc complete as the attribute and respective value so you can use the get by test ID where you can simply pass the respective value so no need to worry about the attribute name then here I&#39;ll say fill so I so that I can enter something in the username so here I&#39;ll say tester stock that&#39;s it guys so we are done with adding the configuration in the playright conf configuration file and also we have return the locator for the get by test ID also so this will opens up the github.com login page that&#39;s signin page and it will add the username value in the field and then it will closes the browser so if you look at here so it has added the value which we have passed from the play right test and it is closing the browser right so we are seeing the check mark here and also here we can see the results also it&#39;s working perfectly fine now I will discuss how to use the get by text where we can pass the complete text and as well as the partial text and also we will see how to use the get by title also to identify the web page element now let&#39;s see how to use the get by text so here firstly we will navigate to the YouTube ./ testers talk so we will use this particular URL and once we come down here so we have the multiple playlist so firstly we will use the partial text by using that we will perform the action on the web element so here I will just use the Cypress by and we will click on the this particular playlist so if you see here the complete text is Cypress by tested stock but we are mentioning just Cypress SP so here I will navigate to the vs code and so here I&#39;ll say by text and after that I will use the directly a wait keyword followed by that I will use the page and then here I&#39;ll say go to inside this I will add the URL and after that we will identify the element by using the get by text so here I&#39;ll say page dot get by text so here we will add the partial text so here I&#39;ll say only Cypress by and we will click on the playlist so here will say just click operation that&#39;s it guys now let&#39;s execute the playr test and we will see the results so it has navigated to the YouTube link and it has to open the Cypress by tester stock playlist and also it has done that and our test is passing right so this is this how you can pass the partial text now this time I&#39;m passing the complete text so here I&#39;m saying C press by tester stock so I will run the same test once again this time also it opens the YouTube page and it goes to the Cypress by tester stock playlist and if you see here so it has clicked on the Cypress by tester stock and it is closing the browser and if you see here our test is getting passed so this is how we can use the get by text where you can pass the partial text or the complete text now let&#39;s see how to use the title so here let Say by using the title so we will navigate to the same URL so that&#39;s the reason I will copy this particular line where we are navigating to the youtube.com/ theate tester stock and if I inspect this particular playlist Cypress by tested stock so we have the attributes multiple attributes and within that you will be finding one attribute called title equal to Cypress by tester stocks so simply copy this particular value now we are going to identify the Cypress by tester stock playlist link by using the get by title so we navigate it to the YouTube link and now we have to identify the element so here I&#39;m saying page Dot get by title and here I&#39;m adding the value of value of the title attribute and then I&#39;m calling to the function called click that&#39;s it guys so we are done with writing the simple one line of code so here we have we are using the get by title and we are performing The Click operation so let&#39;s run the play play right test now so it has to open the Chrome browser and it has to it has to navigate to the YouTube link and then finally it will navigate to the Cypress by tester stock playlist and finally it is our test is getting past right so this is working as expected that&#39;s it guys now let see how to use the X paath and CSS selector so we will navigate to the just youtube.com and here we are going to identify the search text box by using the xath first so here I&#39;m using the attribute called name so which has the search uncore query as the value and firstly I will write the two for slash star and in the square brackets at the rate attribute and followed by the value we have to pass it so this is a simple x paath I&#39;m writing it and if you see here so it is matching that it is matching with that particular search text box let&#39;s copy this particular X path so before that so let&#39;s copy the these two lines and here I&#39;ll say by xath and I will pass the youtube.com link here that&#39;s a URL and let&#39;s identify the element so here let say eight followed by Page and here I&#39;ll say get by sorry so for xath and CSS selector we have to use the locator so here simply you have to pass the EXP path equal to the x paath value we have to pass it so I will pass this particular X paath here that&#39;s it firstly I will click on that particular search text box and after that I will pass the Search keywords so firstly I&#39;m using the click method and then next I&#39;m using the fill method to enter the Search keywords so here I&#39;ll say JavaScript by testers top that&#39;s it guys so after entering the text in the search text box by using the same locator so I will click on I will sorry I will press the enter from the keyboard so here I&#39;m using the one method called press and inside that I&#39;m passing the value as enter so that will processess the enter from the keyboard so this will navigates to the youtube.com then it will enters the search keyword and it will presses the enter and it will wait for some time and it will close the browser so this time we are using the X paath to identify the web page element so as I said just before xath equal to is an optional value where you can pass it inside the locator method and if you see here so it has navigated to the search results of the YouTube page and our test is getting passed right so this time what I&#39;m doing is simply I will remove this particular xath equal to so this is an optional value you can pass it or you can ignore it and if I run this test and it will work fine so it has entered JavaScript by test stock and it got it got the results also and it is closing the browser and our test is getting passed right in the similar way so what we will do is let&#39;s let&#39;s add the CSS selector now so for CSS selector simply we have to remove the two forward slash and star and at the rate that&#39;s it so this is our CSS selector so I will go back here and I will copy the whole thing and I will comment out these four lines and here I&#39;ll say CSS selector and here I will pass the CSS selector value that&#39;s it guys so I will copy this CSS selector value so that&#39;s it guys we are done with adding the CSS selector to identify the element by using the CSS selector now let&#39;s run the play test and next time we will pass the CSS equal to value in the locator method so this time we are passing directly CSS selector value so it has entered the JavaScript by tested stock and it got the results also and our test is perfectly working fine and here you can pass the CSS equal to so this is an optional value you can add it or you can ignore it so that&#39;s it guys so let&#39;s run the play right test now and it should work fine and if you see here we got the results also and our test is perfectly working fine and if you see here our test is getting passed and here also you can see the check mark here in this play right tutorial we are going to discuss about how to capture the screenshot in playright so we will capture the screenshot by using the playright so it can be the element screenshot it can be the page screenshot or it can be the full page screenshot we will see how to capture the all these screenshot screenshots using the playr tool so now I will navigate to the vs code and here under the tests folder I&#39;m creating one file called screenshots dot spec. JS so that&#39;s it guys now I will go to the first test. speec file and here I will take this test and I will copy the test here so simply I will keep the only skeleton of the play right test and rest of the details I will delete it and here I will give the test name as take screenshot in playright and that&#39;s it guys now let&#39;s look at the manual manual scenario then we will come back here and we will see how to c capture the element screenshot and then we will see how to capture the page screenshot and also we&#39;ll see how to capture the full page screenshot in playright automation tool so here I will navigate to the web browser so firstly we will open the youtube.com/ theate tester stock so here we have a one element called Channel header if I inspect this particular Channel header so we are going to identify this channel header and we are going to capture the element screenshot so you can identify any element in the web page and you can try to capture the screenshot so if I inspect this particular Channel header and if you see here so this particular D tag has the ID so I&#39;ll copy this particular ID and here I&#39;m just using the hash followed by the ID value so here I have written a simple CSS selector and by using this we can identify the element and then we can see how to capture the screenshot in playright so let&#39;s navigate to this URL first and I&#39;ll copy this URL and I will enter the URL here so that&#39;s it guys now we have to identify the channel header element first so here I&#39;m using await keyword followed by Page dot so here I&#39;ll say locator and inside the locator function I will pass the CSS selector value that&#39;s it once we pass the CSS selector value over there and simply you need to call the one function called screenshot so here we have to pass the one object that is the location of the file so let&#39;s create a one folder inside our project so here I&#39;m creating one folder called screenshots so we will keep all the screenshots inside the screenshots folder so firstly we will keep the element screenshot inside the screenshots folder so here we have to specify the path so here I&#39;m saying path colon in the single quotation so I&#39;m adding dot slash and the folder name screenshots and followed by that we have to specify the screenshot name so here I&#39;ll say element do PNG so that&#39;s it guys so firstly we have identified the element by using the CSS selector and here we are adding the location where we want to capture the screenshot and also we are adding the screenshot name as element. PNG so that&#39;s it guys and and finally I will add some weight here by using the await followed by Page dot wait for timeout so here I&#39;ll pass 5,000 milliseconds and that&#39;s it guys under the screenshots folder right now we don&#39;t have anything so after running the this particular automation test so it is going to capture the screenshot of the web page element m m and also it will keep inside the screenshots folder that&#39;s it guys and if you see here so our test is getting passed I will go to the screenshots folder and if you see here so already it has captured the element screenshot and also it has added inside the screenshots folder so let&#39;s go to the location where exactly it has placed so simply I will open the screenshot and if you see here so play rate has captured the element screenshot right so this is how you can capture the web page element screenshot now let&#39;s see how to capture the page screenshot so it is very easy so we have to use the await keyword followed by page so I don&#39;t want to capture the particular element screenshot here so I want want to capture the current page screenshot so that&#39;s the reason directly I&#39;m calling the screenshot method and here again we have to pass the location of the file where we want to keep the screenshot also so simply I will copy the same location and we will update the file name so here I will give the screenshot name as page.png so our screenshot name would be the page so that&#39;s it guys let&#39;s run the test now so this time playright will take the current page screenshot that&#39;s it guys and if you see here so our test is passing and if you see the screenshots folder so we have the another screenshot called page.png got added so let&#39;s go to to the location so let&#39;s open the page screenshot and if you see here so playright has captured the current page screenshot so this is how you can capture the screenshot of the element or the current page now this time we we will capture the full page screenshot so it is very much similar whatever the syntax what we have used for the capturing the screenshot of the current page and here we have to pass the another object called so that&#39;s another flag so here we have to use the full page colon and here we have to pass the true or false so here I&#39;m passing the true as the value so that it is going to capture the full page screenshot and I will give the name of the screenshot as full page do PNG so that&#39;s it guys now I will run this particular test now this time we are going to capture the full page screenshot using play right tool and if you see here so our test is passing and you can see the test results also so our test is getting passed and if you see the screenshots folder so there is another screenshot added in the same location full page.png so let&#39;s go to the location and if I open that particular screenshot so if you see here so this is a full page screenshot So currently the page is not loaded and you can try to scroll down and you can take the full page screenshot that time the whole page will be visible properly so this is how you can capture the element screenshot page screenshot full page screenshot using playright in the next playright tutorial I will be discussing how to capture the screenshot and how to add into the report when test is failed in this play tutorial we are going to see how to take a screenshot and how to add the screenshot into the play test report when test failed so let&#39;s navigate to the vs code now so here I will open one of the spec file called first test. spc. JS file so I will simply run the this particular test so this is a currently working test so our test will pass so it will not capture the screenshot and even if it is failed also it will not capture the screenshot and add into the play right test report and we&#39;ll see how to do that so if you see our test is getting passed and if I open the HTML report so you will be not seeing any screenshot here so whenever test is getting passed or failed also so if I scroll down so there is a no screenshot and our test is getting passed so now I will make intentionally this test getting failed so I&#39;ll make this test failure so it will pass the incorrect expected value so our test will fail now because actual value and expected value is not matching so once our test got failed so this time also it is not going to capture the screenshot and if you see here so our test is getting failed where it is not able to match the actual and expected value so let&#39;s go to the report and let&#39;s refresh the report and if you see here so this is the expect Ed string and this is the actual string so it is not matching both the strings and if I scroll down you&#39;ll be not finding any screenshot here and here you can see that where exactly our test got failed also so let&#39;s see how to add the screenshot into the playr test report when test is getting failed so here I will go to the play. config.js file and under the defined config so I will come down so there is another object called use inside this we have to add the one flag called screenshot colon and here we have to pass the value as only on failure that&#39;s it guys so this is the very simple configuration you need to do it in the playright config file now I will go back to the our vs vs C test here that&#39;s the first test. spec file and and I will rerun the test so this time our playright will capture the screenshot and also it will add the screenshot into the play right test report whenever the test is getting failed and if you see here our test is getting failed I will go to the report again then I will ref refesh the page so our test is getting failed so because of expected string and received strings are not matching and if I scroll down here you can see the step and also you can if I if I scroll down a little bit down so here you will be seeing the screenshot section under the screenshots you&#39;ll be finding the screenshot where exactly play test is getting failed so this is how you can capture the screenshot and this is how you can add the screenshot into the playright test report in this playr tutorial we are going to see what are Hooks and how to implement hooks in the play right framework so let&#39;s understand what are hooks so hooks are nothing but the block of code and that will be getting executed before executing your tests or after executing the your tests so these are the four hooks we have in the play right tool the very first one is before each second one is before all third one one is after each and fourth one is after all so let&#39;s understand what exactly each hooks does we have the before each so that name itself says that this particular block of code will be executing before each test and coming to the next one before all so this is a function so it will contain the block of code that block of code will be getting executed before executing all your tests and coming to the third one and fourth one so these two are exactly opposite to the before each and before all so after each is nothing but so this block of code will be executed after executing the each test and coming to the final one after all so this is a function it contains the block of code and that will be getting executed after complete in the all the test execution so let&#39;s see how to implement books in the playright so I will navigate to the vs code now so here I&#39;m creating a one spec file inside the tests folder hooks dopc do JS that&#39;s it guys so I will go to the one of the spec file called first test. spc. JS file and I will copy the all the code from the this particular spec file and I will come inside the hooks dopc dogs file so here I have copied the first test spec. JS file test into the hooks do spec. JS file so let me explain what exactly this test is doing and we will update the test name later so firstly we are navigating to the YouTube youtube.com then we are searching with Cypress by test stock so that means we are entering this particular text in the search text box then we are clicking on the search icon and once we got the results we are clicking on the playlist and there then we are validating the title of the web page so that&#39;s it guys at high level so here I will rename the test name as hooks in play right so that&#39;s it guys so if you see here if if I&#39;m having right now I&#39;m having only one test and if I need to write the 10 automation test like this so I need to use the await followed by the page. go to so this precondition is required for each and every test case that means launching the browser and entering this particular URL so I don&#39;t want to write it in the all the 10 automation test so I want to keep it in only in single place so that will be used across the all the test so that&#39;s the reason what I&#39;m doing is simply I will cut this particular part and I will place it inside the one hook called before each so let&#39;s implement the before each now so here I&#39;m using the test object and here I will add the test dot before each so here we have to say which hook we are using then here I&#39;m adding the name of this function as run before each test that&#39;s it and followed by this I&#39;m using the async async function so here I&#39;m adding the page object and followed by that so I&#39;m using the arrow function that&#39;s it guys so simply I will paste the code which is launching the browser and and entering the URL right so now I will run the test so now this time also it should work fine so let me run the test now and if you see here it has opened the browser and also it is entering the URL and also it is navigating to the playlist and it is validating properly and if you see the test results also our test is getting passed right now so here I will add one log that&#39;s a console DOT log and here I&#39;ll add the message as running before each test that&#39;s it guys so this is how you can implement the before each test or some data you want to clean up or some data you want to create it so those kind of functionalities can be implemented inside the before H now let&#39;s let&#39;s implement the before all also so it very much similar so here is here we have to replace this before each with the before all and here I&#39;ll say before all test and I&#39;m not doing anything inside the before all so simply I&#39;m writing the one simple message called running before all test that&#39;s it guys say for example if you are having test data which you want to read it from the different sources it can be the CSV file Excel file Json file so that data can be loaded inside the before all hooks so if I run the test so this particular block of code will be getting executed before running any of the tests so as of now we have only one test so we will try to use the sorry guys so we should not use the page object here sorry guys so we should not use the page object inside the before all so let&#39;s remove that and let&#39;s run the test now and we will add the same test once again then we will have the two automation test so it is able to navigate to the URL and it is performing all the actions L and our test is getting fed also so I will take the same test and I will create a second test and I will remove some of the actions here so simply it will navigates to the youtube.com and it searches with the Cypress by tester stock so instead of Cypress by tester stock here I&#39;ll say API testing by test test stop this time and here I will say the test name as hooks in playright 2 so that&#39;s it guys so right now we are having to Total two test so before running this particular test so our browser should get launched and before running the second test also it should launch the browser and and it should perform all the actions so here I&#39;m going to the testing and then I will run the hooks spec file so far we have implemented before each and before all hooks in the play right and let&#39;s quickly implement the after each and after all hooks also so firstly it is searching with the Cypress by test stock and second time so it has to search with API testing by tester stock and if you see here so it is able to search the search with the second set of search keyword and if you see here our two tests are working fine so as I said before after each and after all so those two hooks are exactly opposite to the before each and before all so here I&#39;ll say after each and I will update the description and also I will update the log also so here I&#39;m not doing anything inside the before sorry after each hook also and here I&#39;ll say after all and same thing I will update inside the console.log so for example if you want to clean up the data or if you want to close the connection with the extern external sources so those kind of things can be written inside the after each and the after all so if I execute this particular test right so let me trigger the whole test and we will go back to the report and we will see in which order all the hooks are working and also we&#39;ll see how the tests are getting executed also so firstly it will work the before all and then before each then test then after each and after all so this is a usual order play right test will work when we are using the hooks in the play right so if you see here so all the two tests are working fine so let&#39;s go to the report and if you see here so our tests are working fine so I will go down and I will click on the STD out so if you see here so firstly it is running the before all test then before each test and after that running after each test so this is a very first test that&#39;s the reason after all test is not got executed so if I go to the test two so this is a test which got executed last and if I go to the STD out so here you will be able to see the firstly before each test then after after each test then at last it is running the after all the test right so this is how you can implement the hooks in playright in this playright tutorial we are going to see how to handle drop down list in playright there are two ways we can select the any drop- down value the first one is by using value we can select the drop down list and second one is by using visible text we can select the any drop down value so let&#39;s see the manual scenario first and then we will perform all these actions practically and at the end we are going to see how to verify the drop down value so you can verify the default value or you can verify the even selected value as well so let&#39;s look at the manual scenario first so we will navigate to the facebook.com and then we will click on the create new account and then so we will come here so we will select any value from the month drop down list and also we will validate the default value and also we will validate the any selected value after the selecting it from the drop-down list so let&#39;s navigate to the vs code now let&#39;s quickly create a script so let me close all the windows so under the tests folder so I&#39;m creating one file called drop down list dopc dot JS so that&#39;s it so I will go to the first test. spec file simply I will copy the test here and I will come to the drop down list spec file so simply I will delete the some lines of code which are not required so here I will keep only skeleton of the play right test and here I will update the test name as handle drop down list in play right so that&#39;s it firstly we have to navigate to the one URL so here I will add the URL by using the goto method so I will navigate to the facebook.com so once we navigated once we navigate to the facebook.com so we have to ident ify the one element called create new account so I will use the visible text by using that we will identify this button and we we will click on the create new account so here I&#39;ll say get by text and I will pass the text that is the create new account then I will call the method called click so that will perform the click action so once we navigated to the popup that&#39;s the alert so here we have to identify this particular drop down list that&#39;s a month so I will inspect the month drop down list and if you see here so this particular select tag has the area label Name ID so here I will use the ID and by using the ID so simply I&#39;ll say hash and followed by the ID value so I have written a simple CSS selector and I&#39;ll copy this CSS selector and here what I will do is simply I will use the page do locator then I will add the locator here then I will assign back to the one constant variable called drop down list so that&#39;s it so by using this element I can select the any value from this particular drop down value so let&#39;s see by using the value how we can select the drop- down list so if I navigate to the Dom details of the month and if you see here so for the Jan value is one for Feb it is a two and if I scroll down for May it is five for June it is a six so let us select the m so simply I will pass the value as five and here I will use the drop down list dot select option and simply I will pass the value because I want to select the may now so that&#39;s the reason here I&#39;m passing the F that&#39;s it and here I will provide some weight so that we can see the execution properly so here let say wait for timeout and here I&#39;ll pass 5,000 milliseconds so by default our web page is selecting the December as the month and our test will select the May so I will run the test now so it is navigating to the facebook.com and then if you see here may got selected and our test is working fine if you see here so we got the check mark and also we got the test got passed so this is how you can select the drop down value using the play right so let&#39;s try to select the June this time so I will pass the six here so if you see the Dom details so for to select June we have to pass the value as six so that&#39;s the reason I&#39;m passing the value as six here and I will run the test and if you see here June got selected and our test is perfectly working fine right so these are the two examples what we have seen how to select a drop down using the value so this time what I will do is I will pass the visible text say for example I want to select August so simply I will pass the August here so previously we were passing the value but this time I&#39;m passing the visible text so if I run the test so at the end of the test it will seel it it is going to select the August as the month from the drop down list and if you see here August got selected so this is how you can select the drop down value using value and visible text in playright now let&#39;s see how to verify the drop down value so for example if I after navigating to facebook.com and then once we click on create new account so default value is December for December if I inspect in the Dom so let&#39;s check the value of the December so it will be 12 right so let&#39;s in sorry let&#39;s assert this particular value whether December is getting selected or not we will verify it so here what I will do is after navigating to this particular web page then here I will assert the before selecting anything in the drop down list so I&#39;m going to assert the December as the value so here I am using the await followed by as I said previously we have to use the expect keyword and followed by that we have to use the element and then here we have to say to have value and here we have to pass the value that&#39;s it so by default value is 12 this time so that&#39;s the reason here I&#39;m passing 12 and if I run the test and this will work fine so basically we are checking that default drop down value is correctly displaying or not so this time our test will work fine because December is the month by default it is getting selected let&#39;s say if I pass two and this time our test will get failed so you can assert even the after selecting the any drop down value in the similar way so I have showed you how to validate the default value so default selected drop down value and if you see here so we have the assertion failure here the expected stram string is two but we have received the 12 as the string so this is the expected failure so this is how you can select drop down values in play right and also how this is how you can validate the drop- down values in this playr tutorial we are going to discuss how to handle if frames and also I am going to discuss about how to drag and drop elements in play right so let&#39;s navigate to the web browser we we will see the manual scenario first so we will navigate to jQuery ui.com dropable first then here if I if you scroll down so here we have two elements one is drag me to Target so this is a source element and drop here is a destination element so simply we can take this Source element and we can drop inside the destination element so this is the scenario overall scenario guys so I will go to the vs code let&#39;s create a play play write test now under the tests folder I&#39;m creating iframe then drag and drop dopc do JS that&#39;s it guys then I will go to the first test spec file so here I will copy the test and I will come back to the iframe drag and drop spec file so here I will keep the only skeleton of the play test and here I will update the test name as handle I frames in playright and I&#39;ll say here drag and drop so that&#39;s it guys so firstly we have to navigate to the URL so here I&#39;m using go to Method by using that we will open the browser and we will navigate to the this URL that&#39;s it now if I go to the web browser and Let me refresh this page so I will open the Dom details now so if you if I inspect the source element and this is a destination element below one is and if I go little bit up here so here we have the I frame first firstly we have to identify the I frame and then we have to switch to this particular I frame then we can perform actions on the elements which are there inside the I frame so let&#39;s identify the I frame now so here we are having the class equal to demo hy1 frame so I will take this particular value class value and simply I&#39;ll press Dot and the value so we are able to identify the iframe by using the CSS selector so here I will copy the CSS selector and I&#39;ll come down here I&#39;ll say firstly we will find the I frame then we will find the drag end that is the source sign destination element then finally we will perform the drag and draw of the element so that&#39;s it guys it is very simple now let&#39;s identify the iframe now so here I will use the sorry AIT sorry I will not use the AIT here so directly I will use the page dot so here I&#39;ll say frame frame locator and inside the frame locator method I will pass the frame whatever we have written the CSS selector to identify the I frame then I will assign back back to the constant variable called iframe element so that&#39;s it guys so we have identified the iframe now now we have to identify the source and destination element and once we are having source and destination element directly we can drag and drop the element into the destination side so let&#39;s identify the source element now so here I will inspect the source element so if you see here this particular D tag has the ID so that&#39;s the reason ID equal to dragable so I will simply use this ID equal to dragable and I will write the simple CSS selector and I will remove the double quotes I will put the single Cotes that&#39;s it guys so we are able to identify the source element right so it is highlighting The Source element to identify this particular drag that&#39;s a source element draggable element so this I this element is present inside the iframe so that&#39;s the reason I will use the this particular iframe element after that I&#39;m going to use the locator method so firstly we have to switch to this particular frame by using this Frame we we are going to find the source and destination element and then we can perform the action so here I&#39;m saying I frame element so we are using the frame then we are locating the element that is the source element so here I&#39;m adding The Source element locator value then I&#39;m assigning back to the constant variable called here I&#39;ll say drag element in the similar way let&#39;s identify the destination element that is a droppable element so here I&#39;ll say drop element and here we will replace the ID so I will go to the web page and if I come down here so it is highlighting the respective drop element so simply I&#39;ll take this ID of the drop element and I&#39;ll add it here that it guys so we have the I frame and we have the source sign destination elements now it is very easy we can directly drag and drop the element so we can use the weit followed by so here I&#39;m using the drag element first and followed by that I&#39;m calling one method called drag two and inside this we have to Simply pass the drop element that that&#39;s it guys so we are done with most of the work here so I will give some weight here so it&#39;ll say page dot wait for timeout so that&#39;s it guys now our test is ready now I will run the test now so it is very simple we have opened the URL then we have identified the frame then source and destination element ments then we are simply dragging and dropping the element if you see here so this is perfectly working fine so we are able to drag the source element into the destination side so we are able to drop the element element into the destination element and also you can see here outest is perfectly working fine and outest is getting ped right so this is how you can handle the if frames in play right and also this is how you can drag and drop the element in play right in this play right tutorial we are going to see how to perform the mouse actions using play right tool so let&#39;s navigate to the web browser and let&#39;s look at the scenario so we will navigate to the google.com and here I will search with tester stock and I will take the sum part of the URL so I will take this part of the URL so we will enter this particular URL and we will do firstly just normal click double click and right click from the mouse middle button click from the mouse and left button click from the mouse and also we will see how to who the mouse on The Elements also so if I who my mouse here on the vi so it is displaying the some text search by wise so if I H on the image so it is saying search by image like that so at the end we will see how to who are the mouse on the particular element so now I will navigate to the vs code and we will use this particular URL and here I&#39;m creating one simple spec file under the tests folder so here I&#39;ll say mouse actions dopc do jsy so that&#39;s it I will go to the first test dopc file and here I&#39;ll copy this test and I will keep only the skeleton of play right test and here I will modify the test name as Mouse actions in playright that&#39;s it guys so let&#39;s enter the URL here first so I will go to the browser and I will take the URL and then I&#39;ll come back to the vs code now so here I have entered the URL so let&#39;s do the very normal click and double click so these are the generic clicks what we will do so here&#39;ll say just click and then we have a double click so we&#39;ll see one by one how to do all these and here I&#39;ll say mouse right click and in the similar way we have the mouse middle button click and then we will perform the left button click from the mouse and at the end we are performing the mouse whoover so these are the things we will be doing it in couple of minutes so that&#39;s it guys now so let&#39;s perform perform a normal click so here I will go to the page so let&#39;s identify this particular tester stock link by using the get roll so here I will go to the vs code so here I will use await keyword followed by Page Dot and here I&#39;ll say get by role so here I will mention as a link by using the link text we are going to identify by the element then I will pass the object and inside the object I will pass the value as test stock that&#39;s it guys now so there might be n number of ma end number of matches to the our link text so that&#39;s a reason so if you look at this particular search results so there can be a number of matches so that&#39;s a reason here I&#39;m calling one function called first so this will focus on the only very first element then I&#39;ll say the regular click method that&#39;s it guys so I will put some wait so that we can see the execution at the end of the test so here I&#39;ll say wait for timeout so here I&#39;ll add some seconds so that&#39;s it guys now let&#39;s verify whether we are able to perform the normal click so I will the test now so it is launching the browser and it is entering the URL and it should click on the tester stock and it is navigating to the tester stock Channel and if you see here so test is perfectly working fine so this is how you can perform the our regular click or the normal click so I will take the same locator and we will see how to perform the double click on any element using play right so previously we have called click function now we have to call the DB DBL click so that&#39;s it guys so that means or double click so now we are double clicking on this particular test tester stock link so here I will run the test once again so DBL click is nothing but the double click so if you see here it is navigating to the YouTube channel and finally it is closing the browser so this is how you can perform the double click now let&#39;s see how to perform the mouse right click so we will take the same element so basically I&#39;ll take the same element here and then if I go to the web browser so simply we will right click on this particular link like this right so I will go back here and so here I&#39;m calling one method called click so inside the click method so here I&#39;m passing as button so instead so we have to pass the object guys not directly button we can pass it so inside the object we can pass the button colon then here we can pass the values inside this so firstly let&#39;s perform the right click from the mouse so simply you need to pass the right and this is going to right click on the element by using the mouse so let&#39;s run the test now and if you see here so it has performed a right click on the the web page element and then it is closing the browser and if you see here so our test is getting passed right now let let&#39;s take the same line of code and simply we have to pass the different value to The Click method so firstly we have clicked on the element that means we have performed right click on the element now this time we are going to perform the middle click so here I&#39;ll pass as middle that&#39;s it guys so I will go to the browser and if I do the middle middle click on the web page element so this is going to open the next tab like this right so let&#39;s verify this whether it is properly performing the action or not so let&#39;s run the test now so we are performing the middle click and if you see here it has opened the another tab so so it has opened that particular particular Link in the second tab so that&#39;s it guys and if you see here our test is perfectly working fine so this is how we can perform the middle button click from the mouse now this time we will perform the left button click from the mouse so simply here we have to pass the different value so here we have to pass the left as the value to the button so that means we are passing the object to the click method so that&#39;s it guys now I will run the test and this time it will perform the left button click from the mouse so it is basically it navigates to the channel so that&#39;s how it is and that&#39;s it guys and if you see here so our test test is getting passed now let&#39;s see the final one how to who are on the any web page element let&#39;s say for example I want to Mouse who on any of these elements right so let&#39;s inspect this particular element and we will do the mouse who run the element so I&#39;m inspecting search by wi so if you see here so we have the DU tag and under that we have the area label equal to search by y so simply I&#39;ll take this particular attribute and value and I&#39;ll paste it here that&#39;s it guys and we are able to identify the element by using the CSS selector that&#39;s attribute equal to Value simply I will take this CSS selector and I&#39;ll come down here so here I&#39;m using iate keyword so we are going to identify the element now so I will use the page dot locator and here we have to pass the locator value whatever we have ident identified it so that&#39;s it guys so we have identified the element now I&#39;m calling one method called whoover so this function does the most whoover on the web page element so that&#39;s it guys so if you see here so whenever you open the page normally so this particular text will be not displayed only if you whoover on the page element then it will display the text as search by wise right now let&#39;s run the test and see the results and if you see here guys so it has performed the action because I have used my mouse just I was rolling my mouse so that&#39;s the reason that text got disappeared so let&#39;s run the same test once again I will not do anything this time and you&#39;ll be seeing the text as search by wise if you see that search by wise is displayed so this is how you can perform the mouse who on any element using the playright in this playright tutorial we are going to see how to perform keyboard actions in playright so I will show you couple of examples over here so we can perform many actions from the keyboard and if you see here so there are multiple options so very commonly used uh actions from the keyboards are pressing backspace tab enter escape and you can also press the enter insert page down page up and also you can press the functions from F1 to F2 and also you can press the digits from the keyboard and also we can press keys from a to zed as well so like this there are many actions we can do it from the keyboard so let&#39;s see couple of examples in the vs code now now so here I will quickly create a one spec file so here I&#39;ll say keyboard actions dot spec. JS so that&#39;s it so I will go to one of the spec file and I will copy the test and here I will keep only the skeleton of playr test so that&#39;s it guys so let&#39;s update the test name as keyboard actions in playright so that&#39;s it now let&#39;s discuss the manual scenario what we are going to do it in few minutes so firstly I will navigate to the google.com and we will identify this search text box then we&#39;ll fill some data over here and by using the keyboard we will hit the enter first so let&#39;s perform this setion first so let&#39;s copy the URL now here I&#39;ll go and I will add the URL inside the goto method and let&#39;s identify the search text box so here I&#39;m using the one attribute called area label equal to search so simply I will add the square brackets so inside the square brackets I will add the attribute name and attribute value so here I&#39;m trying to add the single quotation in between the single quotation I&#39;m adding the value so we are able to locate the element right so let&#39;s copy that element and here so I&#39;m using the so let&#39;s add the steps here firstly we will press the enter so will say press enter and then we&#39;ll say control plus a sorry so Control Plus all so we will see how to press the control+ A sorry let me add here press control+ a and also we&#39;ll see how to press tab also and also we will see how to press the delete from the keyboard so these are the couple of examples we will be seeing in few minutes so I will identify the element first here I&#39;ll say eight for followed by that page dot here I&#39;ll say locator and inside that I will add the locator value what we copied it from the Google page and firstly I will perform the click operation so I want to click on that search text box firstly then we will enter something in the search text box so here I&#39;m adding play right by tester stock so that&#39;s it now let&#39;s verify whether this test is working fine or not then finally I will use uh await followed by Page dot here I&#39;ll say wait for timeout so here I will give some some some seconds so after completing the test so it will wait for some time so let&#39;s see whether this test is working fine or not then we will see how to press enter how to press contr a how to press delete and how to press the tab also it looks like it is not working so let&#39;s see what is the issue also so I will navigate to the vs code still it is running and if you see here sorry so here we have given the Press so here we have to call the method called fill so that is the reason so our test got failed now this time we should be able to open the google.com and we should be able to enter the some value in the search text box and if you see here so we are able to enter the playright by tester stock great so now let&#39;s see how to press the enter from the keyboard so I will take this locator and followed by that so here I&#39;m calling one me calling to the one method called press and insert the Press I&#39;m passing the value as enter Because I want to press enter from the keyboard so that&#39;s the reason I&#39;m passing the enter value so you can pass any value from the this particular list right so it will be acceptable value so right now I&#39;m pressing the enter so once I add the text here let&#39;s say play right by tester stock if I press enter from the keyboard we got the search result here right now let&#39;s see this test whether it will fetch the results or not so I&#39;m running the test now if you see the results here so we are able to fetch the results after pressing the enter so here I will be doing a very small modification so after the web element locator value I&#39;m calling one function called First and same thing I will do it for the line number 10 also in the line number 13 also so why I&#39;m doing this particular why I&#39;m adding this particular statement is so if it is this particular locator is matching with multiple elements and it will perform on the perform the action on the very first element so that&#39;s the reason here I&#39;m saying identify the first element and perform the action that&#39;s what I&#39;m saying here so that&#39;s it guys we know how to press enter from the keyboard now let&#39;s see so after pressing enter right so if I close this particular inspector so what I will do is next action so we will use the control+ A and also we will use the delete so in this scenario again I will click on the this text box I will select all the text and then I will delete it from the keyboard that&#39;s it guys so this is action what we are doing it now so firstly we have to click on the text box so that&#39;s the reason I&#39;m copying the line number nine which is clicking on the search text box then we have to press the control a from the keyboard so that&#39;s the reason I will copy this particular part where we are performing the enter so here I&#39;m passing the value as control+ a so this will selects the all the text which is there in this particular search text box that&#39;s it guys once we are able to select the text which is there inside the text box simply we can delete it by using the delete so here I&#39;m right now I&#39;m passing the delete as the value for the Press so this is going to delete the value value whatever we selected by using the contr a that&#39;s it guys our scenario is very simple so firstly we have entered the search text box and after that we are pressing enter from the keyboard and again we are selecting the same text box here then we are selecting all the text which is there inside the text box then finally we are deleting that text now let&#39;s run the test and see the results if you see here guys everything got cleared so and if you see the output also out test is perfectly working fine right so this is how you can use the control a that selects all the text and also we are deleting the selected text now let&#39;s see how to press tab so the scenario is very simple guys so I will go to the google.com so already we have identified this search text box firstly we will click on this search text box and after that I&#39;m pressing one Tab and after that the after pressing the tab cursor is going onto the search by voice right and if I hit enter from the keyboard it is going to open up the one alert right so let&#39;s perform this particular action we will see how to use the tab and enter also so right now I will comment out the line number 10 and line number 13 and line number 16 17 and 18 so that&#39;s it guys so we have opened the google.com and we have clicked on the search text box and now we have to press Tab and enter so here I&#39;m using the await keyword followed by the page dot keyboard because already we are clicking on the text box here so directly we have to click the tab and then we have to press the enter from the keyboard so that&#39;s the reason here I&#39;m saying press so firstly we have to press the tab so that&#39;s the reason here I&#39;m passing Tab and followed by that we have to press the enter as well and then I will press the enter so that&#39;s it guys so I will give a little bit more weight so we are done with how to implement or how to use the tab and enter from the keyboard in a play rate automation tool so let&#39;s run the test now and if you see here so we got the alert which we expected it so it will wait for some time and if you see here our test test is getting passed and also here you can see the check mark so this is how you can use the all the keyboard actions in the playright in this play right tutorial we are going to see how to work with the date picker so I will be discussing how to select the today&#39;s date and how to select the custom dates as well from the date picker field so let&#39;s navigate to the browser we will see the scenario and then we&#39;ll come back to the vs code and we will create the spec file and we will create the playr test so we will navigate to the this particular URL gquery ui.com /d picker so here we have the one field called date and where we can select the any dates right so this is the scenario what we are going to automate it in few minutes so let&#39;s navigate to the vs code and here I&#39;m creating quickly One spec file as date picker doec do JS so that&#39;s it so I will copy the one of the test and I will come back to the date picker dopc file and I will delete the respective code here I need just the skeleton of the playr test and here I&#39;m updating the name of the test as date picker in playright so that&#39;s it guys so firstly we will navigate to the URL so here I will add the URL first and once we navigated to the specified URL we have to identify the this particular element so this element is present inside the I frame if I inspect the element so we have the one I frame firstly we have to switch into this particular I frame and then we can perform the action on this particular date field element so let&#39;s identify the I frame first so we have the class equal to demo frame so simply I will take the class value and here I&#39;ll say dot followed by class value so we are able to locate the iframe and simply I will copy the iframe now so we have the iframe locator name and here I&#39;ll say page dot so here I&#39;ll call to the one function called frame locator so firstly we have to switch into this particular frame then I will asend back to the one constant variable called frame element so we have the frame Now by using this Frame I can perform the any action on this particular date field element right so let&#39;s inspect the date field now and if you see here which is a which has the input tag and it has the respective attributes and values so I&#39;m identifying this element by using the class value simply I will copy the class value again I will put the dot and I will add the class value so if you see here so we are able to locate the date field so let&#39;s copy the locator now so here I will use the frame element followed by locator so let&#39;s add the locator value here then simply I will use the fill so here I can pass the date format so let&#39;s see which which format of date is this field is accepting now so if I select today&#39;s date so it is accepting month followed by date and year so let&#39;s pass the any date here so let&#39;s pass 22 or let&#39;s pass 20 sorry first we have to pass the 12 that&#39;s a month followed by date let&#39;s pass 20 as a date and followed by the year so that&#39;s it guys so we are done with identifying the frame and by using the frame so we are going inside the frame then we are identifying the date picker field and we are selecting the date in that field so I will put some weight so that we can see the execution properly so that&#39;s it guys so this is a one way guys how we can select the custom date and next we will see how to select the today&#39;s Days today&#39;s date so we don&#39;t know like what will be the today&#39;s date right so dynamically how to select the date you will see after executing this test so this is the very simple way how we can select any custom date so it can be today&#39;s date you can pass it or you can pass the if it&#39;s here so we are able to select the 1220 and 20 2023 and if you see here our test is getting passed so this is the one way of selecting the date from the date picker so let&#39;s look at the second way how we can select the dynamically today&#39;s date so I will go back to the web page now I will refresh it once again I will inspect the date field so if you here so today date is 20 22 so I I have clicked on this particular input box firstly and then I&#39;m going to inspect the today&#39;s date so if you see here this particular DD tag followed by the we have class and if you see the class value right which is ending with UI date picker today and if I inspect the next date or even previous state so this particular TD tag and followed by the class does not have the whole value whatever we have seen in the today&#39;s date tag right so if you see here the above one which has the different value together right all together so this is a very unique value which will be there if it is the today&#39;s state so let&#39;s identify the element by using the class so firstly let&#39;s click on the this text box then we will get the calendar then we will select the today&#39;s date by using the class so here I&#39;m firstly using this particular locator so previously we have used to enter the data now I&#39;m using the same locator then I&#39;m simply calling the method called click so this will clicks on the date field text box then now we have to identify the identify the today&#39;s date so if it is let&#39;s say today is 22 so it will select the 22 if I execute tomorrow if it is 23 it will select the 23 because based on the class value we are going we are going to identify the element so simply I will press control F and followed by that there&#39;ll say dot value if you see here so it is highlighting the respective element on the calendar right so today date is 22 let&#39;s copy this in inspected value and here I will use the await followed by then I will say frame locator dot locator and then I will pass the CSS selector and here I&#39;ll say just click on that date that&#39;s it guys so this time so our test should select the today&#39;s date that&#39;s the 22 date let&#39;s run the test and see and after this test we we will see the next way off if you see here guys so it has selected the 1222 and if you see here our test is getting passed right so so these are the two ways of selecting the date pick cut so there is another way also so that is the another way of selecting the custom date value so let&#39;s see how to select the custom date value So based on the today&#39;s date for example today date is 22 say for example I want to select the three days back date that is the 19 date or say for example I want to select future date I want to select after 4 days date so like this custom date can be selected by using this particular approach so let&#39;s see what is this approach so simply I will take this particular locator we have return to identify the today&#39;s date right so if I put this particular locator so it is highlighting the sorry guys so let me refresh the page once now let&#39;s add the locator so if you see here so it is highlighting the today&#39;s state so if I go inside the TD tag we have the another tag called anchor tag so I will put one arrow and here I&#39;ll say AR a anchor tag so right now it is highlighting the this particular today&#39;s date anchor tag and if you see the details of this anchor tag so there is a one attribute called Data hyph date which has the exact value of the today&#39;s date right so we will get this particular date by using this we can add the days or we can sub substract the days and based on the the result we can select the custom date so now I what I will do is simply I will take this particular CSS selector and here I&#39;m using the frame element do locator and here I will add the locator value so I will save back to the con constant variable called default date so that&#39;s it guys so once I&#39;m having the locator by using this one so I will get the data hyund date value by using the get get attribute so here I&#39;ll say get attribute and inside this we have to specify the attribute name as data hyphen date so this returns me the 22 right now so I will assign back this to the another variable called here I will say let and I&#39;ll say date value so that&#39;s it guys now once we are having the so let me add it as a current date value so once we are having the current date value so we will simply perform some arithmetic operation let&#39;s say for example I want to select the 3 days back date so I will take this current date value and here I&#39;ll say so I&#39;ll put the brackets and then here I will say three that means it it is going to return me the 19 as the value and once the operation is done then here I will convert back to the integer so here I&#39;ll say parent so that&#39;s it guys so I will put the brackets and I will assign send back to the one variable called custom date so here I&#39;ll say const and variable name is custom date so that&#39;s it guys it&#39;s very simple now so once we are having the custom date so right now this is going to return me the 22 as the as a value and then here we are doing the calculation and this Cal calculation returns me the 99 as value right so now what I will do is so here I&#39;m creating one locator as so here I will say element so what I&#39;m doing is here I&#39;m writing a simple CSS selector guys so the CSS selector is very simple bracket Open Bracket data iph date and followed by that I need to pass the so this particular custom date over here so that it will matches to the respective data date say for example I want to select 23 so here I need to pass the 23 as the value so in our case based on the calculations so it may return the 19 as the value it is going to it is going to select the 19 as the value so here simply I will say custom date and then I will say here two string that&#39;s it guys now after that so I need to pad the single quotation that means I need to write this particular data in the single quotation so that&#39;s a reason so here I&#39;m writing single quotation so this is the closing single quotation in the similar way I need to write the another opening single quotation so that&#39;s the reason here I&#39;ll add single quotation and after that simply we have to close the this particular bracket so I will say here bracket so that&#39;s it guys we are done with creating the element also now what we will do is by using simply this particular locator that that is element then we will click on the element so firstly we have to use the frame because we have the date picker inside the frame and here I&#39;ll say locator and inside the locator I&#39;m passing the element what we formatted just now by using the custom date and then so simply I&#39;m calling a method called click here so that&#39;s it guys so we are done with the implementation so now it should select 19 as the value because current date is 22 22 - 3 is is 19 right so let&#39;s run the program and we will see the output so let me comment out selecting the today&#39;s date which is not required so let me summarize what we have done once again so firstly we are navigating to this URL then we are identifying the frame by using the frame we are clicking on the date selecting field and after that we are identifying the today&#39;s date so based on the today&#39;s date we are performing the some calculations here and based on the custom date then we are forming the locator by using that locator simply we are performing The Click operation here so that&#39;s it guys so let&#39;s run the test and we&#39;ll see the output output so if you see here guys so there is a some problem we are not able to pass the proper data inside the data hyphen date attribute right so let&#39;s see what is the problem here so here we missed to pass the await keywords for the line number 22 and line number 26 so let&#39;s pass the await keyword here so that it will gets the promised value from the data hyphen date and and also I will pass the await keyword here for the line number 26 so that&#39;s it guys now let&#39;s rerun the play right test now so it should select the 19 as the date so 1219 20123 it should select if you see the date here so it is selecting the proper date say for example I want to select the today&#39;s date plus three that means it will let&#39;s say today today date is 22 and if I add three it will be 25 so it should select 1225 and 2023 so let&#39;s run the test now and let&#39;s verify the output so if you see here so right now it is selecting the still 19 let me check what is the problem so here we have not added the plus sorry I missed it so this time it should select the 1225 2023 so if you see here so it has selected 1225 2023 so this is how you can select the custom dates in the playright in this playr tutorial we are going to see assertions in playright there are two types of assertions one is hard assertion and second one is soft assertion so let&#39;s understand what is hard assertion say for example we have a one test case that contains five steps say for example I have written assertion after the second step in that case if assertion got failed in the Second Step that test will be terminate terminated then and there itself but in case of soft assertion the execution will be happen till the fifth step basically So Soft assertions are nothing but so these are the type of assertions so whenever assertion got failed so it will not stop the test execution it will complete the test execution if you&#39;re using the soft assertion if you&#39;re using the hard assertion your test will be terminated when assertion got failed so let&#39;s see the important assertions you&#39;ll be using across the project the very first one is URL so we will see how to verify the URL L and second one is title how you can verify the title of the web page and the third one is text for example you want to validate a text displayed on the web page so that can be validated by using the method called to have text and next one is editable so let&#39;s let&#39;s say for example we have a button so we want to check whether that button is editable or not let&#39;s say we have the text box so we will check with whether text box is editable or Not by using the Tob editable method and next one we have visible so we will be using the to be visible we will be checking the element is visible or not so that we can perform the next action so it can be click or it can be entering some data into the element and next one we have is enabled so we will check whether element is enabled or not so that if it is enabled we can perform the action on that web page element and the seventh one we have is disabled so many times we will be checking whether the element is disabled or enabled so such kind of scenarios so there might be a scenario after entering the data and we will be saving the record and after that we will be seeing that whether that data is editable or not whether it is disabled or not so that can be checked by using the to be disabled and next one we have the empty to be empty method so for example we have the text box so we&#39;ll check whether that particular text box text box is empty or Not by using the to be empty method and the last one we have we have is to have count so basically let&#39;s say for example we have identified a element and we have let&#39;s say five elements so we have written xath or CS selector so that matches with the five elements so whenever I open the web page all the five elements should be present in the web page right so that count can be asserted by using the to have count so let&#39;s see all these examples in the realtime web application now I will navigate to the vs code and let&#39;s create a quickly onepc file so here I&#39;ll see the file name as assertions dopc do JS and I will go to the one of the test and I will simply copy the test and I will come back to the assertions spec file so I will keep the only play right test skeleton so let&#39;s update the test name as assertions in play right so that&#39;s it guys now let&#39;s see the scenario so firstly we will validate the URL title and text so here I have opened the google.com and here I will search with playright by testers talk so here I will take the some part of the URL and I will open the another tab so this is a URL what we are using it so after hitting the URL we are getting the this Google search results right so let&#39;s use this URL and we will validate the this URL is correctly appearing or not not so firstly I will add the URL let&#39;s navigate to the URL first to assert anything we have to use the so let&#39;s say here assert URL so we have to use the one keyword called expect to verify anything to get the URL simply I&#39;m using the current page object followed by simply I&#39;m calling one method called to have URL and inside this function simply we have to pass the expected value so I will pass the correct value this time so this is what we are expecting in this URL and I will put some weight here I&#39;ll say a wait followed by Page wait for timeout and here I&#39;ll pass some seconds that&#39;s it guys so if I run this test it should launch the browser and it should enter the URL and it should validate the URL also and if you see here our test is getting passed let&#39;s say for example I will remove some part of the URL in the expected result and this time it will get failed because the actual URL and the expected Ur URLs are not matching in this case and if you see here so this is the expected string and this is the actual string so those both both the strings are not matching so that&#39;s the reason our test is getting failed so this is the expected failure now let&#39;s see how to assert the title so if you see the title of this particular web page so it is displaying play right by test stock hyphen Google search so let&#39;s assert the this particular web page title so here I&#39;ll say assert title so it is very simple guys same syntax we have to use it and here simply we have to call to the method called to have title so this function will get the current page title and here we have to add the expected value value so expected value is play rate by tester stock after that there is a hyph and followed by Google search so let&#39;s add that text here so Google search so that&#39;s it guys now let&#39;s run the test now and if you see here so our test is getting passed right say for example if I remove something here let&#39;s say I will remove by so this time our test will get failed because the titles will be not matching so whatever the actual and expected value will be not matching so if you see here expected and actual values are not matching so this is the expected failure now let&#39;s see how to validate the so here I&#39;ll say assert text say for example in this web page we will inspect this particular search text box and we will get the this particular text and we will validate with the our actual value so simply I will inspect the element and we will write a simple CSS selector by using that we will identify the element so here I&#39;m writing just uh single quotation and the brackets for the attribute and value and if you see here so it is matching with three elements but we will focus on the very first element so let&#39;s copy the CSS selector so this time we are asserting the text from the web page so here I&#39;m using await followed by so expect keyword I&#39;m using and inside this I&#39;m using the page object dot so here I&#39;m saying locator and inside the locator I&#39;m adding the locator what we just copied it from the Google and once we are having the locator so here I&#39;m saying the first so this particular element was matching with three elements so that&#39;s the reason I want to find only first element and perform the action that&#39;s it guys so here we have the locator now so I want to verify this locator text right so that&#39;s the reason here I&#39;m calling to the method called to have text and here we have to pass the expected value so this is the expected value so let&#39;s copy the play right by tested stock that&#39;s it guys now let&#39;s run the test and it should compare the web element text and the expected text and if you see here guys so our test is perfectly working fine so if I pass some incorrect data in the expected that time it will not match the expected and actual value then obviously our test will get failed and if you see here actual and expected values are not matching so this is the expected failure so that&#39;s it guys so we have seen how to verify the URL title and and text now we will see how to use the to be editable to be visible and to be enabled so already we have identified the text box you will see whether that particular text box is editable visible or enabled or not so here I&#39;ll say assert editable enabled and another one is is visible so let&#39;s do all the three things in a single time so what I will do is simply I will take this particular element so this particular element is nothing but the search text box what we have identified just now so that&#39;s it guys so here simply I&#39;m calling to the one method called to be editable if it is editable then our test will be passed if it is not editable our test will get failed so in our case it is editable so our test will get passed in the similar way we can use the to be visible so basically we can check whether element is visible or Not by using that we can perform the next set of actions so here I&#39;ll say to be visible and in the similar way I will call to the another method called to be enabled so in our case so all the assertions will get passed because our text box is editable it is visible and it is enabled also right now let&#39;s run the test now and our test will pass and if you see here guys so our test is perfectly working fine so there are no failures also now let&#39;s see how to use to be disabled to be empty and to have count so basically disabled we are verifying whether element is disabled or not and we are using to be empty to check the element is empty or not and final one we are checking the count so let&#39;s see all three examples so here I&#39;ll say assert disabled and followed by that empty we are checking the element is empty or not then we are checking the final one is count so we have we have already the locator that&#39;s the text box we have identified we&#39;ll check this text box is disabled or not so in our case it is enabled our test will get fail so that is fine so here it say to be disabled so our test will fine sorry our test will get fail because we are checking this element is disabled or not but in our case it is got enabled the expected behavior is our test will get fil so our our element is active now and if you see here received is enabled and expected is disabled so this is the expected failure guys this is how you can use the to be disabled you can apply this to be disabled where you can see the element got disabled now let&#39;s use how to check the empty so for example here I&#39;m calling one method called to be empty so I&#39;m using the same element I&#39;m checking whether this element is empty or not in our case this element is not empty it it has already some text in it the behavior of this particular assertion is it will get fail that is fine we can run it so you can check any text box where it is empty so in that case this assertion will get pass and if you see here guys so expected value is empty we are expecting empty as a text box but we are receiving not empty so here you can write after the bracket simply we can pass the doot so here I&#39;m checking not empty that particular text box right so if I run this test and this will work fine so previously we were checking only the text box is empty or not but this time we are checking text box should not be empty it should have some value so this time our test will get passed pass and if you see here our test is getting passed right so this is how you can use the 2 BMT method as well now let&#39;s see how to use the to have count if you see here guys so we have the one method called to have count so by using this one we can get the current page elements for example if we have located one element and if it is matching with multiple elements basically that will returns you the count of that element and then we can compare it by using the to have count so if you see the X paath sorry if you see the CSS selector whatever we have WR right so this CSS selector is matching with the three elements right and if you see the third element guys so this is the third element if is here three of three and if I go a little bit up here right so this particular element is there inside the I frame so that&#39;s the reason the count is here only two and here I&#39;m again using using the same locator and this time I&#39;m not using the first and after that here I&#39;m calling to the method called to have count and inside that I&#39;m passing the expected value as two that&#39;s it guys so our test will get passed because this particular locator is matching with only two elements as I said the third element is there inside the another I frame so we should not we will be not able to identify the Third element so that&#39;s the reason count of this locator is two let&#39;s run the test now and it should find the locator count and it should match with the expected count value and if you see here so we have the sum error so directly we have to pass the number not a string so that&#39;s a reason let&#39;s remove the quotations that is fine now I will rerun the test once again so if you see here guys our test is perfectly working fine right say for example if I pass three number here so our test will get fail because the element is matching with only two elements and if you see here guys the expected value is three but we received only two from the web page so this is the expected failure guys so this is how you can use the all different types of assertions in the playright now let&#39;s see how to use softt assertions in playright so far you have seen all the assertion examples with respect to the hard assertion right so let&#39;s see couple of examples for the soft assertion as well so as I said so when we apply the soft assertion so our test execution will continue it will not terminate there exactly right so our test is working fine right now so I&#39;m just running the test so there are no failures in the playrate test so all the assertions are working perfectly fine right so intentionally I will fail this assertion I will run the test so where we are asserting the URL I&#39;m failing it and our test will fail in the verification of the URL and if you see here guys so it is getting failed it is not able to match the expected URL and the actual URL so this is the expected failure so what you can do is simply to apply the soft assertion you need to say after the expect so simply you need to call to the one method called here called Soft that&#39;s it so here I have called to the soft method after the expect and if I run this test right so it will make only this particular step as a failure and it will run the rest of the steps in the test so that&#39;s the beauty of the soft assertion but still our test will be getting failed in that particular step and if you see here guys our test got failed in while validating the URL so let&#39;s look at the report now so I will go to the report and let me open the index. HTML report and if you see this test right guys only our test is getting filled in this particular step but if you see the rest of the steps so rest of the steps are perfectly working fine right now let&#39;s apply another soft assertion so here I will make so while validating the text I will pass the incorrect expected value so our test will get fail here also right so that&#39;s the reason here I will apply the soft assertion in playright so that&#39;s it guys so I will run the test and this time our test will get fail in two steps so previously our test was getting failed in the only one step and rest of the steps were getting executed uted successfully so that&#39;s it guys so here you can see that expected and actual results and I will go back to the playright test report and I will refresh it so let&#39;s go to the steps and if you see here also it is listing down the first assertion failure First Step failure and this is the second step failure and if you see the steps also of the step sorry test the first failure is there here while validating the URL and the second failure is there in the while validating the text so this is how you can apply the soft assertion in the playright in this playright tutorial we are going to see what is watch mode and how to use watch mode in play right so let&#39;s understand understand what is watch mode first so watch mode is nothing but so whenever I making some changes in the play right test right so after making the changes automatically that test execution will be triggered after making the changes and once you save the file automatic test ex execution will be triggered if you switch on the watch mode to the any spec file or any test so let&#39;s see how to use the watch mode now so I will go to the vs code and here I will navigate to the terminal so let&#39;s open the play right test Runner first so here I&#39;ll write npx followed by play right test and followed by hyphen hyphen UI this command will open the playright test Runner if you see guys so it has opened the playrate test Runner so it list Downs all the spec file and all the all your automation tests so here I&#39;m selecting one of the spec file called assertions do spec. JS so if I select this particular test right so if I come right side so there are three icons and if you see here guys so there is a one icon called watch so before we switch on this Swatch mode so let&#39;s run the test and we&#39;ll see whether this test is working fine or not then later we will switch on the watch mode and we&#39;ll make the changes to the this particular test and we will see whether it is playright is automatically triggering the test or not so if you see here guys so our test is perfectly working fine and also here you can see the check mark and here you can see that so our test is passing one of one so here I will simply click on the I icon that that is the watch mode so if I click on that one so it is turned on now so if you see the other play right test so these are the automation tests so it is not enabled with the watch mode so only this particular test is switched on with the watch mode so I will go to this particular spec file and I will make the changes automatically this test will be triggered for the execution so I will go to the vs code and and this is the spec file what we are referring it so here I&#39;m writing very simple statement here so console DOT log so simply I will write some statement inside the log method so I will say assertions in playright test is running that&#39;s it guys so I have saved it and if I come back here so if you see here guys so it has started the execution because I did not actually click on the run for this particular test so automatically test execution is started so this is the beauty of the watch mode guys so I will go back to the vs code once again so I will make small change here and if you see here guys I have not saved this particular file right if you see here so this file is not saved yet and I will go to the play right test Runner so this execution is not started now so let me save it and we&#39;ll come back and we&#39;ll see the execution once again I have saved the file and if you see here guys so it is already CED for the execution and also execution is started and if you see here on the right side window guys so our test is getting executed and also here you can see so our test is getting passed so this is how you can use the watch mode in playright in this playright tutorial we are going to see how to enable traces so whenever the test got failed so we will add the more information about the test execution life cycle so these traces will be added into the play test report where we will be seeing all these information so we can see all what are the actions done metad dat console data logs Network details and also we can see the screenshots with respect to the time frame also so now I will go to the vs code and here I will quickly create a one spec file so here I will give the spec file spec file name as failed test dopc do JS that&#39;s it I will go to the one of the test and simply I will copy the test and I will go inside the just now create a test and I will paste it so intentionally I will fail this test and we will check the playright test report whether test failure traces are added or not so we have to modify one flag in the configuration file then we will get the TSS added into the play test report now we have not enabled it so you will not find the any Trace information and if you see here guys so our test is getting failed so we it is not able to match the actual string and the received string so this is the expected failure and if I go to the play right report I will open the index.html report and if you see here guys so the our test got failed and if I scroll down only we have the screenshot that&#39;s it right so we will see how to add the trace information as well where you can see lots of details about the test execution life cycle so I will go back to the vs code so you need to add the one flag called so under the defined configuration so you need to go inside the use object so there is the one flag called Trace colon and here we can pass multiple values so if you have enabled retry mechanism you can keep this particular value otherwise so for demo purpose I&#39;m editing it so simply you can select the retain on failure so if you not enabled retry mechanism simply you can keep the retain on failure so that&#39;s it guys so this particular flag you need to update it in your playright configuration file and then you can close it so here I&#39;m using the terminal to run the test now so I will clear all this data that&#39;s it guys now I will run the this particular spec file fail test. spc. JS file from the terminal so here I will use npx followed by play right test hyphen hyphen headed and then I will specify the our spec file name fail test dopc Dot GS so that&#39;s it guys now I&#39;m executing the spec file and when test got failed right it should attach the trace information to the play right test report so previously playright was not doing it we have enabled that particular flag so now it will attach us the trace information and also automatically it is going to open the report guys and if you see here guys so our test got failed so this is the expected failure right if I scroll down little bit down so here you can see where exactly this test got failed and also you can see the screenshot and if you scroll down here so there is another section called traces right so let&#39;s click on the traces and if you see here guys in the top you can see the time frames based on the time frames you will be seeing the screenshot right so you can verify all the screenshot and also here you can see the test and the respective test steps so what are the actions it has performed here right so if you select any test and on the right side you can see the screenshot also so here I&#39;m selecting the test step and if you see here guys there&#39;s another section action and before and after so before means here I have selected the very first step so before means so before entering this URL so you can see the what is the screenshot of the browser so browser was very blank that&#39;s the reason you will be seeing the blank screenshot and once it is navigated to this particular step or once it is executed the First Step you can see what is a screenshot like what was the web page displayed right so you can select the step and you can see the before and after what happened here you can see the respective screenshots also and also you can see the metad data so when test ex execution started and browser details and how many actions are done or how many events are done all those metadata you can check inside the metadata section and coming to the below section so here you can see the call details say for example if I selected one of the step from the test so it will display what what is a call made you can see all the call details coming to the logs so it will display all the logs what it what are the locks it has created during the test execution so coming to the error information so it will display all the error details what is the reason how test got failed and coming to the console so this console is very much similar to the what you see in the browser guys so it has all the details console details and coming to the network so here you can see what are the calls it has made and these two tabs you&#39;ll be seeing it in the web browser as well console and network network tab so all those details you can find it here coming to the source so it has the source code like we have written the test right by using the JavaScript so that source code you can find it here and also you can see the where exactly our test got failed also and also it is displaying the all the error information here right by using that we can easily track it and coming to the last section that&#39;s the attachment so here you will be finding the screenshot where exactly our test got failed so this is how we can verify the traces when playrate test got failed and also you can verify all these details in the playright test Runner as well in the previous tutorial I have showed how to use the playright test Runner so all these sections are available in the playright test Runner as well when you are running it manually any playright test hi friends this is bakaa in this chapter three of playrate full course we are going to see what are annotations and what are the different types of annotations we are using in the play right so we will see how to skip a test and how to run only selected tests by using the playright annotations and then next we are seeing how to group The automation tests and how to execute it based on the groups and next we are going to see how to tag a test and how to execute the only tagged test throughout the project and next we are going to see how to repeat a test multiple times so based on the need or demand and next we are going to see how to automatically retry the failed test cases and next we are going to see how to perform parallel testing using playright and next we are going to see how to parameterize tests in playright so where basically how you can pass the different sets of test data to the play tests and finally we are going to see how to perform the visual comparison test testing using playr where we are comparing the two images that means screenshots of the actual web page and the expected web page in this playr tutorial we are going to see how to skip a test and how to run only selected tests in playright so there might be a situation where you want to run only few test cases from the spec file so that can be achieved by using the only keyword so let&#39;s see how to skip a test so here I will go to the vs code so let me create a quickly One spec file here annotations dopc do JS so that&#39;s it so here I will go to the one of the spec file simply I will copy the test and I&#39;ll paste it here that&#39;s it guys so this particular spec file has the only one test so I will copy this particular test and and I will add total three playright test so that&#39;s it guys then I will rename the test with so this is the third test I&#39;m adding the name as assertions in play rate three so this is the third test and this is the second test and this is the first test right so currently we have three automation test in this annotations dopc file so let&#39;s run all these three automation test so we will verify whether all the three automation tests are working fine or not so I will run the test so here I&#39;m running the spec file so currently it is running the very first test so once the execution is completed we will see how to skip a test from the test execution using playright so now the third test is running so that&#39;s it guys if you see here so all the three automation tests are perfectly working fine and those are getting passed so I will go to the Explorer now say for example I don&#39;t want to run the assertions in play right 2 so simply you can use the after the test simply write Dot and simply here add the skip so before I run this particular test guys so let&#39;s let&#39;s look at the report as well in that report you will be able to see the all the three automation tests are got passed so if you if you see here guys so total automation tests is three and those are those all are getting passed last right so this time I have added the skip after the test because I don&#39;t want to run this particular playright test so right now only assertions in playright test one and assertions in playright test three will be getting executed so I will run once again the spec file and also we can see the same report in the HTML as well so right now the first test is getting executed and now the third test is running because second test is getting skipped and you can see the output as well so that&#39;s it guys and if you see the output also one test is skipped two tests are passed so let let&#39;s go to the report and let&#39;s refresh the report also see if you see here guys total test is three two are getting pass and here you can see that one test got failed and here you can see the name of the test which got skipped so this is how you can use the skipped statement with the test in playright now let&#39;s see how you can run the only selected automation test right so there might be a scenario you don&#39;t want to run whole spec file right so in this case I want to run only assertions in play right one test so that&#39;s the reason so after the test simply you need to add the dot so so simply call to the one function called only that&#39;s it guys in this spec file only this particular test will be getting executed so let&#39;s run the spec file once again so here I&#39;m running the annotations. spec file so this time only one test will be running because we have used only keyword to run only selected automation test so if you see here guys so only one test is there and that is got pass so let&#39;s look at the HTML report and if you see here guys total test is one and that is getting passed right so this is how we can use the Skip and only keywords in the playright in this playr tutorial we are going to see how to group test cases and how to run the group of test cases so basically we will see how to create a single group in playright and how to create multiple groups and how to execute the group of test cases we will see using the playright so here I will navigate to the vs code now and here I will create a simple spec file now so here I&#39;ll say group dopc do JS so that&#39;s it guys and here I will go to the one of the spec file and simply I will copy the One automation test and I&#39;ll paste it inside the group spec file so that&#39;s it guys so let&#39;s modify the test name as test one so right now we have the only one test so I will take the copy of this test and I will create a another test so basically I&#39;m creating the duplicate of first test so here I I will give the name as Test 2 so that&#39;s it guys so this is a very common spec file you have seen already how to create a spec file and how to create the play test now let&#39;s see how to create a groups so we have to use the describe function to create the groups so here I&#39;m using the test object followed by here I&#39;m calling the describe function so inside the describe function we have to provide the group name so here I&#39;m giving the first group name group name as smoke testing and followed by that I will simply give the function that&#39;s Arrow function simply I will close and simply I will close and open sorry here I&#39;m just opening and closing the flower brackets that&#39;s it guys so we have created a one group now so similarly we can create the another group so here I&#39;m creating another group called sanity testing that&#39;s it guys now I will come back and I will take this test one and test two and I will put into the smoke testing bucket so that&#39;s it guys so let me format this particular test and what I will do is so we have added two automation test into the smoke testing bucket now let&#39;s create one test under the sanity testing group as well so I will take the copy of this test and I&#39;ll paste it inside the sanity testing group so here I will read rename the test name as test three so that&#39;s it guys so we have created the one group called Smoke testing and the second group as sanity testing so smoke testing is having two test cases and Sanity testing is having only one test so now I will go to the testing so here I will just go to the spec file what we have just created so here I&#39;m opening the spec file that&#39;s group Dot spec. JS file and if you see here guys we have the two groups one is smoke testing and another one is sanity testing so if you see here guys test one and test two is belonging to the Smoke testing and test test three is belonging to the sanity testing so in the realtime project you can put the multiple tests into the group and based on the need or based on the demand you can go and execute the group of test cases so simply I will trigger the smoke testing test cases so it will execute test one and test two the first test is getting executed now already it is launched the second test case execution and if you see here guys so it has executed the smoke testing group and that contains two tests those are getting passed and in the similar way we can trigger the sanity testing also so it opens the URL and it will validates the some of the things in this web page and it will wait for some time then it will closes the browser right so if you see here guys one test was there inside the sanity testing group and that test is getting passed so this is how you can create the groups and execute it from the playright in this playr tutorial we are going to see how to tag a test and how to execute the tagged tests in playright so here I will go to the vs code and quickly I will create a spec file here so here I&#39;ll say spec file name as tag test Dot spec. JS so that&#39;s it so here I will go to the one of the spec file and simply I will copy the one test and I will come back to the tag test dopc file and here so we have only one test so let me summarize what we are doing in this test so we are navigating to youtube.com and we are entering the SE Search keywords and we are clicking on the search icon and then once we got the results we are clicking on the playlist and then then we are validating the title of the web page that&#39;s it guys now let&#39;s see how you can tag a test so let me modify the test name as so I will give the test name as test one and similarly I will create the copy of this test so I want to create a total three automation test here so this is the second test test two and I&#39;m creating another test that is test three that&#39;s it guys so tagging is very simple guys so whenever you are creating a test so whenever we are writing the description of the test then and there you can specify the tag name for this particular test so by using the atate symbol so here I&#39;m giving the tag name as tag one and here you can give the tag name as smoke testing sanity testing or regression testing also you can give it for the test one I&#39;m giving the tag one and I will come to the test two here and here I&#39;m giving the tag name as test sorry tag two and for the test three I will give the tag name as atate tag one that&#39;s it guys so we have given two tags here one is atate tag 1 another one is at theate Tag 2 that&#39;s it guys for at theate TAG one we have two test at theate Tag 2 we have only one test now let&#39;s see how to execute the tagged test by using the terminal so I will open the terminal here so it is very easy guys so simply you can write the npx followed by play right and followed by test and then here you need to write The Hyphen hyen grap followed by that we need to specify the tag name so in our case I want to execute the tag one automation tests so that&#39;s the reason here I have entered a tag one for tag one we have total two automation tests and at theate Tag 2 contains only one automation test and if you see here guys so second test is getting executed just for the demo purpose I have given the at theate TAG one and atate tag 2 so in the realtime projects you can give the at theate smoke testing at the rate sanity testing at theate regression testing and if you see here guys output so we had two automation test belong to the at theate test one sorry tag one so those are getting executed here right so let&#39;s open the report and we will execute the tag to test as well if you see here guys so test one is belong to the atate tag one and test three is belong to the at theate TAG one right so total test count is two and those are getting passed here right so this time I want to execute the test which belong to the at theate Tag 2 only test two will be getting executed this time so here I will modify the tag name as at the sorry guys so we need to mention at theate TAG two and if you see here guys and only one test got triggered for the execution and that is already running right now so it validates the title of the web page and it will closes the browser that&#39;s it guys and if you see the output here so only one test it was having that was belong to the adate Tag 2 and those that particular test got executed so let&#39;s open the report and refresh it and if you see here so this time we have executed tests which are belong to the at theate Tag 2 so right now only one test is belong to the at theate Tag 2 so this is how you can create the tags for the playright tests and this is how you can execute the tests which belong to the specific tags in this playrate tutorial we are going to see how to run a test multiple times in playright to check the stability of an application to check the stability of an automation test as well so here I&#39;m navigating to the vs code so here I&#39;m inside the terminal terminal right now so let&#39;s execute the assertions do spec. JS file so which contains only one test so we will try to run the same test multiple times so here I&#39;m using the command called npx followed by playright and followed by that test and here we have to specify the spec file name assertions dopc do JS that&#39;s it guys so this is a very basic command which we are using it for the executing the specific spec file now here you need to enter The Hyphen hyphen repeat and and hyphen each equal to here we have to specify the count say for example I want to run this particular test two times so here we have to pass the two as the value if you want to run 10 times you can pass the 10 as the value so first time the test is getting executed and the same test will run once again so it looks like it has already executed so let me rerun it so it is basically launching the two browsers at the same time so that&#39;s the reason you are seeing only one test in the UI and if you see here so second test also got completed and here you can see that two are passed now this time I will pass the three as the count so same test will run three times so if you see here guys so it has launched the two browsers right now that means two same test is executed two times in a two different browsers and now the third one will launch if you see here guys the third test got launched so once the execution is finished we will open the report and we will see it and if you see here guys the same test got executed three times so that&#39;s the reason here you can see three pass so let&#39;s open the report and we should be able to see the same test executed three times if you see here so this is this this is the test name and and here you can see that three entries right and also here you can see that total test count is three and pass test count is also three so this is how we can execute the same test multiple times in play right in this play tutorial we are going to see how to retry a test in play right so when automation test case got failed so we will set the configuration based on the configuration it will number of times it it is going to retry try the same test for the execution so let&#39;s see how to do this in the playright so here I will navigate to the vs code and already we have the one test created which is getting failed in the previous playr tutorial that is fail test. spec file so let&#39;s run this test and we&#39;ll make sure that this automation test is getting failed and then we will make the configuration changes and we will observe So based on the configuration whether it is retrying for the execution or not and if you see here guys so our test should get failed so it will throw the results let&#39;s wait for a few seconds and if you see here guys actual string and expected strings are not matching so that&#39;s the reason our test got failed so our test is getting failed failed so let&#39;s look at the report as well and if you see the report so our test is getting failed right and here you can see the all the error information and also steps and the screenshot and also you can see the trace information now how you can set the configuration to retry the failed automation test so you need to go to the playright doc config.js file and here you can see the defin configuration inside this one so we have the one flag called retrice so right now the value is passed on to the pipeline if you see here already two is there so whenever we are executing the playright automation test from the pipeline so it is going to ret try the two times when test is getting failed but to run that means to run the rerun the fail test automatically you need to pass the value over here so right now I&#39;m passing it as one if my test got failed so it will retry for only one time so this particular configuration you need to set so that it will it it is going to retry the fail test automatically so I&#39;m just saving it and closing it so again I&#39;m going to rerun the test from the terminal so here I will write npx followed by play right and followed by test and after that simply I need to pass the spec file name so we want to execute the failed test dopc dogs so that&#39;s the reason here I&#39;ll write failed test dopc do JS so it is going to run the only one test because that spec file has only one test and if the test got failed it is going to retry for only one time because we have given the configuration value as one for the auto retrive so first time it got executed and our test got failed it is going to retry the first time so we we have added only one so that means it is going to retri the failed test only once and if you see the output also here that is the very first retry so it is going to open the report as well and if you see here our test is getting failed so this is the original run execution log details error information screenshot steps and traces and there is another tab for this particular test so here you can see the retry one so these are the details for the test execution where it is where it is got failed what is the screenshot and what is the traces so we have executed only one time after the test got failed right so if I add to here so it is going to retry two times if my test got failed so here I&#39;ll just press crl C so that&#39;s it I will close this particular report and I will rerun the test once again so this time two times retry will happen because the configuration value what we have added is two so this is the original test execution so this time our test got failed and first retry will happen here so retry number one so already execution is happening here that is the first retry and the secondary R TR also will be triggered So based on the configuration value if you see here guys so retry number two and here we can see the results also that means the execution is happening and that&#39;s it guys and if you see here so our test is got failed and it has opened the report so this is the original execution results and this is the first retry and this is the second retry so this is how you can set the configuration value for the retry in play right and this is how you can execute the failed test cases automatically in play right in this play right tutorial we are going to see how to perform parallel test execution in playright that means how to achieve the parallelism in the play right so I will navate to the vs code now and here so we are going to execute the one spec file called group. spec. JS file so which has the two groups one is smoke testing which contains the two automation test that is test one and test two and we have another group called sanity testing which contains the three automation test test three test four and test five so total we have five automation test in this group do spec do JS file so that&#39;s a bit about the spec file which we are going to execute it in couple of minutes so for the parallel test execution so we need to make sure that one flag is set to True inside the playr do configuration file that is under the defin configuration so there is a one flag called fully parallel colon and here we need to set the value as true always to run the play right test in parallel mode that&#39;s it guys now let&#39;s try to run the group. spc. JS file from the command prompt you can run it from the command prompt or you can run it from the terminal as well so simply I&#39;m writing the npx and also we are passing the number of tests can be triggered for the execution so that parameter value also we are passing it from the terminal only so here I&#39;m just passing the npx command followed by play right and after that I&#39;m adding the test and here we have to specify the spec file name so here I&#39;ll say group dopc do JS and after that so this is where we have to pass the proper value so that play play rate can trigger the appropriate test executions that means the number of tests you want to trigger for the EXE tion at the same time so that parameter value you need to pass it here so simply you can write hyphen hyphen workers and space let&#39;s say we have the total five automation test so that&#39;s the reason here I&#39;ll write three that means at the same time it is going to execute the three automation test if I pass it as the three value so let&#39;s pass the three and we will see whether it is launching the three browsers and it is going to execute the three automation test at the same time so it has triggered the all the let me just minimize this window and if you see here guys it has triggered the three test for the execution and also it has triggered the next two automation test for the execution and then finally it is going to complete the test execution so right now this is the last test execution is happening so total we have the five automation test and if I go to the vs code and here you can see that five tests are passed and we can check the results inside the playright test report and there also we should be able to see all the five tests are passed so if you see here so this is the total count and this is the passed count so this is the expected results and also here you can see that test one and test two are belong to the Smoke testing group and test three test four test five is belong to the sanity testing group so let&#39;s trigger the five sorry let&#39;s trigger the four test cases execution at the same time this time so here I&#39;m passing the worker workers as four that means at the same time it is going to execute the four test cases so it has opened all the browsers let me minimize all the browsers so that I can show you the execution if you look at the taskbar guys it has opened the four browsers that means four test case execution is happening right now so let&#39;s wait for some time so that it will completes the all the execution right now only one test execution is happening that&#39;s it guys so let&#39;s go to the vs code and if you see here guys so it has took 41 seconds and all the five test cases are passed so let&#39;s go to the report also so let&#39;s refresh the report and here you can see that all the tests are getting passed here so this is how you can perform the parallel testing in the playright in this play tutorial we are going to see how to parameterize tests in playright so here I will navigate to the vs code and here I&#39;m creating quickly One spec file called parameterize test dopc do JS so that&#39;s it guys so here I will go to the one of the spec file so simply I will copy the test and I will add it inside the parameterize test dopc file so I will delete the stuff which are not required and I will keep only the skeleton of the playrate test so here I will update the test name as parameterize tests in play right so that&#39;s it guys now let&#39;s discuss the manual scenario first firstly we will navigate to the youtube.com so you need to copy this URL and you need to add it inside the goto method so already we have added this URL then we have to search with keywords that&#39;s it guys so this is the scenario what we are going to automate it so here simply we will add the play right by tester stock then we will press the enter from the keyboard so let&#39;s inspect this search text box first so I will go to the inspect and if you see here this particular input put tag details so I&#39;m using the placeholder equal to search as the value so here simply I will copy this search value and here I&#39;m using the await followed by Page dot get by placeholder and inside this one simply I will add the value as search so firstly I will click on the this search text box then we will enter the Search keywords later so here I will call to the method called click and then I will use the same locator and then I will call to the method called fill by using the fill I will enter the Search keywords so here I&#39;ll say play right by tester stop so that&#39;s it guys so once we enter the Search keywords we need to press the enter from the key keyboard or you can try to click on the search icon as well so in my case I&#39;m pressing the enter from the keyboard so I&#39;m using the same locator then I&#39;m calling to the me calling to the method called press and inside the Press I&#39;m just entering the enter as the value that&#39;s it guys then I will wait for some time so here I will use the await followed by page then I will call to the function called wait for timeout so here I will specify some milliseconds so that&#39;s it guys so let&#39;s verify this test is working perfectly fine or not then we will discuss how to per how to perform the parameterization in the play right so I will run the test now so it has navigated to the youtube.com then it has entered the Search keywords and also it is able to press the enter from the keyboard and also you can see the results our test is getting passed and here you can see the in the test results tab also our test is working perfectly fine right now let&#39;s see how to parameterize tests so here I&#39;m creating one simple constant array variable so here I&#39;ll say constant here I&#39;ll say the variable name is Con sorry variable name as test parameters equal to square brackets I&#39;ll say here and inside the square brackets I will add the array elements so here I&#39;ll say first one and the second one and the third parameter the first parameter is play right by tester stock and then second time I will say Cypress by tester stock and third time I will say JavaScript by tester stock so these are the parameters I&#39;m using that means these are the parameters I&#39;m creating it so that I can parameterize this particular test so that let&#39;s say for the first time this particular test is running so it will search with parameterize sorry it will search with playright by tester stock first time and when second time it is running same test so it will search with the Cypress by tester stock and so on so we have the test data that means we have the test parameters to be passed on to the test is ready now so here we have to use a simple for Loop that is a for off Loop and here simply I will take the array variable that is a test parameters so simply I&#39;ll paste it here that&#39;s it guys and then here here I will give the variable name as search keyword so that&#39;s it guys so simply I will take this whole test and I&#39;ll keep inside the for Loop so let me format it so once we have the test parameters are ready and after wrting the for Loop so we have to read this particular test data that is the one by one this for Loop will gets the all these parameter values from the array and once this particular variable is having the respective value we have to read this test sorry we have to read the this variable name inside the our line number 15 where we are exactly searching with the keywords right so that&#39;s the reason what I will do is so simp simply here I&#39;m writing dollar and Then followed by open flower bracket and close flower bracket so simply I&#39;ll take this variable and I&#39;ll paste inside the flower brackets that&#39;s it guys and also you need to make sure that you are writing this description inside the single quotation so that&#39;s it guys once you have written this one so let me check what what is the issue it is showing some error over here yeah it is clear now so once you are having the search keyword value inside the test description simply you can use the this particular variable name where you want to use that particular test parameter value guys that&#39;s it let me summarize what we have done so far so we have created simple test where we are uh navigating to the youtube.com and searching with the keywords and after that we have created the one array that contains the three Search keywords and this test data I&#39;m passing on to the our test by using the for Loop that&#39;s it guys it&#39;s very simple so same test will be getting executed three times by passing the different sets of test data now let&#39;s run the test our test is ready now very first time it should pass the play right by tester stock in the search text box it has to enter the keyword so it is entering the play right by tester stock then second time it will search with Cypress by tester stock and it is perfectly working fine and this is the third time it should search with JavaScript by tester stock so that&#39;s it guys so it is working as expected so let&#39;s open the report and we will check the report and if you see here guys so till this it is the test test case name and at the end you can see the what is the data passed onto this particular test right and here you can see that total count is three and those three automation tests are getting passed and here you can see that different Search keywords are passed onto the same test so this is how we can achieve the parameterization in the play right in this playr tutorial we are going to see how to perform visual comp comparison testing or how to perform visual testing in playright so what does this means visual comparison or visual testing so basically let&#39;s say for example we have opened a web page and we will capture the screenshot of that particular web page and that will be saved as a reference screenshot for the future execution and whenever we second time we are trying to run the test and that will capture the actual page screenshot and it will Compares with the expected reference screenshot so basically it is a comparison of the two screenshots if there is a difference we will get to know like what is the difference between the actual and the expected screenshots so let&#39;s go to the vs code and let&#39;s see how to perform the visual comparison testing in the playright so here I&#39;ll quickly create a one speec file so here here I will give the the spec file name as visual testing dopc do JS that&#39;s it so here I will go to the one of the test simply I will take the copy of this test and I&#39;ll come back to the visual testing dopc file so here I will keep only the skeleton of the play right test so that&#39;s it now I will update the test name as visual comparison testing in play right so that&#39;s it guys now what I will do is so simply I will navigate to the web page here now let&#39;s discuss what is the scenario we are going to automated it so we will open the github.com /login page so so we&#39;ll open this particular page and we&#39;ll capture the snapshot of this particular page and we will keep it and whenever we execute it second time or third time and so on so it basically compares the actual screenshot with the expected snapshot screenshot so simply I will copy this particular URL and after that we will take the snapshot of this current page and here I&#39;m adding the URL inside the go to Method so firstly we have navigated to the this URL now so here I will give the a wait do page dot so here I&#39;ll say wait for timeout so here I&#39;ll give the some 3,000 milliseconds that&#39;s it guys now to take the screenshot or to take the snapshot very first time when you are writing the auto test so simply you need to use the await keyword followed by you need to use the expect function here inside this you need to pass the page object and followed by you need to call to the one function called to have screenshot and inside this we have to give the snapshot screenshot reference name so here I&#39;m giving snapshot screenshot name as GitHub page do PNG that&#39;s it guys so simply I will save the test and I will run it and if you see here under the tests folder right now there is no reference created and if I run this test it will create the one snapshot folder inside that we will be finding the one PNG format screenshot of the current web page now now I will run the play right test and if you see here guys so our test will get failed very first time and it says that a snapshot does not exist at this location so this is the expected failure guys when you are writing the or when you are implementing the script very first time you will get this exception so you can ignore it so simply you can delete this one and now if You observe on the left side so there is a folder created called visual testing dopc do JS iy snapshots inside this folder so there is a screenshot created with PNG format if you see here so this particular name what we have given and followed by that the browser name and followed by that based on your number of operating systems it has given the win32 so if you look at the folder name also this is the spec file name followed by the Snapchat shots right so now the snapshot is present here and if I rerun the same test this time it will perfectly work fine so our test will get pass there will be no issues and if you see here our test is working fine and our test is getting passed right so now what I will do is so I will go to the this login page and simply I will click on this username and I will enter something in this username field then there will be some difference in the actual web page actual screenshot and the expected screenshot then our test will then our test case will get failed so here I will use the ID of the web element so simply I will press crlf and here I&#39;ll press the Ash and followed by the ID value so I have return a simple CSS selector now we are able to identify the username text box and here I will use the AIT keyword followed by Page object dot so here I&#39;ll say do locator and inside the inside the locator I will add the CSS selector value firstly I will click on the username text box and after that I will enter some data inside the text box so here I&#39;ll say fill method and here I&#39;ll just write the some text inside the text box as tester stock that&#39;s it guys so whatever the image we have captured inside the snapshot right so this image does not have the entered data screenshot here right so this time our test will get failed so that is the expected failure so so basically we are performing the two images comparison using the playr tool so that&#39;s it guys now I will run the test now sorry guys so what we have done is just we have return return the locator and we have performed the action but we haven&#39;t compared it after that right so if you see here guys so after writing some data into the text field and we have to again verify this particular image right so simply I will take the same line of code that&#39;s the line number nine and I&#39;ll paste it after entering something in inside the text box right so in the line number n we are comparing the two images and in the line number 14 we are comparing the two images so this is the before actions to two images comparison and in the similar way here I&#39;ll say so this is the after action two images comparison right so that&#39;s it guys now I will execute the test once again so this time so it will get failed our test will get failed in the line number 14 so when we are trying to compare the two images in the second time so if you see here guys the error is very much clear so screenshot comparison got failed right now let&#39;s open the report so here I will go to the index.html report and I will open the HTML file and if you see here guys so these are some details about the screenshot sorry F and here you can see that where exactly it got failed and if you see here guys so there is another section got added image mismatch if I scroll down a little bit so we have the screenshot section and also we have the traces section but if you see here so we have the additional section got added when you are comparing the two images by using play right so that section name is image mismatch colon you can find the screenshot name and this is the difference guys so this is the actual image and this is the expected image and if you see the difference image so only the text what we have entered in the web page is only the difference right so this is how you can compare the two images in the playright automation tool hi friends this is bakaa in this chapter four of playright full course we are going to see what is environment file and how to create environment file and also we will see how to access the environment file configurations in the play right test and next we are going to see what is data driven testing and how to do a data driv testing using Json file and also we will see how to perform the data driv testing using CSV file in playright and next we are going to see how to run the playright test on the multiple environment such as Q environment stage environment broad environment like this and next we are going to see what is Page object model and why page object model is required and also we are going to see how to implement the page object model in playright and next we are going to see how to do video recording of the automation test execution in playright and finally we are going to see how to make the full screen browser using playright in this playr tutorial we are going to see how to create environment file and how to add the configurations into the environment file and also we are going to see how to use the configuration data in the playr test so before we get started with the spec file creation so you need to install one package called EnV so simply you can open the command prompt and you and you can enter the npm space install space. EnV and space hyph iPhone save so once you execute this particular command this will installs you the EnV package into your playright automation framework so once the installation is done so you can see here one package is looking for funding so it is already added the one package maybe if somebody is interested they can give the funding to what work on this particular package so if you see here guys already one package is added and once the once the installation is completed like this you can go to the vs code and open the package.json file and if you see here in the line number 14 dependencies part so there is a one package got added right so whatever the installation we have done so that package is added over here so once the installation is completed you will be seeing the this particular package name and respective version over here in this dependencies that&#39;s it guys so this is how you can install the EnV into the playright automation framework now let&#39;s quickly create a onepc file so here I&#39;m creating a one speec file called read EnV file dopc do JS so that&#39;s it so here I will go to the one of the test and simply I will take the copy of this test and I&#39;ll paste it here and here I will delete the all the stuffs which are not required for us and then I will update the test name as read EnV file in play right so that&#39;s it guys now let&#39;s look at the manual scenario and we will automate that particular scenario then we will create the EnV file and we will add all the configuration in that EnV file then we&#39;ll see how to read the EnV file in playright so let&#39;s discuss the manual scenario first so firstly I will open the google.com and once we enter this URL we will inspect the search text box here and we will enter something here and then we will press the enter from the keyboard that&#39;s it guys so simply I will take the URL and I will go to the vs code so here I&#39;m using the await followed by page. go to and simply I&#39;m adding the URL here so once we open the browser so it will navigates to the this particular URL now we have to inspect the search keyword so here I&#39;ll say search with keywords so let&#39;s inspect the search text box here so there are multiple attributes and values over here so I&#39;m using the ID value I&#39;ll take the ID and here I&#39;ll press hash and the value so I have written the simple CSS selector by using the ID I&#39;m identifying the element so we have identified the search text box and here I&#39;m using the AIT keyword followed by Page object dot so here I&#39;ll say locator and inside the locator I will add the CSS selector value then firstly I will click on that particular text box then I will use the same locator and then I will enter the data into the text box by using the fill function so here I&#39;ll say play right by testers talk that&#39;s it so once we enter the Search keywords so we will press the let&#39;s enter the play right by tester stock so once we got the results here right so we to get the results here we have to click on this search icon or we have to press the enter from the keyboard so we will press the enter from the keyboard so I will use the same locator and after that so simply I&#39;m calling the one function called press and inside this I&#39;m passing the value as enter that&#39;s it guys so let&#39;s wait for some time once we perform all the actions so here I&#39;m saying wait for timeout so you can give any number of milliseconds here that&#39;s it guys so let&#39;s verify this test is working fine or not then we will quickly create the EnV file insert the playright automation framework then we will see how to read the EnV file and if you see here guys so we are able to search with playright by tester stock in the Google search page right and our test is working fine right that&#39;s it guys now what I will do is inside this our project I&#39;m going to create a one file called ENB that&#39;s it guys so I have opened the file so here I&#39;m adding the configurations you can add any configuration say for example I&#39;m adding the first configuration as environment so here you can add the respective value and let&#39;s add the URL here and we can add the respective value we can add other fields also username so I will enter something some data over here and I will enter the key as password so we can pass the some password value here and so let&#39;s pass the URL here so in our case if you read if you see the our spec file so we have the URL right so we will read this particular URL from the environment file so simply I will cut this particular URL and I&#39;ll paste it inside the EnV file that&#39;s it guys so right now as of now we are reading only this URL and also we&#39;ll try to read the username and password but we are not using these values anywhere in the web application but I will show you how to read the other fields data as well just by using the key that&#39;s it guys so I will go back to the spec file and here we have to enter the URL right so you can simply use the process do EnV dot so simply you need to enter the key name here so that it pulls the respective data from the EnV file so in our case I want to read this URL so that&#39;s the reason simply I will pass the URL as the key here that&#39;s it guys so we are done with reading the data from the EnV file from the play right so once you save the both the files now let&#39;s try to run the test and later we will read the username value and password value from the EnV file see guys we are getting some error so it is saying that b expected string but got undefined so we are getting this particular error so we are missing one thing so what you need to do is so simply we need to go to the playright do config file right so here so you need to enable one line of code here in this configuration file so that is the line number eight so make sure that if this line is not there simply you can add the required inside the required specify the EnV and then do configurations so by default this line will be com commented in your configuration file and if it is not there make sure that you are adding this line and once you have added this particular line so this time we should be be able to read the configuration data in the play right test and if you see here guys so test launched the browser and it has entered the URL as a google.com so previous previously it was not able to get the URL because we have not enabled to read the data from the EnV configuration file and if you see here guys our test is perfectly working fine right so there are no issues at all now let&#39;s try to read the so here it say username and password so let&#39;s read the this username and password from the configuration file so here I&#39;m writing simply console DOT log so here I&#39;ll say username is then simply I will use the process Dot and here I will specify the username user uncore name so this is the key what we have used in the configuration file so let&#39;s read the password as well in the similar way so while you are working in the realtime projects so you can always specify the all these configurations in the EnV file so simply I&#39;ll pass the here password as the key so that&#39;s it guys now let&#39;s run this test so we should be able to pull the URL username and password from the configuration file using play right so our test is working perfectly fine so let&#39;s look at the output as well and if you see here guys so we are able to read the username and as well as password so this is how you can create the configurations in the playright automation framework and this is how you can read it in the play right automation test in the previous playr tutorial you have seen how to read the EnV file that means the configurations from the EnV file and how to pass on to the playr test you have seen it in this playr tutorial we are going to discuss about how to perform data driven testing using Json file in play ride so here I will navigate to the vs code and I will create the one spec file as data driven testing Json dopc do JS so that&#39;s it so here I will go to the read EnV file spec file and simply I will copy the test here and I&#39;ll paste it here so that&#39;s it guys and here I will rename the test name as data D testing using Json file in play ride so that&#39;s it guys so let me explain what we are doing in this playrate test so in the line number seven so we are navigating to the URL so we are reading the URL from the configuration file so we are reading it from the EnV file so we are reading the google.com so after entering the google.com then we are identifying the search text box then we are entering the text as playright by tester stock then we are clicking the sorry we are pressing the enter from the keyboard that&#39;s it guys so we are not doing much here so use case is very simple so we are going to the google.com and we are searching with the some keywords now if you see here in the line number 11 so we are passing the some test data right so we will how to pass this particular test data from the Json file so before we go ahead and create the test data file so let&#39;s run this test and we&#39;ll make sure that this test is perfectly working fine so that&#39;s it guys so if you see here output our test is getting passed so this is the expect Ed behavior and so let&#39;s start creating the test data now so already I have created a folder so let me delete this particular folder so let&#39;s start creating it from the beginning just now I have tried it so I will create the one folder called test hyphen data and inside this folder I&#39;m creating the another folder called keyway and based on the environment we we can create the multiple folders here and inside the qway I&#39;m creating a one Json file called google. Json so here I&#39;m giving the file name as Google because we are keeping the Google Search keywords inside the Json file so that&#39;s it guys I have opened the Json file now so simply I will create the one Json object here so here I&#39;ll say the object name as module one test data that&#39;s it guys so simply I will open and close the flower brackets so here we have to add the keys and respective values guys that&#39;s it so here I&#39;m adding the three keys and three values that&#39;s it guys so here I&#39;m giving the key name as skill one and here I&#39;m adding the value as I will go to the data driven testing Json spec file so I&#39;m passing the very first search keyword as playright by tester stock so this is the very first search keyword so then so this is the very first key and value and second key is skill two so here I&#39;m adding the value as Cypress by tester stock and I&#39;m adding the skill three as JavaScript by tester stock so that&#39;s it guys so I don&#39;t want to create more data so I think three sets of test data is enough for me so we will see how to pass all these test data to the playr test so we have the test data file is ready now so let&#39;s go to the spec file and here what I will do is so I need to use this particular test data so that&#39;s the reason we have to import the this particular file in the data driven testing Json spec file so that&#39;s the reason here I will say import and followed by that I&#39;m storing into the one object so that&#39;s the reason simply I will give the object name as same name whatever we have in the Json test data file that&#39;s it and now what I will do is simply I will write the keyword as from and here we have to pass the location of the test data file where we have where actually we have created the google. Json file so we have to specify the path of the test data file so here I&#39;m writing two dots that means it will focus on the our current project directory and here I will write the Slash and inside this current folder so we have to navigate to the test data then keyway folder so here I&#39;m selecting the test data slash giveway and slash so if you have created multiple test data files so you need to select the respective test data file that&#39;s it guys now we have imported the our test data file in the current spec file now so simply we need to take this object moduel one test data say for example I want to pass the test data from Json file to the this particular line in this line I want to pass the test data from the Json file so simply I will remove this and I will add the module one test data dot so if you see here guys it&#39;s already suggesting all the keys which are there inside the test data file right so let&#39;s pass the skill one now that&#39;s it guys now if I run the test so firstly we we should be able to search with playright by tester stock and if you see here guys so it has picked the data from the Json file that is the skill one value and if you see the test so our test is getting passed now this time let&#39;s pass the skill three so now we should be able to search with JavaScript by tester stock so here I&#39;ll simply pass the skill three and if I run the test so we should be able to search in the the Google search page as JavaScript by testers talk and if you see here guys so we are able to pass the respective test data from the Json file so this is how you can read the test data from the Json file and this is how you can pass on to the playr test so far you have seen how to read the test data from Json file and how to pass on to the play right test now let&#39;s see how to perform the actual data driven testing in the sense how to pass the multiple sets of test data to the this particular test right so here what I&#39;m doing is simply I&#39;m writing the one for off Loop so here I&#39;ll say for off by using the for off loop I will get all the sets of test data from the this particular Json file and we&#39;ll pass one at a time so I will go to the spec file here so what I&#39;m doing is so simply here I&#39;m just using the object dot entries so inser the entries so I will pass the our Json object so that&#39;s it guys so whenever we receive received a data from the Json file so that will be in the format of key and value so that&#39;s the reason so here I will save that into the key and value format so that&#39;s it so once we are having the test data in the form of key and value so simply I will take this particular test and I&#39;ll keep it inside the for Loop so that&#39;s it guys so we are done with creating the for Loop so we are able to get the test data that means the Json object values in the form of keys and values so here I&#39;m interested in only the value so let&#39;s say for example first time our test is running so we are going to pass the play rate by tester stock so whenever the second time our test is running so we&#39;ll pass the Cypress by tester stock and so on if you are having a multiple sets of test data like this so that&#39;s it guys it&#39;s very simple now so simply I will add the single quotes here and within the single course I&#39;m adding the dollar symbol and followed by open and close flower brackets so I&#39;m interested in only the values so I want to read only this these values one by one and I want to pass on to the my play right test so that&#39;s the reason so here I will take the only value from the Json object and I will use this particular value inside the out test where we are actually passing the test data in the line number 14 that&#39;s it guys so we are done with the implementation of how to pass the multiple sets of test data to the any single automation test so if I run the test so this test will get executed three times because we have the three sets of test data so if I run the test so it will start passing the very first test data called play right by tester stock so it has passed the play right by tester stock and then second time it is passing the Cypress by test stock and third time so it is going to pass the JavaScript by tester stock so this is how you can implement the data driven testing using Json file in playright and if you see here guys so three test cases are got passed right so this is how you can implement the data driven testing using Json file in playright in the previous playr tutorial we have discussed how to perform data driven testing using Json file in this playr tutorial we are going to discuss about how to perform data testing using CSV file in playright so let&#39;s navigate to the so vs code so here I&#39;m creating one quickly spec file so before we create a spec file so you need to install one plugin called CSV pars so simply you can go to the terminal or command prompt and you need to install the one plug-in called npm install CSV passs and once this installation is completed so you can cross verify whether CSV hyphen pass plugin is installed in your automation framework or not so simply you can go to the package.json file and inser the dependencies section so you should be able to find the the plugin which you have installed with respect to the even you need to see the which version of the CSV pars plugin you are using it so make sure that this plugin is present over here that&#39;s it guys so this is about installation of CSV hyphen pars so let&#39;s create the spec file now so here I&#39;m giving the spec file name as data driven testing CSV dopc do JS so that&#39;s it guys so I will go to the data driven testing json. speec file so simply I will copy the this particular test and I&#39;ll paste it here and here I will modify the test name as data driven testing using CSV file in playright so that&#39;s it guys so let me explain what we are doing in this playr test so in the line number 10 we are navigating to the google.com and then in the line number 13 and 14 we are clicking on the Google search text box and after that we are entering the value in the line number 14 then we are pressing the enter from the keyboard and after that we are waiting for some time and then so we are closing the test execution that&#39;s it guys and this particular test is surrounded with the for Loop so that means so in the previous tutorial we have seen how to perform the data D testing using Json file so we are getting the Json file and we are simply passing on to the our playrate test so that&#39;s it guys now to perform the data driven testing using CSV file so firstly we have to create the test data file so that means we have to create the CSV test data file then we will come back to this spec file and we will delete all the stuffs which are which are related to the Json file so here I will go to the QA folder and here we are going to create the test data file first so here I&#39;m saying new and followed by text document so I will open this document and I will maximize this so all the values you need to write it within the double quotes so here I&#39;m adding three columns and followed by two sets of test data the very first column name is test case ID that&#39;s it and the second column name I&#39;m adding it as skill one and I&#39;m adding the third column name as skill two now we have added the columns that means the headers now we have to add the data so every value is separated by the comma so in CSV file that&#39;s what we do it now so right now I&#39;m adding the respective data so that&#39;s it guys so I&#39;m am adding the three column data here first I will add the test case ID and then I then I will add the skill one then I will add the skill two so here I&#39;m adding test case ideas tcore 01 so this is the second test case tcore 02 and here I&#39;m adding the now skill one so skill one I&#39;m adding it as playright by tester stock in the similar way I will add the skill two for the test case one so here I&#39;ll say Cypress by tester stock and then I will come to the test case two that is tcore 02 and here I will add the skill one as postman by tester stock and I will add the skill two as rest assured by tester stock so that&#39;s it guys so if you want you can add multiple sets of test data with respect to the test kee cases as of now I have created only two test cases with respect to that I&#39;m adding the skill one data and the skill two data and here I will go to the file and here I&#39;ll choose the option as save as so here I&#39;ll select the all files and here I will provide the file name so here I&#39;ll say test data. CSV that&#39;s it guys and I&#39;ll save it so we are done with with creating the CSV file if you see here guys so our test file name is test data. CSV so we are done with creating the test data now I will go back to the vs code now so here we have to import three things one is so here I&#39;m saying import FS from so you need to you need to import the file system from the fs that&#39;s it and the second thing you need to import the path from the path and the third import statement you need to write that is the parse and you need to get it from the here you can say from and followed by that you can say CSV iphon pass and slash you need to write the sync that&#39;s it guys so we need to use these three import statements so once you are done with adding all these import statements now let&#39;s write a statement which will fetch the test data from the CSV file so here here I&#39;m writing the one constant variable as records and equal to here I&#39;m saying pars for for this function so we are passing total two parameters one is the directory name file location that is the one part and the second part is so which column you need to take it and how you can skip the empty lines as well so those parameters we are passing on to the par function so here firstly I&#39;m saying FS dot so I&#39;m using the file system dot read file sync and for this function again we have to pass the two parameters one is the directory and another one is the exact file location of the CSV F so here I&#39;m saying path dot join so inside this one we have to actually pass the directory followed by the file location where exactly we have the CSV test data file so here I&#39;m directly saying dot two dots followed by test data and followed by that we are having the keyway folder let&#39;s add the keyway folder slash and we have the file name as test data. CSV so let&#39;s add the file name as test data. CSV so that&#39;s it guys now we are done with adding one parameter now so again now so here we have to pass the another object within this object so I&#39;m passing two values so I&#39;m saying to this play right so consider the columns so here I&#39;m adding The Columns as true I&#39;m setting the flag as true so read The Columns and then also I&#39;m saying skip the empty lines so I don&#39;t want to read the empty lines so here I&#39;m passing the value as true so that&#39;s it guys now simply I will put the semicolon at the end of the statement and let me summarize what we have done so far so firstly we have installed the plugin called CSV fun parts and then we have created the data driven testing CSV dopc file and we have copied one test so that test case is what it does is so simply it navigates to the google.com and it searches with the keyword basically right and after that we have created the test data file and after that so we have imported all these three statements and after that we have written the one simple statements by using that we are going to read the our test data file and once we are able to read the test data file so rest of the things are very easy guys so simply we have to write the one for for off Loop and inside that we have to use the our records variable so simply I will delete this stuff and I&#39;ll add it as a records and here I&#39;ll say the variable name as record so now I will delete the things which are related to the Json file so that&#39;s it guys now so this record right so this record variable is holding the each time whenever our test whenever our for Loop executes right so it picks the one row of test data that means one test case test data it will pick and it will pass on to the our test so right now we are having only two sets of test data so our test will get executed two times so that&#39;s the reason so simply I&#39;ll take this record and I&#39;ll pass on to the our test method description and here I will say record DOT test case name test case ID so this particular column name we have provided it in the test data file if you remember it so this is the very first column name what we have in the CSV file so that&#39;s it guys now so I will take the record and here I want to search with the skill one so here I&#39;ll say skill one that&#39;s it guys so we are done with implementing the for for Loop statement as well simply we are reading this records which contains the all the test data from the CSV file and we are passing on to the test title and once we have that data in the test title simply we are using that data in the in our test steps so let me go to the test data file guys once again so let me edit with the notepad++ so here I have passed the skill one right so firstly it will search us with the in the Google search text box it will enters the playright by tester stock that is a very first test and second time it will start searching the play rate by tester stock so if I pass skill two first time it will start searching with so I press by tester stock and the second time it will start searching with rested by tester stock so that&#39;s it guys now I will come back to the vs code now our test is ready guys now let&#39;s run the test so first it should start searching with the play R by tester stock so if you see here guys so we are able to search the the proper key proper data and second time we should be able to search with postman by tester stock and that&#39;s it guys if you see here guys our two tests are working perfectly fine so if I pass skill to here so basically whenever it enters in this test right so it fetches the one row of test data every time so you can use any data in that particular row and you can use it in in your automation test so this time I&#39;m passing the skill two so let&#39;s execute the test firstly it will start searching with Cypress by tester stock and then it will search us with the rested by tester stock so this is the very first time our test is getting executed and this is the second time test executions triggered and if you see here guys our test is perfectly working fine and also you can see the results over here our two tests are perfectly working fine so this is how we can perform the data driven testing using CSV file in playright in the previous play tutorial we have discussed how to perform data driven testing using CSV file in playright in this playr tutorial we are going to see how to run a test on multiple environments by using the different sets of test data from the different environments such as keway environment stage environment broad environment so let&#39;s see one by one so what are the steps you need to follow to achieve the test execution on different environments so firstly here I will create the one spec file inside the tests folder so here I&#39;m giving the spec file name as read data based on environment dopc dot JS so that&#39;s it guys so here I will go to the one of the file called Data driven testing Json dopc file so simply I will copy the test and I&#39;ll paste it here so that&#39;s it guys so here I don&#39;t want it I don&#39;t want the for Loop so I will delete the for Loop and let me update the test name as so here I&#39;ll put the single quotation and here I&#39;m updating the test name as read test data based on different environment in playright so that&#39;s it guys so let me try to run this particular test so let me formate the test properly so that&#39;s it guys so we have the test ready so let&#39;s run the test and we will verify whether this test is working fine or not so before we run this test let me summarize what exactly this test is doing so firstly we are navigating to the google.com and in the Google search page we are searching with the some keywords so let me pass the exact keyword so previously we were reading the test data from the Json file so here I&#39;ll write playright by testers stock that&#39;s it guys so if I run this test so our test should work fine then we will quickly create the different environment test data file and we&#39;ll start reading that data in the play right test so that&#39;s it guys so we are able to search the keywords properly in the Google and if you look at this one output so test is getting passed that&#39;s it guys now so if you look at the test hyund data folder so inside this we have only one environment right now so the environment name is qway right now so let&#39;s try to create the another environment so inside the test hyph data so here I&#39;m creating the another environment called stage so inside the stage folder I&#39;m creating the one Json file as google. Json so that&#39;s it guys now I will open the google. Json file which is there inside the qway folder so simply I will copy the this particular test data and I&#39;ll paste it inside the stage google. Json file so that&#39;s it guys so right now we have the test data and with respect to the based on the environment so let&#39;s create the another Json object inside the test data file so I&#39;m adding another object here guys so simply I will take the copy of this so just I will give the different object name so right now we are updating the Json file which is there inside the qway folder so here I&#39;ll Seca test data and that&#39;s it guys so I don&#39;t want to update the Search keywords here and in the similar way I&#39;m opening the stage Json file and I&#39;m adding the another data file here and here I will update the object Json object name as stage test data but in case of stage test data we are going to update the Search keywords so firstly I will write API testing by tester stock and here I&#39;ll say spec Flow by tester stock and then here I&#39;ll say easy Repro by tester stock so Search keywords are different in the different environments right now so that&#39;s all about the creation of the test data file guys so now so let&#39;s read these two test data file inside the spec file now so already we are reading the QA test data Json file so here we have to just specify the object name so let&#39;s add the object name here so I will copy this Json object here and I&#39;ll paste it here so that&#39;s it guys in the similar way so I&#39;m trying to read the test data file that&#39;s a Json data file which is there inside the stage as well and here I need to update the Json object name so I will open the stage Json file and simply I will copy the Json object name and I&#39;ll paste it here and here we have to update the path as well so I&#39;m now updating the path as stage so that&#39;s it guys so this is the location where we have the test data for the keyway environment so this is where we have the test data for the stage environment right so once we are done with reading the test data from the different location so here I&#39;m using the one concept called test. describe so this particular describe function is used to create the group of test cases to align on the test data say for example we have the one test data so it can be the QA test data or stage test data so that variable we should be able to use across the all the tests which are written inside this particular spec file so that&#39;s the reason I&#39;m using this test. describ grouping approach to align on the test data so here we can provide the any module name or anything so here I&#39;ll say model one test then I will put comma then I&#39;ll write the arrow function then I will close and open the flower brackets and inside this so I&#39;m going to write the one hook called before before all so that&#39;s where we are deciding from which environment data we need to read it so here I&#39;m using test dot before all so here we can provide the name as running before all test and that&#39;s it then we can put the arrow function they can then we can open and close the flower brackets inside the before all function so here I&#39;m writing very simple if condition guys so if so basically I&#39;m reading the configuration data from the EnV file if you look at this particular configuration data so here we are adding whether we want to run our playright test on the giveway environment or the stage environment so I want to read this particular configuration so that&#39;s the reason here I&#39;m using process do EnV do EnV and if it is equal to the QA then I&#39;m creating a one Global variable called let so here I&#39;m saying the variable name as test data equal to null so initially the test data variable will be assigned with a null value and after that so we will use this particular null sorry test data variable so if it is the environment value is QA then simply assign the QA test object test data object to the test data that&#39;s it guys and here I&#39;ll write the another else statement and here I will assign the stage test data to the test data variable So based on the environment you can write the multiple if and else statement guys so based on the configuration based on the environment configuration so we are going to read the respective test data from the different Json files that&#39;s it guys we are done with writing the main configuration code now so we have the test right so let me copy this test so I&#39;ll cut it and I&#39;ll paste it inside the test. describe all so let me format it properly and that&#39;s it guys so if you look at here so what we have done so firstly we are reading the test data from the different environments and here based on the configurations from the EnV file so we are deciding which test data file we need to read it so right now so we are done with writing the all the test data to the respective variables here now we have to use this particular test data variable by using this one we can access the respective values so in the line number 26 we want to read the tested data from the different Json files based on the environment so simply I will use the test data dot so here we have to specify the key name say for example I want to read the skill one data so I want to read the playright from the qway environment if configuration is qway right so that&#39;s the reason I need to specify I need to specify the this particular key over here after the test data that it guys so let&#39;s say now our configuration is QA so it is going to read the QA Json file so it is going to pass the playright by testers talk so this is what it is going to search in the Google search page so that&#39;s it guys so I have saved the test now let&#39;s try to run it so if you see here guys so google.com has opened and and now we are searching with play right by testers talk right and if you see here so our test perfectly working fine let&#39;s say if I put two here now this time it is going to search with Cypress by tester stock so let me run the test once again so still we haven&#39;t updated the configuration right now our tests are running using the keyway environment test data so this time what I will do is I will update the configuration as stage so here I will go to the EnV file so here I will pass the value as stage so that&#39;s it so let me go to the stage test data file so if you see here guys the skill two is spec flow right in this case so now we should be able to search with specflow by tester stock in the eyi test so that&#39;s it guys we have done the configuration change now our configurations are pointing to the stage environment so let&#39;s run the test we should be able to search with specflow by tester stock and if you see here guys so we are able to search the data with the proper keywords so if I pass the one here skill one and we should be able to search with the API testing by tester stock so this is is the stage test data so let me run the test once again so if you see see here guys so we are able to search with API testing by tester stock and our test is perfectly working fine so this is how you can configure the data for the multiple environments such as QA environment stage environment Dev environment or it can be the prod environment also and this is how you can read the test data from the different environments and pass on to the playright test in the previous play tutorial we have discussed how to read the test data from the different environments and how to pass on to the play test so in this tutorial we are going to discuss about how to implement page object model in play ride so let&#39;s understand why page object model is required and what is Page object model and what are the advantages of using the page object model and what are the disadvantages of using the page object model and also we will see playright sample page object page and also we are going to see the sample page object test as well and after that we we will start implementing the page object model in the playright framework so let&#39;s see why page object model is required so if you look at this particular diagram guys and in the line number 19 we have we have added one locator so here I have highlighted all the locator wherever we have used a locator so right now we have hardcoded all the locator values right so this might be used in 100 test tests right say for example suddenly developer changes changes to the Dom details so I need to run through all the 100 automation tests and I need to update all these locators right so that will be a very tedious task for me so that&#39;s the reason so it is very important for us to implement the page object model in playright automation framework so let&#39;s understand what is Page object model first so page object model is a design pattern to create the object repository for the web page elements and every web page will be containing the corresponding page class so for example if I take an example of Google page so firstly we have the homepage so we will be creating a one class called homepage and if I search something in the Google search page so we will get the result page so we&#39;ll be creating a separate class called result page so like that for every web page there will be a corresponding page class created so if you&#39;re implementing the page object model in your automation framework so page class contains all the page elements of that page and also it contains the page method methods which performs the operations on those particular elements so for example so I have opened google.com I want to search with the keywords so those kind of methods or the actions can be implemented in the same page let&#39;s say we have created created a homepage So within that we should be able to identify the web page elements and also we should be able to implement the methods which performs the search of the keywords so at high level this is what all about the page object model so let&#39;s see what are the advantages of using the page object model so code will be cleaner and also it is easier to understand because we&#39;ll be having a separate pages and also we&#39;ll be having the separate automation test so our in our automation test we will be calling to the our page object model all the methods wherever it is required and object repository is independent of test scripts so obviously because object repository is nothing but the page object page what we have created for example homepage result page so like this so these are independent of the automation test test right the next Advantage is test script will be optimized because of the elements respective abstraction methods are in the page classes so our test will be optimized because we have implemented the abstraction methods in the respective page object classes itself and coming to the disadvantages so time and effort so you need to give a more time and effort initially when you are working when you started working on the project and after spending some time so less effort less effort and time is required to implement the page object model and it is the this particular implementation is only specific to the particular project so you cannot use this particular page object model for the another project so that is the second disadvantage now let&#39;s look at the how exactly sample page object page looks like so firstly we have included the page sorry we have included a playright model and after that we have created a simple class and that is the exportable class guys and within that class we have declared one Constructor within the Constructor so page object initialization is done and after that we can start adding like this n number of elements within the Constructor itself and then you can start creating the all the abstractions methods say for example I want to search with the search key keywords in the Google so that method will be implemented in this particular page itself so you cannot Implement in a different page so whatever the actions you are performing in that particular page that methods or those kind of methods can be implemented in the same page class so this is how exactly looks looks like the sample page object page of the play right now let&#39;s look at the sample page object test how exactly it looks like so firstly you need to include the uh play right module and after that so you need to import all the pages what you have created for example we have created homepage result page playlist page so like this you need to import it and after that so you need to create the object of respective page object Pages then you can start creating then you can start calling the methods which you have implemented inside the page object Pages for example if I take the example of this homepage so we have implemented one method called go to so if I go to the if I go to homepage here you can see that go to method is implemented inside the homepage and if I see the another method where we have called in the line number 14 Search keywords so if you see here guys so we have implemented that particular method within the homepage itself so this is how exactly looks like the sample page object test now let&#39;s start implementing the page object model in the play right firstly let&#39;s see the manual scenario then we&#39;ll come back to the vs code and we will start implementing the page object model in play right so firstly we will navigate to the google.com so this is the homepage for us we will be creating one homepage JS file and in the homepage so we have to implement one method to search the keywords also so here I&#39;m searching with play right by test as stock and we have to press it enter from the keyboard and once we got the result p page so we&#39;ll be creating another class called result page and then we will click on by by using the link text we will click on the play right by tester stock so this is the second page that&#39;s the result page and this is the playlist page guys so we are going to create the total three pages one is homepage result page and then third one is playlist page and once we are in the playlist page so simply we will click on the very first video in this playlist so this is a scenario guys what we are going to automate it by using the page object model in play right so let&#39;s start creating the pages first so here I will navigate to the vs code and here I&#39;m creating a one folder called pages so inside the pages I&#39;m creating three Gs files first one is homepage Dot JS that&#39;s it and I&#39;m creating the second J JS file as sorry result page.js and I&#39;m creating the third Javascript file as playlist page.js so that&#39;s it guys so we are done with creating the pages now so firstly I will go to the homepage .js and here we have to include the very first playright moduel so here&#39;ll say include playright module that&#39;s it so here I will use the require and inside the requir so simply I will add the at theate play playright SL test then I&#39;m assigning back to the constant variable object so here I&#39;m adding inside the flower brackets here I&#39;m adding it as the expect object so that&#39;s it guys so we are exporting this particular playright test in the current JavaScript CL JavaScript class so by using this expect so that we can assert the sum of the elements that&#39;s it guys now so we have to create the class create class so here I&#39;m saying class followed by class name so here I&#39;m saying class name as homepage and simply I will open and close the flower brackets so as I said these classes are exportable so that&#39;s a reason so here I&#39;ll say exports dot homepage that&#39;s it guys now we are done with creating the class so inside this class so firstly you need to write the Constructor so here I&#39;m saying Constructor and which is accepting the page as the parameter so here I&#39;ll say page that&#39;s it guys so inside the Constructor we have to initialize the page object then we have to store the all the elements so here let say elements so that&#39;s it guys now to use all the page page functions or page methods so above the Constructor you need to do you need to write it as one for Slash and two star and that&#39;s it guys so this is the GS doc command so you need to add it about the Constructor to use all the functions from the page object so here I&#39;ll say simply import so let&#39;s remove all the stuff from here inser the brackets so here I&#39;m saying directly at the playright SL test and after that here I&#39;m saying Dot Page that&#39;s it guys now we we can use the all the page object methods inside the Constructor or in the abstraction functions now let&#39;s initialize the page object to the current page variable so here I&#39;ll say this Dot Page equal to page so that&#39;s it guys now we have done the page initialization and now we have to go to the this Google.com we have to inspect the search text bar search text box sorry and here here we have to search with the some keywords right so let&#39;s inspect the search text box and if you see here guys so it has lots of attributes and values so here I&#39;m using the ID of the this particular text box so simply I&#39;ll press hash and the value if you see here guys so we are able to locate the search text box by using the ID so I&#39;ll take this locator and here so I&#39;m using the this Dot and here we have to specify the variable name as search text box that&#39;s it then now we can use the page object to find the element so here I&#39;m saying locator and inside that I&#39;m adding the locator value guys that&#39;s it it is very simple so firstly we have created a Constructor within this we have done the initialization of the page object then we have created the one simple locator that is the text box locator so that&#39;s it guys we are done with creating the search text box locator now so firstly we will Implement one simple method that goes to the our google.com so simply I will take this s and I&#39;ll come back to the vs code and here I&#39;m implementing the one a sync method so here I&#39;m saying the method name as go to that&#39;s it guys so here I&#39;m using the AIT as is well so this is the way of navigating to the URL so I&#39;m using the a followed by page this. page do go to so inside this function we can add the URL so that&#39;s it guys so firstly we can call to this particular method so that we can navigate to the URL so once we navigated into this URL so we have to perform the search functionality in this Google homepage so let&#39;s Implement a method that performs the search functionality so here again I&#39;m implementing the as sync method called Search keywords and this particular method is accepting the one parameter so we need to pass the search keyword to this particular method let&#39;s say in this in our case we are searching with the playright by tester stock so that keyword has to be passed onto the this particular method whenever we are calling to the Search keywords then so firstly I will check whether that element is enabled or not then we will cck click on that particular element then we will enter the sum data so here I&#39;m using thewa followed by to check the enablement of that particular element so we have to use the expect object inside this so again we have to use this dot sorry guys so this Dot and so we want to check this text box is enabled or not right so let&#39;s take this element and now here I&#39;m saying to be enabled if this element is enabled simply click on that particular element and after that once we click on that element sorry guys so here let&#39;s remove the or expect object so expect I don&#39;t want to use it because we will be using expect only to assert something so here I want to perform the click operation on this text box and after that I want to enter something so simply I&#39;ll take the locator and after that I will say fill method and inside this we have to pass this particular parameter so whatever we are passing it from the test so we should be able to search with that keywords and that&#39;s it guys so after entering the Search keywords so we have to press the enter from the keyboard so that&#39;s a reason I will use the locator and followed by that I&#39;m calling to the one method called press so here I&#39;m passing the value as enter so that&#39;s it guys we are done with implementing the homepage so let me summarize what we have done once again so firstly we have included the playright module then we have created a class inside the class so we have created a Constructor which contains the initialization of the page object and also it contains the elements and then we have implemented simple two abstraction methods one is going to the URL and second one is which searches with the keyword so that&#39;s it guys now let&#39;s copy this same skeleton of the class and I will go to the result page and I&#39;ll paste it here and here I will give the class name as result page and I&#39;ll pass the same class name here as well and that&#39;s it guys so now once we are in the result page so let&#39;s say here I want to search with play right by tester stock and here we have to identify the this particular playlist play right by tester stock so I want to identify this element by using the link text so that&#39;s the reason I will go to the class so let me delete all this stuff which is not required so here I will say firstly I will add the element name as playlist link that&#39;s it and here so here I&#39;m using the get by rule as the locator value and inside this one so firstly here we have to say link and followed by that so we have to pass the object so name equal to some value so what is the text you want to pass it here so here we have to pass the text as play right by test as talk so that&#39;s it so we are identifying this particular playlist by using the link text right so here we have added the proper link text here that&#39;s it guys so we have identified the play playlist link now so I will take this playlist firstly I will check whether it is enabled or not so I will keep the as it is 20 line number and then so after that so here we have to say here I&#39;m calling one method called first so I want to focus on the first element in the similar way I&#39;ll take this element and then I want to Simply click on that particular element guys that&#39;s it so we are done with implementing the click on playlist so that&#39;s it guys so we have REM renamed the function name as click on playlist and I don&#39;t want to accept any parameter over here so let me summarize what we have done in this result page so simply we have copied the same homepage and here we have updated the class name and after that here we have identified the playlist link by using the link text and after that I have written a simple function that will clicks on the play right by tester stock playlist that&#39;s it guys so let&#39;s copy the same skeleton and I will go to the playlist page so let&#39;s update the firstly class name so it&#39;ll say playlist page and let me add the same over here as well and that&#39;s it guys so once we click on the click on the this particular playlist so we have identify the this particular first video so here I&#39;m identifying this particular element by using the CSS selector I will inspect this element and if you see here guys so which contains the thumbnail IDE is a thumbnail and idea is a container so if you look at the root tag and firstly I will identify by using the ID of the ID value that is a container and followed by that I will pass the ID value of the ID value as thumbnail so simply I will copy this container then I&#39;ll press contrl F then I&#39;ll press hash value and followed by this Arrow I&#39;m giving and after that hash so simply I&#39;m passing the thumbnail here so that&#39;s it guys if you see here guys so this particular element is so if you look at this selector and it is highlighting the very first video in this playlist so I will take this particular CSS selector and I will go to the playlist page.js file and here I I will rename the element name as video link and if you see here guys in this web page so this element is matching with the 20 elements but I will focus on the very first element by using the first method and I will perform the click operation on this particular video and so here I&#39;ll say locator and here we have to specify the locator value so simply I&#39;ll pass the locator value so that&#39;s it guys now let&#39;s implement the our abstraction method as click on video and here I will use the video link element then I will identify the first element and after that simply I will perform the click operation guys so that&#39;s it so very simple changes three changes we have done so firstly we have updated the class name then we have added the video link in the play playlist page and after that we have implemented one simple method that will performs The Click operation on the video guys that&#39;s it it&#39;s very simple guys so we are done with implementing the all the pages now let&#39;s quickly create the one spec file so here I&#39;ll say page object test. spc. JS so that&#39;s it guys so here I will go to the one of the test and simply I will copy the skeleton of the play right test so I&#39;ll paste it so I will delete all the stuffs which are not required so that&#39;s it guys so here I will update the test name as page object model in play right so that&#39;s it guys so let me list down what list down all the steps what we are doing here firstly we will go to the URL and after that we will search with so it will say search with keywords and once we search with the keywords we have to click on the playlist and after that so we need to click on the video as well in the inside the playlist so it will say click on video so that&#39;s it guys so steps are very simple now we need to start importing the all the pages inside this spec file so here I&#39;ll say require and inside the requir so we have to specify the path of the all the pages here guys so here set two dots and followed by that we have the pages folder and inside the pages we have the homepage and I will assign back to the constant object so it&#39;ll say constant so here I&#39;ll type the H page so like this I will import the rest of the two pages guys so I&#39;ll copy this and I&#39;ll paste it two times so let&#39;s import the result page here and then let&#39;s add the object name as result page and let&#39;s import the playlist page as well and and let&#39;s Ascend back to the playlist object so that&#39;s it guys so we are done with importing all the pages what we have created so far now firstly we have to navigate to the URL right so this navigation method is implemented inside the homepage if you look at this one so in the line number 19 we have we have implemented a method called go to and inside that we are navigating to the URL to use this particular method so so I need to create the object of this particular class so let&#39;s create the object of this particular class so here I&#39;ll say new followed by homepage so this homepage Constructor is accepting the page as the parameter simply pass the page as a parameter then we can assign back to the one constant variable then here we can save homepage as the variable that&#39;s it guys so firstly we have to navigate to the URL I will use the homepage object by using that I&#39;m calling to the one method called go to so that&#39;s it but before that we need to add the one keyword called await so this is a very common keyword you&#39;ll be using while writing the play right test so that&#39;s it guys now let&#39;s try to run and see whether it is working properly or not then we&#39;ll start implementing the rest of the steps so it has has to navigate to the URL and that&#39;s the simple test so we&#39;ll make sure that this test is working perfectly fine and if you see here guys it is launching the browser and we are able to navigate to the URL and our test is getting passed right now let&#39;s Implement let&#39;s implement the rest of the steps now so we need to start searching with the keywords right sorry guys and here I will use the homepage object and for by I&#39;m calling to the method called sear keywords so this method is accepting the one parameter guys if you see the homepage so this method is accepting the one parameter as a search keyword right so let&#39;s pass the keyword as play right by tester stop that&#39;s it and after that so we need to click on the playlist so this click operation we have implemented inside the our result page if you see here so click on playlist we have implemented inside the result page to call this particular method so we have to create the result page object so that&#39;s the reason so here I&#39;m creating the result page object so it will say new and followed by that result page and also we have to pass the page as the parameter and we can assign back to the variable so it&#39;ll say result page so by using the result page I can click on the playlist right so it&#39;ll say click on playlist so once we click on the playlist now so it goes to the playlist page right so in this playlist page so we are clicking on the playlist video right to callate this particular method so again I have to create the another object of the playlist page so let&#39;s start creating the object of the playlist page and also we need to pass the page as the parameter then let&#39;s assign back to the variable called playlist page and that&#39;s it guys by using this object so I will call to the method called click on video so that&#39;s it guys it&#39;s very simple now right so after completing all this execution flow I&#39;m writing AIT followed by page so here I want to wait for the time up so we can see the execution properly guys so that that&#39;s the reason I&#39;m writing the some weight or here so our test is ready so firstly we are navigating to the URL and then we are searching in the Google search page then we are clicking on the playlist then finally we are performing The Click operation on the playlist video guys so that&#39;s it it&#39;s very simple test what we have implemented so far so let&#39;s run the test now so it has navigated and it has searched with the keywords and also it has clicked on the playlist and here we should be able to click on the video see guys so our test got failed so let me check what is the issue here so it is saying it is disabled actually so let me check once again so I will put some weight out here so that should be fine so here I&#39;ll put some weight as 2,000 so let&#39;s run the test now so if it is not working we will just uh remove the assertion for the enablement of the element so if you see here guys so our test is perfectly working fine so we can put the more weight word there and we can check it so YouTube is a heavy loaded application so that&#39;s the reason you need to use the sometimes so manual page in the automation test so it is started searching with the keywords and it is it has clicked on the playlist and it has to click on the first video in the playlist that&#39;s it guys so we are able to perform the action actions properly so that&#39;s it guys so so this is all I having in this session so this is how you can implement the page object model in playright in the previous playr tutorial we have discussed how to implement page object model in playr in this play a tutorial we are going to see how to do video recording of the automation test execution and also we are going to see how to attach the video recording of test execution into the playr test report so here I will go to the vs code and so I will try to run the one of the spec file so that is actually getting failed and we will check the report so we are not finding the any video attached into the playr test report and after enabling the video recording for the test execution then we should be able to find the video added into the test report so our test will get failed guys so this is the expected Behavior so let&#39;s ignore this and I will open the play right test report and that&#39;s it guys so if you see the report so we are finding the error information test steps and screenshot and at the end we are finding the traces so we need to enable one configuration by using that we can capture the video recording of the automation test execution and also we can attach into the report based on the demand so we can pass the multiple configuration value so we can pass whether you want to whether you want to capture the whether you want to record uh a video during the first retrive failure or on just a failure so like that configuration data we have to pass it in the playrate configuration file guys so I will close the report now we&#39;ll come back to this report after enabling the configuration in the playright config file so firstly I will enable the configurations and again we will reexecute the failed test. speec file so here I&#39;m opening the play R.C config.js file and here under the defined configuration and you&#39;ll be finding the another Json object as used inside this you need to add the one configuration so here you need to say video colon and here you need to pass the two configurations one is mode so for this mode so we can pass the different values so here so based on the need or the demand you can pass the value so in my case I want to record the test execution retain on failure say for example if you have enabled retry mechanism you can uh select the third option so in my case just for the demo purpose I will select the retain on failure so that it is going to capture the it is going to record the test execution when our test is getting failed and also it will add into the play right test report and here we have to pass the another parameter so that is the size of the video so firstly you need to pass the width so normal width is it&#39;s a 640 so you can give the different value also that will also work out and here you need to specify the height so what is the height of the video so in my case I will specify the 480 so that&#39;s it guys this is what the simple configuration you need to enable in the playright configuration file so once the configuration is done so let&#39;s go to the our spec file now so that is the failed test. spc. JS file so let&#39;s execute the same spec file and we will see whether playright is recording the video of the test execution or not and also we will see whether it is attaching the video recording into the playright test report or not so that&#39;s it guys so our test will get fail so this is the expected failure so let&#39;s open the report once again and this time we should be able to find the video recording of the automation test execution and if you see here guys so here you can see that so this is a traces and this is the video added into the this particular test execution firstly you will see the errors error section and after that test steps and after that you will be finding the screenshots and then traces and if you see here guys so it has recorded the video of the test execution and also it has added into the report also right guys so if I go down so you can you can play the test execution video as well guys here only you can see like what is happened so firstly it has opened the youtube.com and then it will start searching with the keywords and it goes to the play right and that&#39;s it guys so this is the 30C video so this is how you can enable the video recording of the automation test execution when your test cases are getting failed so you can pass the particular configuration value as retain on failure right so let&#39;s say for example I&#39;m not bothered about the failures I want the test test execution recording all the time so in that case you can simply pass the on here so for example so I will go to the one of the spec file where it is getting passed but still we will see the video is added into the play right test report so here I will open one of the spec file as page object test. spec file so I will run this spec file so it is a very simple test it goes to the google.com and it will search us with the keywords then it goes to the one of the playlist so it is getting failed guys so what I will do is simply I will put little bit of weight over there so here I&#39;ll go to the spec file and here I&#39;ll put a little bit of weight there as a 4 seconds and I will rerun the test so you can take any spec file which is perfectly working fine and you can simply run the test and uh we will see you can observe in the playright test report whether playright is adding the video recording or not so this time our test should work perfectly fine and if you see here guys our test is getting passed right now let&#39;s go to the report now so we have already opened the report so let me refresh this report and if you see here guys we have executed the page object test dope. JS file and here only you can see that video has added into this particular test execution and if you if I come come down here so here you will be finding the video section right so based on your need guys you can enable the configurations in the playright config do Json sorry JS file so this is a complete execution of the test case right guys so that&#39;s it guys so this is how you can do the video recording of the automation test execution in the play right in the previous playrate tutorial I have discussed about how to do video recording of the test case execution in this playr tutorial we are going to see how to maximize browser in playright or how to make the full screen browser in playright so here I will go to the vs code and I will open the one of the spec file and if I run this test guys so our browser is not Maxim Max imized and also you can see that it is not a full screen browser right if you look at the browser so we will see how to maximize the browser in playright or we will see how to make the full screen browser in playright so that&#39;s it guys so there are two ways so you can go to the play R.C config.js file and here you can make the configuration change so this is the one way and the second way is you can go to the function where exactly are launching the browser or entering the URL and there you need to just set the view Port size so that&#39;s it guys so here I&#39;m just using one statement as await so before we navigate into the URL I&#39;m writing a one simple statement over here guys that&#39;s it so here I&#39;m writing a wait followed by that so I&#39;m using the page object by using this one here I&#39;m saying set view Port size and inside this we have to pass the object so first one we have to pass the width and if you see here guys so it is accepting two parameters one is width and the height so you can pass the custom size of the browser guys so here I will go to the one of the my browser and I will open the console and simply here you can type the outer width and that gives you the outer width of the browser and in the similar way you can get the outer height as well so these two numbers we have to pass over to the set viewport of the size method so width is 1366 so let&#39;s pass the width as 1366 so we can pass the custom size of the browser guys so that&#39;s the window size of the browser so let&#39;s pass the firstly width here I&#39;ll say 13 66 and in the similar way we can pass the height as well so we can pass the height as 728 so I will pass the height as 728 so that&#39;s it guys so I saved the this particular function now I will rerun the spec file so this time if you see here guys so our our browser got maximized and also you can see the full screen browser so this is how you can enable the full screen browser using playright our test is executing in the full screen browser and also you can see the result here so our test is getting passed right and here you can see the check mark also so this is how you can maximize the Browser in Play right

Transcript for:Introduction to Playwright Testing Framework

Transcript for:
Introduction to Playwright Testing Framework