Playwright Automation @ 7:30 AM (IST) by Mr.Sumanth Day-3

4:21 Yeah, good morning team. Can you guys hear me? People who are in online, if yes, please type Y on your chat windows. Can you guys hear me? Okay. So, in our last class, right, we have just seen on installation part. Okay. So in last class right let me just go here. So today's class is playrite three. So today's class is playrite three sorry two right two and today's session right what we are going to sue here is we are going to quickly recheck that if I need to use playrite in my machine

5:07 what are the prerequisites that are required to install what are the prerequisites that are required to install and then the second one here is we are going to See what you know how to run a test mean after installation right you need to understand what are the folders what are the folders and files we get as part of playright installation playright n installation and Then we need to check uh whether we are able to run the play rate uh test.

5:56 Whether we are able to run playrite test. So the first part here is if I need to use playright in my mission. Okay. The prerequisites are okay. If I need to use playright in my mission, the prerequisites are first one is I need to download NodeJS. I need to download NodeJS. And then the second step is when you download NodeJS, you will automatically get npm. What is npm? Node package manager. Node package manager. See not only playright if you want to run any code which is with JavaScript you need to have NodeJS. You need to

6:42 have NodeJS. See normally this node what we are calling it right this is called as engine node engine. Okay. If I want to run JavaScript or TypeScript I need to have this NodeJS installed on our machine. And the second one is when you install NodeJS you will get npm which is called as Node package manager. They will ask you why we need npm. Why we need npm? If we need to if we need to install any NodeJS libraries,

7:27 if you need to install any NodeJS libraries, we need we need npm. We need npm. any JavaScript any NodeJS relevant libraries if I need to install and if I need to use it I need npm I need npm and then uh the next one is you need one editor you need one editor in real practice we actually use VS code editor VS code editor and as well as we also use an editor called as cursor AI editor cursor AI editor but first we will see with VS code and then I'll tell you that how we

8:14 need to use cursor AI editor cursor AI editor and then the next one here is then you need to create a project in VS code. Project means just you need to create a folder. You need to create a folder and you need to access that from VS code and you need to access that from VS code. Then what you need to do here is then you need to install playrite. Then you need to install playright. Then you need to install playright. So playright installation can

9:01 be done in two ways. Playright installation can be done in two ways. One is you can use VS code extension. You can use VS code playrite extension and you can install it. Second way is you can install it you from terminal by running a command by running a command. You can install your you can install playright in two ways. One way is you can install with VS code play clear extension. Second way is you can also run a command from terminal and you can install it and you can install

9:47 it. Is this not clear? Now the first Now the first right what we are going to do here is we are going to see how you are going to what you know we are going to see how we are going to what you know do all these installation setup. So first you need to go to your Google Chrome or you know this is your uh Google browser right go to go and open your Chrome browser and then type here NodeJS free download and type here NodeJS free download then you will get a link called NodeJS download NodeJS you need to click on download NodeJS

10:33 then if you scroll down right you and see if you are using Windows machine you will automatically get Windows installer. If you are using any other machine like Mac or Linux, you need to change this. What you know if you click on Mac you will get Mac downloaded Linux Linux and if you are going to use Windows then you'll get Windows MSC file. Now you need to click on that particular file. So what happens it is going to download that particular file. Now once that file got downloaded. Now once that particular file got downloaded you will see a folder symbol here. Okay it means it is downloaded. Oh I see like this you will see a folder symbol. You need to click on that particular folder.

11:19 So it will open where it got downloaded. It will open where it got downloaded. Then you need to doubleclick on it. Just double click using your mouse. Then you will get this popup. Don't change any options. So just click on next or you know and I'm simply saying uh change or else I'm simply what you know it is like already I have it right. So it is giving you this options in your case right it will not ask any this just you need to click on next next next install. That's it. Don't do any don't do any changes. Okay. And then you need to click on repair. It's like I'm canceling it because I

12:05 already have it right. Again it will uninstall and do some changes. Okay. So what I'm doing here is finally you will get what know NodeJS setup was installed successfully in your case and click on finish and click on finish or else what you can do here is see I need to go to control panel if you go to control panel you will have an option called uninstall programs click on uninstall programs and here you check for node you will have node select NodeJS s and click on uninstall. I already have it right. I'm uninstalling that particular NodeJS from my machine so that I can show you the installation. So I'm uninstalling

12:52 NodeJS. So once this got uninstalled now I need to install again. So if I need to install what I need to do again I need to go back to my folder. I need to double click on that particular file. Then you'll get this popup. You need to click on next. Then you'll get this screen. You need to click on I accept. And you need to click on next. And then you need to click on next. And then you need to click on next. And then finally you need to click on next. And finally you'll get an option called install. So that will automatically install NodeJS into your machine. that will automatically install NodeJS into your

13:40 so in your case if you are installing for the first time it is not required to uninstall. You can directly double click click on next next next install. It will install NodeJS on your machine. So once it has been done right it will show you NodeJS has successfully installed. NodeJS has successfully installed. Okay. Son, you need to click on finish. Then you need to click on finish. Now the second step here is you have installed NodeJS. You have installed NodeJS. Now you should also check you should also check whether NodeJS and npm got installed successfully or

