hey guys this is Naveen here welcome back to Naveen automation lab so with this video we are going to start a new series with playwright javascript and typescript just like we do other programming languages with selenium or some other tools are there we always learn about the specific language and then we cover the tool specific part because in the tool you have to write the code with that specific language for example if you really want to work with selenium with python selenium with java you have to learn java and python to work with selenium like that so same thing with the play right the playwright java videos that i have already prepared you must have already seen my videos framework and api automation ui automation with playwright with java now with this video we are going to start with playwright with javascript or typescript so before that uh once we install and set up everything i'll prepare a separate video that how much javascript knowledge is required like for loop basic conditional based thing, string manipulations, arrays, and functions, and all those things, how to create an object in JavaScript and everything. So basic level of understanding, we really need to have it. Otherwise, we won't be able to write the proper code or better code in Playwright as well. What people are doing the mistake, they're directly jumping into the Playwright without understanding any language knowledge, and then they're directly jumping into it, they're struggling it.
Why this method? How to call this method? How to pass a parameter? What do you mean by array? How to iterate a specific array and all those things?
Because when you develop a logic, when you create a simple function, for example, I really want to create a function for the web table with the pagination logic. In that case, I really need to write some code over there. So in that case, the basic understanding of the programming is very much required.
So I'll advise you guys that if you are lacking behind in the programming or in JavaScript, please improve your basics of JavaScript first. and then you are absolutely good to go with that right so uh today in this video we are going to set up that how to set up playwright in your windows so without wasting our time let's uh start it over here okay so this is my windows machine here you can see that the first of all we have to download two things the first thing is that node.js and then we have to write some code in some editor also so for that purpose we are going to download visual studio code if you are already having the visual studio code and the node.js and the nbm package on your system then you don't need to download this you can skip this particular part so download node.js for windows why are we downloading node.js because node.js is a server and then playwright works on node.js and then whenever we have to interact with the playwright server with the help of node.js that we have to do in fact whatever the libraries that we are going to write or we are going to use with playwright we really need the node.js server to interact with the browser so node.js just simply click on it and here you will see that node.js you can download for windows mac and two options that they have given if you are using the windows installer simply click on it and then see this window installer is started here and then here you can see some 18.msi version is available here okay so if you see that i'm already having this node.js version here this is my window installer and i'm just going to double click on it and then i'm going to install it it's pretty simple you don't need any much configuration although this node.js is already available in my system so i'm just going to click on next and then let's say i really want to it says that okay already installed so let's change it and click on next over here okay after that you simply click on next and then click on change and yeah so node.js is getting installed and if any updates are required it will take it from this particular version and then Let's see, I'm going to click on finish after that. When I click on finish here, you see just just to check that node.js is available in my system or not.
How will you check that? You simply open your command prompt. So let me open my command prompt from here. And here you just need to write node space hyphen hyphen version here. That's it.
Okay. And press enter. Here, you can see that version 18 is available.
So along with node, you will get one more package that is called NPM package. So NPM is used for downloading. different javascript based packaging so here you can see 9.5.1 is also available so node and npm is the mandatory thing you don't need to set up any environment variable nothing you don't need java python for this because we are going to use playwright with javascript after that once it is done then you just need to download your visual studio code i'm not going to download visual studio code link i'll share in my description of this particular video just download it it's absolutely free you can download the community windows version same thing for mac version or a linux version also you can download that and once it's there it will be visible over here like this you can see this is where we just study a code we just studio code is one of the best uh i would say editor especially for the javascript and don't use eclipse and intellij for this because uh this is specially designed for a javascript based project and there are a lot of good things you can do a lot of good extensions and the plugins are available with the visual studio code now the first code that we have to write so it's pretty simple what we need to do bookmark this playwright official website on all the installations and everything is available over there so here i'm writing let's see playwright and then simple search for playwright and playwright.dev simple click on it and then here it's showing that some basic documentation and all those things what is playwright how exactly it works i have already prepared a dedicated video on this and you can just refer that video and uh here what we just need to do we just need to go to node.js python java.net so we are going to use with node.js java python we are not using it now because java i have already prepared a complete series on that okay so i simply select node.js and i'll go to their documentation directly if you really want to check their apis return internally with the playwright node.js you can go and check how many methods classes and everything written over here you can refer their documentation but proper installation documentation setup documentation how to write the test cases and features of playwright they have documented under this section so here you can see that installation part how to install it's absolutely um working with the spatially accommodated need the end to end testing playwright supports all modern render rendering engine including chromium webkit webkit is for apple and the firefox chromium based browser like edge and microsoft edge and chrome also you can use it you can test it on different platforms like windows linux and mac locally or a cie integration also we can do it with the jenkins or others github actions and everything you can run the test cases browser in the headless and the non-headed i mean headless in the headed mode also with the native mobile emulating of google chrome for android and mobile safari as well you can use this how to install playwright simply go to that section and simple run this particular command because npm we have already downloaded so that's it and after that it's actually available in your system and then you can start writing your code there how to set up see i'll tell you what you have to do because we have to it's not like just simple copy this and go back to your command prompt and run the playwright directly from here no we want playwright project we really want to create in my editor so this is your editor here you can see so what i'll do i simply go to my somewhere let's see in my c drive or d drive or anywhere so let's see i'll go to my c drive and under my c drive let's see i'm going to create a new folder here so let's create a new folder and here i'm writing let's see this is my anywhere you can create that it's not mandatory that you have to go to c drive so let's see i'm writing playwright demo some folder that i have created in the same folder that i'm going to open in my visual studio code so i simply go to visual studio code go to file and click on open folder and when you open the folder here you can see that under c drive that i'm already having it this playwright playwright playwright demo folder that is there click on select folder when you click on select folder here you can see that trust the authors and everything is fine yes i started the author and the folder is visible here but in this folder i don't see anything like i don't see any folder structure no node modules nothing you can close this welcome screen now we have to do what we have to install play right here so in order to install playwright what should i do i simply copy this particular command copy this and go back to your visual studio code and from here you can open the terminal okay let me just open my visual studio code once again and here you can just click on it and here you can see the terminal window is here and in this particular terminal window you just execute that command and right now it's focusing on you can say see playwright a demo it means this is your current directory in this directory paste that command npm initialize playwright at the latest version it means i need playwright latest version with the npm packaging so let's uh enter and let's see is it really downloading npm or not so here it says that okay yeah uh need to download create play right at the red this okay to proceed simple say yes so it will ask you to follow some instructions so please follow one by one so simple press y and enter okay and it's saying that do you want to use typescript or javascript by default typescript is already available so here we are going to use let's see typescript or javascript anywhere you can just press arrow and you can change it for example let's see with the typescript okay where you want to put end-to-end test you can give a folder name or anything so let's see i simply say okay in my test folder uh create all the tests there add a github actions workflow right now no i don't want to add any github action so simple n install playwright browsers yes we need playwright browsers although this process you can do later also you can download manually via nps playwright install but right now i want to install webkit and chromium and a firefox browser also so i simply say yes press y i want to do that and then you can see here it's actually downloaded all the downloading all the playwright uh browser versions and you can see downloading playwrights over here i mean downloading playwright browsers here so playwright uses the specific browser binaries and then it will download you can see chromium firefox webkit okay so these are the engines provided by the different browsers chromium supports chromium based engines browsers are available like a chrome browser microsoft edge firefox is coming from mozilla firefox webkit is used for the apple so it's apple webkit engine to uh you know the good thing is that if you're using webkit on windows machine also you can just run your test cases on the webkit means you are running your test cases like safari browser okay so this is used for the safari browser safari browser uses webkit browser engine so that's good you don't need any mac machine to use safari here and then it's saying happy hacking and all those things it's done and few commands are written over here successfully done inside a directory you can run several commands and they are they have given some basic commands here now if you open this playwright demo folder first thing is that that node underscore modules is actually available here here you can see uh under node modules all the relative and uh respective node modules supported node modules are there and we are not going to write anything inside a node module so just let it be like this and then you have an open test folder some example spec that they have given a spec means a specific test that they have already created and spec means your test cases that i'm going to write same thing sometimes example folder also that they have created and they have given some demo or to do app specs also that they have created over here this is your javas i mean typescript project if you notice carefully that it is written with dot ts ts means type script dot js means the javascript if you open that here you can see example dot spec dot ts ts means javascript return here simple so here you can see it's super simple that to write the code some examples code they have given first of all that you have to import these two modules like test and the expect object from playwright test and here you can write page.go to method to launch the url and then it's having its own assertion also so here not like testng we are going to write some assert class and all those things playwright is having its own expect method with the help of this you can just simply write your assertions here as well okay and then if you see that this is a test i have written just like in test ng we write at the rate test annotation here we have to write the test block this is the test name and i'll tell you what you in my async and await also and this is a page object i mean page reference you can say that or page object you can give any name or let's see i'm already using the page over here so you can simply write page.go to and then playwright.dev over here you can write it so it means launch this particular url just like we have driver.get method same thing paste.go to method is also available here so how many tests that they have written in the example the two tests are already written test number one and here you can see test number two also here and if you see the same file here that that they have written so many test cases written here so for some examples that they have given and along with that they will create this package.json file also we will see what do you mean by package.json just like we have form.xml file in maven same thing we have package.json that we are using the playwright test version 1.36.1 this is the latest version of playwright that we are using it and they have given one playwright config.ts also this is your typescript configuration file where you can mention all the configuration and the environment variables like where exactly your test directory and all those things you really want to fully parallel run test in file test file in the parallel mode and all those things a lot of good use cases i mean configuration that you have they have given here you can see they have given one product array also where you can define that how many browsers that you are having it so here i'm writing chromium firefox and the webkit and then accordingly you can run your test over here okay so for example we have given the configuration that my test directory is one dot forward slash test folder it means in this particular test folder all my specs or you can say all my test files are available so you can see under test folder these two files are available So if I really want to run, then you can run it.
How to run it? It's pretty simple. What you just need to do, again, you go to a terminal. And let me just come back here.
And for running... in the test case it's simple go to running test here they have given various options for the running the test for running the test you simple write running all tests simple right npx play right test so copy this command and go back to your this one and then paste it here and then you simple uh run it so simple see i paste it here and then i'm running it and let's see by default browser will not open because by default it's running in the headless mode here okay so here you can see that started the test it's checking his title or something like this here you can see here um see uh his title and get a started link and once the test is completed it will generate a basic report also it will give it to you so here you can see yeah it's almost done it's still running in the background because we are running in the headless mode by default playwright will run the test in the headless mode and when you run this command it says that npx playwright show report you can see the report also so i'm just going to copy and see i'm pasted over here and then i'm running it so here you see that it will just generate the report one server report it will generate and says that automatically to open the report in the browser and here you can see the number of test cases that example spec.ts that we have created and these are the tests and every test is running on three browsers chromium firefox and webkit that's why you can see that has title started link has title get started link and has title get a started link available in three different browsers if you really want to open a specific test what happened you can see the test steps here that before hooks and page dot go to whatever it's there you can check it here you can just open each every step that what happened and along with the script also it will be displayed here and this is your assertion and after hooks that page and context will be closed here like this okay so this is what they have given you want to go back you can just click on all once again it's available here like this so likewise let's say i really want to open with the headed mode it means i don't want to run in the in the you know in the headless mode you just need to supply this particular option hyphen hyphen headed that's it so let's start it and uh first of all that you have to press ctrl c to quit from the report press ctrl c you want to terminate the job yes small letter capital letter it really doesn't matter let me clear the console from here and then same command this one but this time we are going to use hyphen hyphen headed also that we have to use it over here so let's see this time the browser is getting opened or not and the parallel execution is already uh it's not this one this one actually hyphen hyphen edit we have to use so parallel execution configuration is already true so here you can see running six tests using four workers four workers means four threads it's actually generating and here you can see uh see two chrome and uh then it will start running the test cases on other browsers here you can see that this is for the webkit here you can see two webkits got open okay you can just check it here you can see this is for webkit for the safari browser and done that is also done and again you can just check the report once again so it will show the report as well okay so there are various things that you can do this is just a sample that they have given so we are just following few basic commands here let's go to other than that you can just run the test with the title also headed mode that we have already given what if i really want to run the project only with the chromium browser so you can give hyphen hyphen project equal to chromium so let's copy this project is already given in the configuration here if you go to this playwright config.ts and here if you see that see the project section configure project for the major browser so tomorrow if you really want to add more browsers you can just simply add it here by default chromium firefox and webkit is available here right so what if i want to run on a specific browser so first of all head it and then i'm going to add this project equal to chromium also so only chromium browsers will be open in that case i don't want to run in other browsers so here you can see using two workers and the two tests are running in the parallel mode here like this one is already done and then that's it you can see the report once again by running this command now if i really want to run some other test cases for example by default if you see in the configuration that this is your test directory uh dot forward slash test directory and if i really want to run the test cases from the test examples directory so what you can just do here that simple write test hyphen examples it means whatever uh the folders whatever the scripts are available under this particular folder uh start running it from there okay so one script is ready i'm just going to save it and then i'm going to run it once again let's run all the test cases available in this particular config.ts file okay i mean available in this particular uh demo to do here because there are so many test cases are written so many lengthy test cases example test cases that they have given here so let's run all these test cases okay so what should i do i simply run this one and project equal to chromium no i want to run in the normal headed mode but run all the tests with all the devices i mean with all the browsers so let's see is it really running or not and run in the parallel mode so here you can see 72 72 tests using four workers the worker also you can just configure later so you can see that four chrome browsers are running at the same time here you can see chromium browsers are running at the same time and it's a different application actually this is a sample application you can see the url demo.play write.dev and see it's absolutely running it over here and once the chrome is done that chromium is done that it will pick the new one i mean the next browser and see it's running back to back because there are 72 test cases are there and then we will see how exactly it is generating the report and it's pretty fast if you compare with selenium and the cypress it's a speed by speed right is quite fast as compared to other tools because it's actually based out of your web socket architecture once the connection is established with the browser it will not send the same request or new request or a new session same session ID once the connection or handshake is already done the connection will be flow with the help of web socket protocols not like a normal shtp protocol here so here you can see that this is done now it will start running your test on nightly nightly build means you can see nightly over here this is for the firefox so here you can see it's running on the nightly build of firefox browser versions and once the firefox versions are done then it will start picking the webkit okay you can increase the four workers also that i'll show you later that how to increase in all those things everything is actually controlled from this particular configure dot ts file so here you can check here that these are the configuration that is what they have given tomorrow you really want to add some more projects browsers you can add it you want to remove it you can remove it from here also you can just do other informations also let's see test again mobile view ports like devices pixel 5 iphone 12 13 14 those things also you can configure here we will see those things in upcoming products and other things like test directory fully parallel equal to true see that's what they have written retry processes and all those things everything you can configure it here what kind of report that you want to generate the html report i want to generate this thing also we can use it here like that okay so again open the terminal let's see what is happening here just open the terminal and it's done or not see it's still running in the webkit you can see that webkit browser is available here for the safari browser and it's still running you can see this is just a demo to do mbc just a demo website and then let's see it's running here in the parallel mode and it's pretty fast okay and then we will see the complete report end-to-end report here okay this is still running and uh there are no other specific configuration required for the mac machine exactly same thing download your node.js and okay so here it's saying two failed and then done 70 passed and it's saving the report over here and press ctrl c to quit so we will just simply go to this particular report so let's click on it and here you can see the complete report here and it's saying should allow me mark two items are completed it got filled so when you open that so you can see that i think some assertion got failed over here so maybe timeout uh it's written that's where the timeout happened and then uh you can see the report here as well okay and then before hooks got passed and then here it got failed dot check got failed here okay it's saying paste dot get label by get by label mark all as completed dot check maybe it got failed here okay and then you can see all other reports also like this and browser specific report you will get along with the title you will see firefox firefox all chromium chromium based browsers and then firefox browsers available once again and then the webkit also available here and whatever it's failure first it will show you two things got failed on firefox you can see in the fail section also there is no flaky no skip 71st and overall 72 got executed okay so that's pretty simple and that's it with respect to the installation and the configuration after that you just need to write your code and everything just let me terminate this and you can create your own folder structure and then start writing your basic code here that i'll show you in the from the next chapter onward right so great so that's all for this particular video i hope it's clear same thing you can do in the mac machine also if you're facing any issue with the any specific installation process just let me know write in the comment section it's pretty straightforward just set up these things and then with this thing we are going to start a proper playwright series later on we will design a end-to-end framework also reporting and a lot of good things we are going to cover it will be a very very long series because there are so many features of playwright that first we have to cover but it will be super easy i'll make you i'll make it very easy for you guys but we will take some really really good real-time examples also with the playwright so that's all for this video thank you so much for watching abit automation labs subscribe to the channel share this video with others who are looking for playwright thank you so much guys