0:03 Yeah, welcome to playride series. So
0:05 today we will discuss about the uh test
0:10 generator in playride. Okay, so
0:12 playright come with default test
0:14 generation capabilities. Okay, when you
0:16 install the playright, it comes with
0:19 some tool like code genen. So that will
0:22 help you to generate a test for you and
0:24 it is best way to get started writing
0:27 your playright test. Okay. Okay. So on
0:29 this screen if you see my uh we have
0:31 this form and it has some controls and
0:33 we'll try to automate these and let's
0:37 see how the code generator help. So code
0:42 generator will uh take care of uh the
0:45 built-in locator also. If it if it need
0:48 to prioritize ro text id locator so it
0:50 will take care and if it find multiple
0:52 elements also with same attributes it
0:56 will try to identify the unique locator.
0:59 Okay. So let's start and see like how to
1:02 generate a test in VS code. So I'll just
1:06 copy this URL. Okay. Copy this URL.
1:09 minimize and let's go to Visual Studio
1:13 Code. Okay. And in Visual Studio Code,
1:15 uh you can
1:20 run command like npx okay npx playright
1:22 playright
1:26 and instead of test I'll write code gen
1:29 okay genen and then you can pass your
1:31 URL. So even if you don't provide the
1:35 https that's also fine. So let me also
1:37 remove. So this is the application which
1:39 we want to record and that's it. Hit
1:43 enter. So what uh it will do if you see
1:48 here it opened the uh one page and right
1:50 side if you see uh it is coming with
1:52 this pop-up window and this is nothing
1:56 but the test generated code gen. Okay.
1:58 And in this one it imported also the
2:00 playright test. It created simple test
2:02 also with navigation. And after we
2:04 navigate, let's say I want to type
2:06 something in the test box because if you
2:09 see on the right side, the recording is
2:11 already started. And there are more
2:12 controls also. We'll talk about that
2:16 also uh in a meanwhile. So let me type
2:19 here. So let's say if I click here, you
2:21 see the click is happen and it identify
2:26 locator also. So let me type uh robotic
2:30 QA and press tab. You see tab is also
2:35 captured and text area I'll type welcome
2:44 code junion
2:46 and this is what it is doing on the
2:48 right side. Let me I want to click on
2:51 this uh
2:55 button and once it clicked on button I
2:59 want to verify this text. Okay. So um
3:01 let's move to other controls available
3:03 here. So now you are able to see right
3:06 we can perform any action and the this
3:08 playright inspector will record all
3:11 these steps here for you. Okay and later
3:13 you can modify if you don't want this
3:16 tab so you can just remove that manually
3:18 and okay you can add this code into the
3:22 VS code. Now I want to add assertion
3:24 right I want to verify this test. So
3:26 there is a icon. So if you see here, if
3:29 you just hover on this icon,
3:32 you will see this is a assert assert
3:36 text. Okay. So just click on this
3:39 and select your text and you have to
3:41 this is the your expected text. You can
3:45 type here. Okay. And once it is done, I
3:47 think let me show on the right side you
3:49 will get icon. Click on this icon
3:51 accept. And that's it. So you see the
3:55 assertion is added here. expect page uh
3:57 to to contain text and this is my
4:00 expected text. Okay, that's how you can
4:03 add a text ex assertion. Now uh there
4:06 are like different things. Let's say I
4:08 want to check if uh the radio button is
4:10 checked or not. So for that also we have
4:13 the option available assert value. Click
4:16 on assert value. Select on this uh check
4:19 box and you see uh this added the
4:22 assertion the checkbox not to be
4:24 checked. Okay. Not to be checked or if
4:27 it is uh uh you want to see if it is
4:35 Okay. And select the selected radio button.
4:36 button. Okay.
4:38 Okay.
4:41 Let me see again.
4:45 And it added to be checked. Okay. So you
4:48 can do the text assertion also if it is
4:49 radio button. Uh you can do assert
4:52 value. You have snapshot also. Let's say
4:55 I want to do the snapshot assertion for
4:58 uh the
5:00 link. Okay. You click here and you see
5:03 the snapshot assertion is added. Okay.
5:06 This locator to match aerial snapshot.
5:09 So it will match this aerial snapshot.
5:12 Okay. That is there. Again we have a
5:13 pause option also. If you want to pause
5:16 it, if you want to step over. Okay. And
5:18 on right side you have the different
5:20 color themes. If you want to go to dark
5:22 mode or light mode, you have that option
5:26 available. Okay. And uh so there is a
5:29 locator pick functionality also. So if
5:32 you want to pick the locator, so you
5:34 just click on this one arrow. Okay. Pick
5:36 locator. And it will find the locator
5:39 for any element. Okay. So as you hover,
5:41 you see as a tool tip it is showing.
5:44 Okay. Get by role link name equal to
5:47 selenium base.io. I want locator for
5:49 this checkbox. See it is finding using
5:53 the CSS locator like I frame. If I go to
5:55 drop-down, it is finding this by ID.
5:59 Okay, this is again get by role. So uh
6:03 the this test generator is very smart
6:05 and it will prioritize which locator to
6:08 pick and it will select the locator and
6:10 you see uh on the top itself you have
6:14 the stop recording pick locator and uh
6:17 add aerial snapshot add text assertion
6:19 value assertion different options are
6:22 available. Okay.
6:26 So, let me stop this recording. Uh,
6:29 okay. So, I stop this uh recording. Now,
6:33 I can use this code in my um uh VS code
6:36 also. I can use this code inside my VS
6:39 code also. So, let me stop this also.
6:42 Create a new file.
6:49 Uh sele Oh, okay. So form dospec dot ts
6:51 empty spec file and just paste it. Okay.
6:53 So let's say I don't want this click.
6:54 Okay. Because directly I can just type
6:56 the text. I don't want to press tab. You
6:59 can remove that. Okay. I don't want to
7:01 click on this one. So remove that. And
7:04 that's it. So your test is ready. And if
7:07 you just run this test also it will
7:09 work. Okay. So this test is generated by
7:12 the test generator. Now I'll type here
7:15 npx playright test and the file name
7:19 form dot spec.ts
7:21 and if I run this one you see the test
7:24 is running. Okay test is running and it
7:27 is passed. Okay. So let me run in headed
7:30 mode. So I add the parameter hyphen
7:32 headed because playride by default run
7:34 in headless mode. So now if you see it
7:37 is navigating to the website
7:39 and it performed all the steps very
7:42 quickly and it executed. Now let me open
7:43 the report so that you can see the
7:46 output also.
7:48 Now you see that this is the test inside
7:50 this you have all the steps like you are
7:53 filling the robotic QA uh welcome to
7:55 playright session okay and there are
7:58 assertion also expect assertion so all
8:01 are added here. Okay. So, uh the codegen
8:03 is able to generate a script for you.
8:07 Okay. And we have found uh we can get
8:11 the locator also using the the codegen.
8:14 Okay. So now move move to next uh
8:17 concept which is a emulation. Okay. You
8:19 want to test the site but in different
8:22 view port. Okay. In different view port
8:24 how it will look like. Right. So for
8:28 that I will use the uh
8:32 npx playright code gen and the website.
8:37 But after code gen let me add view port size
8:39 size
8:42 view port size and equal to in double
8:46 quote you can provide a size let's say
8:52 uh 500 comma 500 and uh enter. Okay. So
8:54 this time it will open in a different
8:57 view port and you see test to use view
9:00 port it is added here and uh we can
9:03 record the script also. Let me type here
9:07 put robotic QA I'll this time I'll
9:08 select value from drop how to select
9:11 value from drop-down. Okay. And this
9:14 click also I don't need it. And now uh
9:17 how to run only this test case. uh for that
9:19 that
9:22 let me check
9:24 here it is importing so import is
9:26 already done above so we'll just remove
9:28 this and if I want to run only this test
9:30 I will put here only or if you want to
9:33 run both the test cases you can keep as
9:35 it is okay so let me terminate and run
9:37 this test case and let's see how it run
9:40 is it running inside the same view port
9:42 or not
9:45 okay what is the error uh the error we
9:48 are getting at
9:53 test. Okay. So let's see what is this
9:55 because the test name is same. So I'll
10:02 change it to 1 2 3 and run it again.
10:04 Okay. And now you see whatever the port
10:07 we recorded view port in the same view
10:09 port it executed the test case also. So
10:11 let me run it again and you can see this
10:13 is the view port. Okay. in this size
10:15 like we have recorded the script and in
10:18 same view port it executed the uh script
10:23 also. Okay. So, so this is one point in
10:25 emulate view port size. Uh let's talk
10:28 about the how to emulate device also. So
10:30 there is option you can emulate the
10:32 device as well. So for that one I'll
10:34 just take the same command again but
10:37 this time instead of this view port size
10:42 I'll change it to uh devices hyphen -y devices
10:43 devices
10:47 okay device not devices and in double
10:50 quote we will pass the device let's say
10:59 uh 13 okay iPhone 13 and let me click on
11:03 run and this time uh the test generator
11:07 or this code gen will open inside the
11:10 iPhone 13 view. So you see how it is uh
11:14 able to emulate in the iPhone 13 view
11:24 Robotic keyway. Uh then select some
11:29 radio button. Uh click on some link
11:32 and you see the script is recorded. Let me
11:33 me
11:37 select all copy this script and close
11:39 this window. And here I will paste it.
11:42 Okay. Here I will paste it. So import it
11:44 is copying every time. So you don't need
11:48 it. So devices is not found. So we have
11:50 to import the devices.
11:54 Okay. And that's it. So your test is
11:56 ready. Let me comment out other test cases.
11:58 cases.
12:00 And we will run only this test. Okay.
12:03 And let's see this click is not required
12:06 uh for me. I'll just remove it. And
12:11 let's see npx playright test
12:15 and file name. Okay, form dotspec.ts
12:17 dotspec.ts
12:20 - headed. So we are running in the
12:22 headed mode. So that we can see the
12:27 execution also. Uh okay. So what
12:29 happened? npx playright test headed. So
12:34 it executed uh this test and let me open
12:35 the report.
12:37 and the report also you will see it
12:39 here. Okay, so these are the actions we
12:43 perform on this uh uh emulator. Okay,
12:56 Okay, it is running. It is opening also
13:00 but uh in the background if you see
13:03 you see it it opened the window also but
13:06 uh it is running very fast. Let me bring
13:08 it again and you see the view it is
13:10 running very fast so you are not able to
13:15 see the uh UI. Okay. So that's about the
13:17 uh device simulation. So you can use
13:20 different devices also. Uh let's see
13:22 like the color theme also you can use. Okay.
13:25 Okay.
13:29 So what color theme means? I'll show
13:35 you. So we have a uh different uh
13:39 Okay. So I want to change the page theme
13:41 actually. If my page is showing in the
13:43 white background, I want to change it to
13:45 dark theme actually and see how we can
13:47 do that. So we will pass the npx
13:52 playright. Okay. Corion color scheme and
13:55 then the website. So this is the website
13:58 I'm passing and you see the background
14:00 is black here right? So it is black
14:02 theme actually. Okay, black theme. Now
14:05 let me provide uh change it and uh
14:07 provide the light theme here.
14:11 Li GST light. And this time it will open
14:13 the codeen also uh to record it. And you
14:16 see the color schema is set to light.
14:20 Okay. And we can test on this uh schema
14:24 also like the light theme. Okay. So this
14:26 is one another option which I would like
14:30 to show. Okay.
14:32 And there is a custom recording also.
14:35 Okay. There is a uh custom step also we
14:39 can record. Um so let me go. I have
14:43 created that file uh already. See if you
14:45 see here I'm created uh some test block
14:48 inside that make sure the to run in
14:50 headed so that I'm passing the flag also
14:54 headless false. creating the new context
14:57 using the route actually here and then
14:59 I'm creating page and page.pause. So in
15:01 this case what will happen I don't need
15:03 to uh
15:05 I don't need to pass the uh code genion
15:09 in the command line you just write npx
15:12 playr write test okay if you want you
15:15 can pass headed that's it and it will
15:18 open the coion also so for you see it is
15:21 like custom one and after this one you
15:25 can start uh recording your uh script
15:28 okay see it opened also and you can
15:31 start recording your script. So there is
15:33 a continue option, step over, pause.
15:36 Okay, different options are there. So in
15:39 this also you can go to page and you can
15:42 perform the action. Okay, I hope uh this
15:45 is also helpful. Okay, so I'll provide
15:48 the link for this commands in the video
15:50 description. So you can go to the video
15:52 descriptions and you will find all the
15:54 commands which I use in this video. So
15:57 thanks for watching. So don't forget to
15:59 subscribe. I'll be uploading more videos