14:26 not. Installed successfully or not. So how do we check that? So what you need to do here is you need to go to your search and you need to open command prompt. You need to open command prompt and in this particular command prompt you need to type node- version. So it will show you the current version of node installed on your machine. So I have installed right. It has installed 22.17 one version it has installed 72 what 22.17 one version is this part clear and then

15:14 uh the next and then the next criteria is as I said you write if you install node you will also get npm node package manager so you need to type npm- version so it will show you your npm version as well. These two you need to get it. If you don't get that version number means you have not properly installed and not properly configured to your Windows machine. Okay, Windows machine. Now the second part now the second part here is now I have installed node end as well as npm. Now what I need to do again

15:59 I need to go to my Google Chrome and then I need to type here VS Code download. Now I need to download VS code download. Now I need to download VS Code. Download. Is this part clear? What is VS Code? It is an editor. It is an editor. So it is very simple. What you know what what is use of editor? See very simple. You are a human. Okay. This is you are you are a what someone you can simply say what let us say he is a programmer.

16:45 Okay. He is a programmer. Okay. Now in my this is nothing but my mission. What you are you are using your mission. Okay. In your mission, right? I want to write JavaScript code. For that, you have installed NodeJS. For that, you have installed NodeJS. Okay. Now, I need to talk I need to give some instructions to this NodeJS. I need to give some instructions to my NodeJS to run this JavaScript or I'm writing some program and I want to execute it. Now if I want to give that instructions right then I need an editor.

17:32 This is nothing but what we actually call it as editor where you will write programs what you know and this editor whenever you are running on this editor right that will actually run that particular code on NodeJS NodeJS. So programmer is writing code on editor and when you're running it right it is actually talking to your NodeJS it is actually interacting with your NodeJS to execute it to execute it. So this editor acts as an interface between programmer and NodeJS.

18:17 It acts as an interface between programmer and NodeJS. It acts as an interface between programmer and NodeJS. Is this part clear? H. So it is like what it is? It is a interface. Editor is an interface which act which acts as an editor is an interface which acts to interact your which helps to interact your program with NodeJS. Node JS. So very simple see I I can

19:02 simply say let us say I have a water tank A and I have water tank B. Now I need to send all water tank A to water tank B. What I will do? I will I will add a pipe for it. Right? That pipe is interface through which A is communicating to B. In the same way as a programmer, I want to talk to NodeJS. I need something through which I can communicate. That is nothing but editor. That is nothing but editor. Is this point clear? So don't confuse. That is the reason we need editor. So what is your second installation? I need to go over to your Google Chrome and I need to type VS code download. Then you will get download VS code. You need to click on

19:47 that particular link so that you will redirect to this particular page. And here since I'm using Windows, I need to download this. If you click on it right, it will download VS code. It is actually downloading VS code.exe file.exe. Once you got this right, if you double click onto that particular file, it will ask you already I have VS code installed on my machine. So what I'm doing here is it is already open. So I'm closing that VS code now. Now again let me double click. So then I will get this screen. I need to click on I accept and then I need to click on next and then I need to click on next and then I need to click

20:33 on install and then I need to click on install. So it will install VS code on your machine. It will install VS code on your machine. Is this clear? So this is how that you need to install VS code. So first one is you need to install NodeJS. Second one is you need to install VS code. Second one is you need to install VS code. Now third step is just go to your desktop. Okay. And create and right click and you you you create one folder. Just right click on your desktop. Okay. Just right click on your desktop and you'll get an option called new. You

21:20 click on folder. It will create a folder on your desktop. Give that folder name as playright playright projects. Playright projects. Create a folder with a name called playrite projects. Now double click and open that particular folder. What happens? You can see you can see that folder is empty. Now in this right you need to create a folder. Go to new and create a folder and give that folder name as project one. Give that particular folder name as project one. It means you need to create only folders nothing. That folder should act

22:05 as a playright project. That folder should act as a playright project. Now go to your VS code. Once it has been installation right now you need to open VS code. It will you can directly search in your this one as VS code. So you will get this. If you click on it right it will actually open VS code. If you click on it right it will actually open VS code. Now once you get your VS code now what I need to do here is here you will have an option called file at the top. You need to click on that particular file. Then you will get an option called open folder. Open

22:52 folder. You need to click on that particular open folder. You need to click on that particular open folder and then you need to click on desktop because I have created that particular folder on desktop. So I need to click on desktop and I need to select the playright projects. You have created a name. You have created a project with you have created a folder with a name called playrite projects. Click on it. Then you will see a folder with a name called project one. Select that particular folder and click on select folder. It will open that particular folder in your VS code. It will open that particular folder in your VS code. But it does not has any files. It does not

23:38 has any files here. This folder will act as your playright project here. This folder will act as your playright project. This is your third step. First step is you need to install NodeJS and then you need to check whether NodeJS and npm got properly installed. And then second step is you need to install VS code. And then the third step is create a folder and open that particular folder in VS code. Open that particular folder in VS code. Now the next step is I need to install playrite. I need to install playrite. As I said you right. If I need to install playrite that can be installed in two ways. One way is using

24:25 your VS code extension. using your VS code extension. See normally right if you see here see the top part like file edit selection view go run this is called as menu bar. This is called as menu bar. And if you see right the left hand side you have some shortcut icons. Like if I want to go to project explorer, if I want to see the path, the hierarchy of my project or if I want to search any file or folder or if I want to add this to any source code repository or if I need to run and debug or if I need to add any extensions, you will see

25:13 all these icons as shortcuts or know all these icons at your left hand side of your VS. PS code and uh when you see here right here right you can see your project structure it means if I create any folder I can see what folders are there under to this particular project what files I have created under to that particular project is seen under to explorer is seen under to explorer for example let us say I had created a created a folder with name called sample now under to that particular folder I have created a file with a name called sample.js. So whenever you are going to select that particular file, you can see and you can write code in that particular file. You

26:00 can actually write that code in that particular file. So this part whatever you are able to write it right this is called as editor. This is called as editor. And if I want to run that I need terminal. Okay. If I want to run that, what I need to do? I need to use a terminal. Go here, click on terminal and click on new terminal. Then you will get a terminal which is opened. So this is nothing but a terminal. So this is nothing but a terminal. Is this part clear? What is this terminal? Is this clear? So terminal is like uh console. What? It is like uh from where you can run and you can see your

26:45 results. From where you can run and you can see your results. So it means you need to understand this. So after opening my VS code after opening my VS code your VS code in that VS code right you need to open some folder. That folder will act as a project. That folder is now acting as a project and then your VS code will have different parts. First part is menu bar. Second part is left what icon icons or else you can simply chart cut icons where you will see in

27:33 the left pane of your VS code and then you will see explorer where you can see your project hidearity where you can see your Project hierarchy where you can see your project hierarchy and then you are going to see what and then you are going to see terminal. You are going to see terminal from where you can run and see the results where from where you can run and you can see your results. Okay. So these are nothing but different

28:19 parts of your VS code. So when you open VS code right you will see at the top this is menu bar this is a shortcut icon bar this is your explorer this is your editor and this is your terminal and this is your terminal. So explorer and then you can also see editor where you can change your code and then we will see terminal and then you will see terminal and then you are going to see terminal. Is this part clear? Okay. Is this part clear? Now the next part here is installation. Now I need to install playride. So first if I want to install play rate using extension. Now

29:05 first you need to understand how do you install playrite using extension. Now what you need to do here is you need to go to VS code. Here you have this four see three squares and four square symbol. If you click on this you will get this particular screen from where you can search your extensions. Here you need to search for playright. In my case it is already installed. So it is showing it as installed. In your case right you will get a playright like this. Playrite test for VS code. Playrite test for VS code. Now here you will have install button. You need to click on install button. So that will be

29:54 installed to your VS code. that will be installed as an extension to your VS code. That will be installed as an extension to your VS code. Is this what clear? Now once that has been done once that has been done, now what you need to do here is you need to just go back to your explorer. The first icon is nothing but your explorer where you can see your project hierarchy. Now initially I had created sample right? I'm deleting it. I'm deleting that particular folder. I have only project one. I have only project one. Now what I need to do here is at the top you will

30:39 have one search. You click on that particular search. You will get options. In that right you will get a second option as so show show and run commands. In that right you will get the second option as show and run commands. So the second option is nothing but it will show you as show and run commands. Now what I need to do I need to just select that show and run commands and then here you need to type first letters like pli pl a y w i g ht then you will get this option install

31:25 playright you need to click on that option you will get this popup I don't know this screen where you need to select this one. If you select this right, it will select all which are available under to that particular options and then you need to click on okay button and then you need to click on okay button. So what happens it will automatically install playrite under to that particular project. It will automatically install playright under to that particular project. And how do you say that it got installed? One way is you will get these default folders and files. You will get this

32:12 default folders and files. Second way is you can go to your terminal. So this is your terminal right where it has executed and installed it. Just type here npx npx play right and give iphone version. It will show you the version that got installed on your mission. It will show you the current version which is installed on your mission. It will show you the current version which got installed on your mission. Is this part clear? So this is about your uh what you know playright installation using extension using

32:58 extension using extension. Now the second way you also what you can also install that in your second way which is nothing but you can install playrite from terminal. You can install playrite from terminal. So how do we install it? So again go back to your VS code. Now again I'm changing my project what you know. So go to file go to open folder. Now I am into this particular folder where I already have project one. Now click on new folder. It I am going to create another folder with a name called project two. And I am selecting

33:44 that particular folder and click on select folder. So now this folder will be opened in your VS code. Now this folder is opened in your VS code where it does not have any where it does not have any files. Where it does not have any files or folders. Now what I need to do I need to open terminal. So how do we open terminal? You need to click on this three dots. Then you will have terminal. Then you need to select new terminal. Click on three dots terminal and you need to select new terminal. Then you'll get this terminal. Then you'll get this. This is nothing but your terminal. And if you see right this terminal is opened in in the same project. See project two.

34:31 Right? So it has opened in project two. Now what I need to do here is here I need to type npm in n it in it and I need to write play right and I need to write play right at the rate latest latest playright at the rate latest if you don't want to if you want if you don't want to get latest if you want to use any specific version here instead of latest you need to write that number 54.0 zero or one whatever version you want to download right you need to give that version number here but normally right we always download latest so I'm simply giving it as latest and then press enter so it will automatically

35:19 start installing your playright it will automatically start installing your playright now it is asking you do you want to write code in JavaScript or TypeScript now I'm selecting I'm clicking on down arrow. So it is selecting JavaScript. And again I am pressing enter key on my keyboard. It is asking me where do you want to write your test cases. I am giving the default folder name as tests and press enter. Now it is asking me do you want to download GitHub actions required files. I'm simply saying false. Now it is asking do you want to also download browsers to run your playright

36:06 script. I'm saying true. Then it will automatically install playrite library with required dependencies on your mission on your mission. So if you see right now if you expand playride see you automatically got these folders and as well as these files and here also if I need to check how do we check you can simply say npx playright iPhone version it will show you the version of your play rate it is going to show you the version of your playright that got installed on your mission that got installed on your mission see here right one important thing that you need to Remember play rate is not like what you

36:53 know you need to you will install only once and you can use that uh what you know in any number of projects whenever you are creating multiple projects every project you need to install playright then only you can use playrite methods in your script in your script playright methods in your script. So these are the two ways that how you can install playrite on your mission. How you can install play rate for that particular project because playright is installed at project level. Okay, use this part here. See this we already covered in last session. There may be some people who are new. So right I just

37:38 reviewed it. Okay. Now the next part here is now you got playright project right now you need to understand now if you go to open folder and I'm opening my first project this is your first project now in this particular first project right you will see some folders like a github what whenever you are installing a playright right you are seeing some folders like a github folder where you have workflows and then where you will see playright do yiml You will see a file called playright.iml and you will see node modules. Node modules means where it will store all your nodejs libraries. For example, if I need to use some method from playright,

38:25 right? I need to have playright library. I need to have playright library installed. So all those libraries which are required to run your NodeJS project will be installed under to node modules will be installed under to node modules. Anyway we'll see that but first you need to understand what folders you will get. First one is GitHub. Second one is node modules. Third one is tests. Fourth one is test examples. These all are folders. What files you will get? G ignore package lock dot package lock.json package.json

39:10 playright config.js playright config js. These are nothing but the folders and files that what we get when you install playrite on your mission. You will defaultly get these folders when you install playrite on your mission. When you're going to install playrite on your mission. Is this part clear or any questions? So now let us see why we will get these folders. Now whenever you are going to install playright we will get these folders like GitHub we can say GitHub actions. Okay. We'll get a folder with name called GitHub. Second folder is nothing but

39:56 we'll get a folder with a name called node modules. Third folder is nothing but what we actually got. We'll get a folder with name called tests. Fourth folder is nothing but where we'll get a folder with a name called test examples. You'll get a folder with name called tests examples. You'll get a folder with name called tests examples. And then you will also get files like you'll get a file called get ignore get ignore. You will also get a file called package. You'll also get a file called package lock.json and it and you'll also get a file called

40:43 package.json and you'll also get a file called playrite.config. config.js. Okay. Playright.config.js. So you will get these folders. Okay. So the first folder that what you need to understand here is GitHub. Here you will get a folder with a name called with a name called playrite. ML. under to this particular folder right you will see a file called playright yiml so this file is used to run your playright

41:28 project in g hub actions in GitHub actions means if I need to run my play script right I have a I have a I have an option called you can run them in some remote And that remote mission is nothing but you can run it in your GitHub where you are going to store your code where you are going to store your code. Anyway, we'll see that then you will understand as of now just remember it helps us to run your playright in GitHub actions. It helps us to run your playright in GitHub actions. So it is very simple. So if you go back and if you go back to your this one and I am simply saying GitHub

42:15 what if you if you if you press GitHub right it will redirect to this particular page. Now you need to click on sign in and you need to click on uh using a pass key. Sorry not pass key. Now you need to scroll down and you need to click on continue with your Google. If you have Google account right you can continue with your Google. So if you click on here right it will ask you to login. So I'm clicking on login what is this? Okay. Anyway it is asking you to link that account. I have logged in after long time. So it is just asking me. So once you log in right you will get this screen. Okay. Now see it is like just

43:04 I'll tell you all these under to get. Okay. So this is your GitHub. In that GitHub, right, you will have an option called actions. This is called as GitHub actions. This is called as GitHub actions. If you want to run your playright code under to this GitHub actions, we need that file. We need that file. If you want to run your playright test cases under to this GitHub actions, we need we need that YML file. playright dot yiml there is nothing dot what we write it will you will automatically get that file when you are installing playright when you're installing playright when you're installing playright

43:50 is this part clear see very simple when you are installing playright right you are getting some default folders and files right at that point of time it will automatically download playride yiml it is not required that you need to create and you are writing some code in it when you're installing it you will automatically get that file as part of your project structure that is if I if I have that file means you can run your playright code in GitHub actions if I need to run my code whatever the test cases that I write here right if I want to run that in GitHub actions I need this file I need this file I need this file where I will get that file

44:36 under to GitHub you will get a folder with name called workflows under to workflows you will see a file with name called playrite yiml playright dot yiml playright do yiml and then uh the next one is the node modules folder see it will download all libraries which are required for this particular project see normally Playright is a NodeJS library. Playright is a JavaScript or NodeJS library, right? JS means JavaScript SC JavaScript library. If I am if I want to use that library, I need to create a node project. I need to create a node

45:23 project. How do you say a specific project is NodeJS project? If you have package JSON it means it is a NodeJS project. It is a NodeJS project means I am creating this folder as NodeJS project. Under to that I'm adding playrite libraries. Under to that I'm adding playright libraries so that I can use methods from playright. So that I can use methods from playright. So whatever the libraries that are required to run this particular project will be downloaded under two node modules. Whatever the libraries that are required to run this particular project will be downloaded under two node modules under

46:12 to node modules. Is this part clear? So what does what what you have under two node modules? Now the second folder is nothing but a node modules. What you will see under the modules all all required node JS libraries to run your playright uh script to run your playright script means whatever the libraries that are required. Whatever the libraries that are required, whatever the libraries that are required to run your playright script, all those libraries will be downloaded

46:59 under to nodeore modules. Node modules it is like when you're creating in Java, right? Whenever you are going to create any project, you have a folder. You have a folder with a name called referenced libraries where you can see all your libraries to run your Java codes. In the same way in JavaScript, right? If I want to run JavaScript, I need to create a node project. If I am if I want to run playrite test scripts in my node project, I need to download and add a playright library. So where all these libraries will be added to my project means under two node modules of that

47:45 particular project. So very simple if I want to run playrite I need some libraries that libraries will download will be downloaded under to node modules node modules and then uh the next folder is nothing but tests folder where we need to write play write tests where we need to write play right tests where you can write play test. If I want to create any new test case, I need to write under to this particular tests folder. I need to write that particular tests under to that particular test folder. I need to write that particular test

48:32 under to that particular test folder. Is this part clear? Now the next one is a test example. Now this is like when you're downloading playright. When you're downloading a playright, it will give you it will give some sample play right test with few methods which we use as part of playright automation. Playright automation it will give you a sample playright test. with a few methods which we use which we

49:19 use as part of playright automation. It means if you go there and if you open that test examples it will give you a test case where they are using some methods. It is giving multiple test cases where it is using some playright methods to show them as examples. to show them as examples. It means it will give you some sample example test cases to understand that how you will write your playright test. How you are going to write your play rate test? How you are going to write your play rate test? Is this not clear? Anyway, we will see that anyway in our next topic is nothing but we are going

50:04 to write a test. There you will understand what it will it is like some sample playright test which will be automatically downloaded and placed under to this particular folder when you're installing playrite. When you're installing playright and then the next file is nothing but get ignore and the next file is nothing but what is the next file? Get ignore. It will it helps to to it helps to it helps it it you can simply say it contains list of folders

50:50 which are not required to track by your G repository. which are not required to track by your g repository. It will it contains some folder names paths. Okay, if you add that folder right, it will be not considered by your git repository to track those changes to track those changes to track those changes. If you are going to add a see if you go back and if you see here right you will see get ignore you will see there are some folders see node modules is a folder test results is a folder play- report is a folder it means I am telling g if I do any changes under to

51:39 these files don't track it don't track it normally if you do any change in your project right it will show you this this is what that has been changed But I'm saying if I do any changes under to this particular folders I'm asking g to not to track those files because those are not required because those are like temporary files which are not required to track as part of my changes as part of my changes so I can give my folders which are available under to my project which where I don't want to track my changes where I don't want to track my changes. That should be kept under to get ignore file. That should be

52:26 kept under to mean the folders that where you are not going to track, right? That should be kept under to get ignore. Get ignore files. Get ignore file. Is this clear? Anyway, we'll see. We'll see examples. But you should know, right? why you are getting that hierarchy and what file you are going to use and what for you are going to use it right for that I'm explaining it once once we start right we'll we will we'll go through all these files what you do as part of this file as space file now the next one is package lock JSON it is like a temporary file which will be created for your package dojson file the same file it is in locked mode means nobody can edit it nobody can edit it. But if

53:14 you see package JSON now if you see package JSON any node project you are creating that will have this file called package dot JSON it is like if you see in Java right when you're creating a Maven project you will have pom.xml XML file. In the same way when you're creating node project you will automatically get package dot JSON from where you can act you can maintain your dependencies you can maintain your you can add or you can remove it means you can manage and maintain your dependencies for which projects you will see package.json JSON for Node projects,

54:02 NodeJS projects. What you do with this particular file from this file, right, you can manage and you can maintain your dependencies. Now what are dependencies? Dependencies means libraries. For example, if I want to run playrite, I am adding playright library to this particular project. This is called as dependency. This is called as dependency. And if I want to use any typecript, what you know you need to also add this types node as a dependency to your project. Dependency means libraries. Dependencies means libraries. So if you see right what what is the

54:48 next file? This is like temporary file. You can what know it is like locked. You can't edit it. And this file is like pom.xml. XML file. What? In the same way you can simply say if it is NodeJS project we will get this package.json from where we can manage from where you can manage and maintain uh from where you can manage your dependencies. You can simply say manage your dependencies. Now what are dependencies? The dependencies means libraries. Dependencies means libraries. So for example, I had created

55:34 a node project. I want to read data from Excel. I need to add Exceljs library. Okay. In the same way, if I want to generate HTML reports, I need to add allur JS library. Then only I can use those methods in my project. Then only I can use those methods in my project. from where you you are going to manage those dependencies means you are going to manage dependencies from a file called package.json in your NodeJS project. package.json in your NodeJS project. In your NodeJS project, Is this part clear or any questions?

56:21 Is this point clear or any questions? Okay. Is this point clear? So, and last file is playright config.js. See this file is like a test runner for your playright where we maintain all required configurations. all required configurations where we are going to maintain all required configurations of play right. This is like a test runner mean whenever you're executing something right your execution starts from this particular file and this file contains all required

57:08 configurations to run your playright test. This file what now will contain all required configurations to run your playright tests to run your playright tests. Is this part clear? So these are like different files that what you see under to your play right. These are like different files that what we see under to your play right that what we see under to your play right what you know means whenever you are going to download your playright right you'll automatically get these files and what are the significance first one is GitHub actions to run your playright

57:54 code in GitHub actions I have a I have a remote uh I I I I can do my playright script execution in some remote machine and that remote machine we have different in that right one of the type is nothing but GitHub actions. If I want to run my playright code in that GitHub actions I need this playrite file. I need this playright yiml file and second file is node modules. Second folder is node modules. It will download all the required libraries of your node project of your node project. So the project that I have what I have created here right project one

58:39 this is node project this is node project and the tests where we actually need to write our playright test cases and test example is nothing but playright will write will give you one sample test using some methods which are used from playright which are used from playright and then get ignore more here right we are going to list out all the folders which should not be tracked by your G repository which should be not tracked by your G will not track these file changes which are available under to these folders

59:25 when you do any change right if you're doing any change under to files under to these folders it will not track it will not show you that these files got changed It does not track the changes which are done under to the files under to this particular folders under to these particular folders and then package.json is like pom.xml file for your NodeJS project. It means from where you can manage dependencies. What is dependency? Libraries. What are dependencies? Libraries. And then we have a file with name called

1:00:13 playright config.js. This file is called as playright runner from where your test execution starts. If I'm running any test right your execution starts from this particular file where we maintain configurations of play right where we actually maintain configurations of play right where we actually maintain configurations of playright. Is this part clear? So this is the folders that will be automatically created when you install flow playrite in your project. In your project in your project now the next one.

1:01:00 Now I have done my play rate setup. Now how do you say that I'm able to run my playright test cases under to this particular project? How do I say I'm able to run my playright tests from this particular project. So whenever you're downloading a playright right you will get an example file under to your tests folder. You have not created it. You have automatically got an example file. And in playright right when you open any playright file and if you see right if you see any any line of code which is starting with test it indicates it is a test case. It indicates it is a test

1:01:47 case. So in this file right this is one test case and this is your second test case. Okay, that test with open and close circle brace is called as a test block is called as test block means this test got started here and open close brace close open close circle brace and the close circle brace is ending here. This is called as a test block. This is called as a test block. So this is called as a test block and it indicates this is one test case. This is another test case. So there are two test cases under to your example file. There are two test

1:02:33 cases. This is one test case and this is another test case. This is another test case. Whenever you are downloading playrite it will automatically download three browsers. Whenever you're downloading playrate, it will automatically Whenever you're downloading playrate, you will automatically get these three browsers. What are those three browsers? One is Chromium browser. Second one is WebKit browser which we also which is used for Safari. WebKit means it is it is the engine that is used in Safari browser. And then the third one is nothing but uh Firefox. And the third one is nothing but Firefox.

1:03:20 Whenever you are installing your playright, it will automatically download all these three browsers to run your scripts on these browsers. To run your scripts on these browsers. So how many number see I have a file called example. In this how many test cases I have? Two test cases. Right? If I am running these two test cases in three browsers, how many test cases it will be? Six test cases, it will run six test cases. Now if I want to run playrite test, if I want to run playrite tests, so first one is you need to go to playright config file. See if you go to

1:04:08 your this one you will have a file called playright config dot you will have a file called playright config.js JS if you click on that particular file it opens that particular file in that file right if you scroll down you will have a option called test directory it represents whenever I'm running playright tests under to which directory it should run means for example if I write here test means any playright test cases I'm writing under to this particular folder it means whenever I'm running any playright test right it will run all the test cases present under to that particular folder if you want to change this you can change this

1:04:53 particular folder to any name for example I have another folder with name called test examples if you give here test examples means whenever you are running it it will run test cases present under to that test example folder test example folder so here what folder as of now I had given tests so it is it is considering Any files, any test cases written under to that particular file will be under to that particular folder will be executed. Under to that particular folder will be executed. Under to that particular folder will be executed. Under to that particular folder will be executed. Is this part clear? Now it is

1:05:39 like you are telling that my tests are under to this particular folder. My tests are under to this particular folder that that path right you need to give it from playright.config.js playright.config dot js. Now when you are giving that path right you are saying dot / tests. What is dot? Dot represents current node. What is a dot? What is a dot? Dot represents current node. What is a dot? Dot represents current node.

1:06:25 Under to that current project right I have a folder with name called tests. So I'm saying that current folder under to that I have a folder with name called tests which I need to use as my test directory which I need to use as my test directory. So now under to this particular directory right how many files are there one file example spec.js in this file how many test cases are there? Two test cases if I'm running right two into three browsers how many will be executed? Six. So how do we run playrite test? So very simple you need to go back to your terminal and you need to write npx playright

1:07:11 test. This is the command. What is the command? npm play write pl a w i g ht play right test. So what it will do here is it will go and search files which are present under to that particular folder and it will run the test cases which are written under to that particular folder. Huh. Folder that is not folder name it is command. Here the test is not folder name. npx playright test that is a command. It is not folder name. Where you are giving folder name? You are giving folder name under to your configurations.

1:07:58 This is folder name. The folder name is tests command is test. So if you run this what happens? It will run the test cases which are available under to your playright. How many test Can you guys hear me people who are in

1:08:43 online? Okay. So, it has executed six test cases. Why it is showing six two test cases on three browsers. So, again I'm running it. So, run it again. If you run npx playright test, what happened? It is running six test cases and it is showing six got executed and it is showing six out of six got executed. You are not able to see right? It is running in the back end. It is running in the back end. See someone has raised her hand. Anything type it on your chat window. If you have any question

1:09:28 please type it on your chat window. If you have any question, I see Deepi has raised her hand. If you have any question. Okay. So, if you see right now, how do you run your test cases? What is the command? NPX playright test. NPX playright that test is not folder name. It is command. Test. It is command. Is this part clear? Now, the second one. Now when I'm executing it right, it is executing it on three browsers. How it is executing it on three browsers? Because if you go and if you open your playright config.js, if you go and if you open playright

1:10:15 config.js, if you see here right by scrolling down, you can see an option called projects. Now under to this right, they configured all these three. One is chromium, second one is Firefox and third one is webid. If I don't want to run in all the three you can comment. You can comment and save it. Now what browser is available? Only Chromium. It will run only on Chromium browser. So how many tests you will get? If I run two two tests. So again you run and check. So how many test cases are getting executed? Only two test cases.

1:11:02 Okay. Now it is running in the background. That background run is called as headless execution. You are not seeing any browser. It is running in the back end and it is showing whether it got passed or failed. But if I want to see what is happening as part of my execution, I need to write I need to run my test case in headed mode. I need to run my test case in headed mode. So how do we run it? You need to use the same command npx playright test. At the end you need to use headed. I need to use headed. So if you run it right, what happens? You are able to see browser.

1:11:48 See now it is opening browser and then it is running the test case. See it is it is speedly executing. So you are not able to see it. So again let me run. If you see this right, it is executing by opening browser. By opening browser. Now it is running by opening browser. Now what you need to do here is now what you need to do here is see it is executing two test cases by opening browser. Now if you go to playrite config file here right if you scroll a little bit up here it is showing fully parallel is equal to true means there are two test cases those two test cases are executing in parallel. So you are not able to see whether two got

1:12:35 executed or not. So comment this. So comment this. Now it will execute one after other. Now it will execute one after other. So again save it and again run your command. npx playright test headed iPhone headed. See now it has opened two times browser and it has executed. See again I'm running it. Now first time it will open browser and it has executed test. Second time it has opened browser and it is executing that test. So I have disabled parallel. If I enable parallel both will be executed at same time. Both will be executed at same time. Is this

1:13:22 clear? Is this clear? See here you need to understand how do we install playright? What folders you are getting? And then if I want to run and check whether I'm able to run my playright script or not. How do we run? What is the command? npx playright test. npx playright test. When you're installing, what is the command? npm that is that is not npx. npx is used for execution. npm is used for installing npm init playrite at the rate of latest. Here npx and playrite test to run your test cases. So which test cases will run whatever that you configured for test

1:14:08 directory. If you give folder name test it will run test cases from test folder. If you give folder name as the test examples it will run test cases written under to your test examples. Okay. How do you how do you specify from which folder you want to run? that is specified that is specified in your test directory in your playright config.js in your playright config.js. Is this part clear? So whenever you're running it what happens it will run in all the three browsers. If I don't want to run in all the three browsers what you can do you can comment those two browsers. You can comment those what

1:14:55 browsers you want. Right? You can comment and you can only enable on one browser on which you want to run it. On one browser on which you want to run it on one browser on which you want to run it. And if I want to run it in uh if I want to run my test case in headed mode not in the back end headless mode I need to use option called iPhone headed iPhone headed. And I need to use option called iPhone headed. It will run by opening browser. If you don't give that headed, it will run in the back end. For example, if I don't give this a headed, it will run in headless mode. It will run in the back

1:15:41 end. See, you can't see any browser. It will run in the back end and it is saying that two test cases got executed. It is saying that two test cases got executed. Is this part clear? So in today's session right what we have done. So first one is playright installation. Second one is playrite installation using extension and as well as using command and then we had seen what is the hierarchy that you are getting when you install playright library. What folders you will get what files you will get. And then we are just running to check whether I'm able to run my playright tests in this particular project. So I am executing it using npx playright test. npx playright

1:16:28 test and it will run in all three browsers. If I want to run it only one browser I can go and comment rest of the browsers in playright config.js playright config.js and if I want to run my playright testers it defaultly runs in headless mode. It defaultly runs in headless mode. Now if you want to run it in headed mode, how do you run it? You need to run it using option called iPhone headed. You need to run by using option called iPhone headed. Is this part clear? So any questions on today's session?

1:17:14 people who are in online offline see we don't have session tomorrow and day after tomorrow we have next session on Monday tomorrow is Saturday right we don't have any session on tomorrow and day after tomorrow we have next session on Monday drop I think so it is getting disconnected. We have our next session on Monday and we have next session on Monday. Is this part clear? Any questions on today's session team?

1:18:00 Any see please don't uh miss this first sessions. We are not doing any demo. We started playride. Okay, it is not demo or something. See people may think that one week we will do demo and then we'll start our playride. We are we have actually started our playride. So this is important but again we are not going to repeat this but if there are any new members who are joining we'll take them in a separate backup but we will continue. So don't miss any sessions. Don't miss any sessions because we already started from next class right we will write test and then we will see when you're writing right how you are using your JavaScript to write your test mean we'll see one by one why we need to write test in this format why you need

1:18:47 to pass these values why you need to create function in this way what is anonymous function what is arrow function what is asynchronous function and why we need to pass these parameters and whenever you're writing script right you will use async and await. What is async and what is await? That was available in latest node. Previously we used to use call back or 10. Now we are using async and aait. Why we are using it? Why it is mandatory to use it? All these right we are going to see in our next class. next class. See this week we don't have it on Saturday but normally in Saturday right we will also have class same time but you know this week we don't have

1:19:32 classes on Saturday but normally we have classes on Monday to Saturday okay Monday to Saturday and Saturday if I if I if I'm doing any workshop what know we don't have class you need to join that workshop and that will be online that will Okay. Online. Okay. Any questions? How much JavaScript? See JavaScript in the same way. See, for example, if you are already working with Selenium with Java or Selenium with Python, some other language, right? So, how much of Java is required to write Selenium test cases. In the same way, you need to learn how much of JavaScript is required. Means for example first you need to learn the basics like what is a variable data type

1:20:20 l operators loops conditionals arrays strings and in Java we say exceptions here we say errors you need to you need to know how to handle those errors then you can start using this scripting in your what you know playride you can start using that the same knowledge in your playride but once you are writing in playride right you need to write that code in reusable and what you know reusable format. If I need to write that code in reusable and by reducing maintenance I need to write that code by following object oriented programming. So there you will learn what is class, what is object, what is method, what is encapsulation, abstract, polymorphism and inheritance.

1:21:08 Okay, we installed the playright for VSC plug-in and also searched for playright in search box to install few from terminal. Is that possible to execute all code related to different browsers like how do we do it for Firefox? See very simple you can see whatever the configuration file you are maintaining it right those configurations you can directly go and edit and you can use it or else you can also pass them from your command prompt. See for example I'll tell you see you have multiple ways. So for example if I want to if you see right I have not commented these two browsers previously I commented right I I removing that comment. So when I run this particular test case right what happens it will run

1:21:53 on all three browsers. So I will get six test cases. I will get six test cases got executed. But if I want to run it only on one browser right here itself you can give iPhone project and if you say chromium it will run only on chromium browser. If you want to run it on Firefox you need to give Firefox. If I want to run it on webkit you need to give webkit. You need to give web that we will see. See first you just started right. You should know whether you are able to run it or not. For that I am just saying go and comment and run this command. and it will run. We will see that how you are able to pass those parameters from your command prompt as well from your command prompt as well. Any other questions

1:22:42 team? Any other questions? Are we guys are good? If you guys are good, right? Then we can wind up. We will see next class on Monday same time at 7:30. 7:30. So if you're good right then we can wind up. Thank you guys.