Playwright's codegen tool simplifies test creation by automatically generating test scripts based on user interactions, offering features like intelligent locator generation, assertion capabilities, and emulation options for various viewports, devices, and color schemes.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
Yeah, welcome to playride series. So
today we will discuss about the uh test
generator in playride. Okay, so
playright come with default test
generation capabilities. Okay, when you
install the playright, it comes with
some tool like code genen. So that will
help you to generate a test for you and
it is best way to get started writing
your playright test. Okay. Okay. So on
this screen if you see my uh we have
this form and it has some controls and
we'll try to automate these and let's
see how the code generator help. So code
generator will uh take care of uh the
built-in locator also. If it if it need
to prioritize ro text id locator so it
will take care and if it find multiple
elements also with same attributes it
will try to identify the unique locator.
Okay. So let's start and see like how to
generate a test in VS code. So I'll just
copy this URL. Okay. Copy this URL.
minimize and let's go to Visual Studio
Code. Okay. And in Visual Studio Code,
uh you can
run command like npx okay npx playright
playright
and instead of test I'll write code gen
okay genen and then you can pass your
URL. So even if you don't provide the
https that's also fine. So let me also
remove. So this is the application which
we want to record and that's it. Hit
enter. So what uh it will do if you see
here it opened the uh one page and right
side if you see uh it is coming with
this pop-up window and this is nothing
but the test generated code gen. Okay.
And in this one it imported also the
playright test. It created simple test
also with navigation. And after we
navigate, let's say I want to type
something in the test box because if you
see on the right side, the recording is
already started. And there are more
controls also. We'll talk about that
also uh in a meanwhile. So let me type
here. So let's say if I click here, you
see the click is happen and it identify
locator also. So let me type uh robotic
QA and press tab. You see tab is also
captured and text area I'll type welcome
code junion
and this is what it is doing on the
right side. Let me I want to click on
this uh
button and once it clicked on button I
want to verify this text. Okay. So um
let's move to other controls available
here. So now you are able to see right
we can perform any action and the this
playright inspector will record all
these steps here for you. Okay and later
you can modify if you don't want this
tab so you can just remove that manually
and okay you can add this code into the
VS code. Now I want to add assertion
right I want to verify this test. So
there is a icon. So if you see here, if
you just hover on this icon,
you will see this is a assert assert
text. Okay. So just click on this
and select your text and you have to
this is the your expected text. You can
type here. Okay. And once it is done, I
think let me show on the right side you
will get icon. Click on this icon
accept. And that's it. So you see the
assertion is added here. expect page uh
to to contain text and this is my
expected text. Okay, that's how you can
add a text ex assertion. Now uh there
are like different things. Let's say I
want to check if uh the radio button is
checked or not. So for that also we have
the option available assert value. Click
on assert value. Select on this uh check
box and you see uh this added the
assertion the checkbox not to be
checked. Okay. Not to be checked or if
it is uh uh you want to see if it is
Okay. And select the selected radio button.
button. Okay.
Okay.
Let me see again.
And it added to be checked. Okay. So you
can do the text assertion also if it is
radio button. Uh you can do assert
value. You have snapshot also. Let's say
I want to do the snapshot assertion for
uh the
link. Okay. You click here and you see
the snapshot assertion is added. Okay.
This locator to match aerial snapshot.
So it will match this aerial snapshot.
Okay. That is there. Again we have a
pause option also. If you want to pause
it, if you want to step over. Okay. And
on right side you have the different
color themes. If you want to go to dark
mode or light mode, you have that option
available. Okay. And uh so there is a
locator pick functionality also. So if
you want to pick the locator, so you
just click on this one arrow. Okay. Pick
locator. And it will find the locator
for any element. Okay. So as you hover,
you see as a tool tip it is showing.
Okay. Get by role link name equal to
selenium base.io. I want locator for
this checkbox. See it is finding using
the CSS locator like I frame. If I go to
drop-down, it is finding this by ID.
Okay, this is again get by role. So uh
the this test generator is very smart
and it will prioritize which locator to
pick and it will select the locator and
you see uh on the top itself you have
the stop recording pick locator and uh
add aerial snapshot add text assertion
value assertion different options are
available. Okay.
So, let me stop this recording. Uh,
okay. So, I stop this uh recording. Now,
I can use this code in my um uh VS code
also. I can use this code inside my VS
code also. So, let me stop this also.
Create a new file.
Uh sele Oh, okay. So form dospec dot ts
empty spec file and just paste it. Okay.
So let's say I don't want this click.
Okay. Because directly I can just type
the text. I don't want to press tab. You
can remove that. Okay. I don't want to
click on this one. So remove that. And
that's it. So your test is ready. And if
you just run this test also it will
work. Okay. So this test is generated by
the test generator. Now I'll type here
npx playright test and the file name
form dot spec.ts
and if I run this one you see the test
is running. Okay test is running and it
is passed. Okay. So let me run in headed
mode. So I add the parameter hyphen
headed because playride by default run
in headless mode. So now if you see it
is navigating to the website
and it performed all the steps very
quickly and it executed. Now let me open
the report so that you can see the
output also.
Now you see that this is the test inside
this you have all the steps like you are
filling the robotic QA uh welcome to
playright session okay and there are
assertion also expect assertion so all
are added here. Okay. So, uh the codegen
is able to generate a script for you.
Okay. And we have found uh we can get
the locator also using the the codegen.
Okay. So now move move to next uh
concept which is a emulation. Okay. You
want to test the site but in different
view port. Okay. In different view port
how it will look like. Right. So for
that I will use the uh
npx playright code gen and the website.
But after code gen let me add view port size
size
view port size and equal to in double
quote you can provide a size let's say
uh 500 comma 500 and uh enter. Okay. So
this time it will open in a different
view port and you see test to use view
port it is added here and uh we can
record the script also. Let me type here
put robotic QA I'll this time I'll
select value from drop how to select
value from drop-down. Okay. And this
click also I don't need it. And now uh
how to run only this test case. uh for that
that
let me check
here it is importing so import is
already done above so we'll just remove
this and if I want to run only this test
I will put here only or if you want to
run both the test cases you can keep as
it is okay so let me terminate and run
this test case and let's see how it run
is it running inside the same view port
or not
okay what is the error uh the error we
are getting at
test. Okay. So let's see what is this
because the test name is same. So I'll
change it to 1 2 3 and run it again.
Okay. And now you see whatever the port
we recorded view port in the same view
port it executed the test case also. So
let me run it again and you can see this
is the view port. Okay. in this size
like we have recorded the script and in
same view port it executed the uh script
also. Okay. So, so this is one point in
emulate view port size. Uh let's talk
about the how to emulate device also. So
there is option you can emulate the
device as well. So for that one I'll
just take the same command again but
this time instead of this view port size
I'll change it to uh devices hyphen -y devices
devices
okay device not devices and in double
quote we will pass the device let's say
uh 13 okay iPhone 13 and let me click on
run and this time uh the test generator
or this code gen will open inside the
iPhone 13 view. So you see how it is uh
able to emulate in the iPhone 13 view
Robotic keyway. Uh then select some
radio button. Uh click on some link
and you see the script is recorded. Let me
me
select all copy this script and close
this window. And here I will paste it.
Okay. Here I will paste it. So import it
is copying every time. So you don't need
it. So devices is not found. So we have
to import the devices.
Okay. And that's it. So your test is
ready. Let me comment out other test cases.
cases.
And we will run only this test. Okay.
And let's see this click is not required
uh for me. I'll just remove it. And
let's see npx playright test
and file name. Okay, form dotspec.ts
dotspec.ts
- headed. So we are running in the
headed mode. So that we can see the
execution also. Uh okay. So what
happened? npx playright test headed. So
it executed uh this test and let me open
the report.
and the report also you will see it
here. Okay, so these are the actions we
perform on this uh uh emulator. Okay,
Okay, it is running. It is opening also
but uh in the background if you see
you see it it opened the window also but
uh it is running very fast. Let me bring
it again and you see the view it is
running very fast so you are not able to
see the uh UI. Okay. So that's about the
uh device simulation. So you can use
different devices also. Uh let's see
like the color theme also you can use. Okay.
Okay.
So what color theme means? I'll show
you. So we have a uh different uh
Okay. So I want to change the page theme
actually. If my page is showing in the
white background, I want to change it to
dark theme actually and see how we can
do that. So we will pass the npx
playright. Okay. Corion color scheme and
then the website. So this is the website
I'm passing and you see the background
is black here right? So it is black
theme actually. Okay, black theme. Now
let me provide uh change it and uh
provide the light theme here.
Li GST light. And this time it will open
the codeen also uh to record it. And you
see the color schema is set to light.
Okay. And we can test on this uh schema
also like the light theme. Okay. So this
is one another option which I would like
to show. Okay.
And there is a custom recording also.
Okay. There is a uh custom step also we
can record. Um so let me go. I have
created that file uh already. See if you
see here I'm created uh some test block
inside that make sure the to run in
headed so that I'm passing the flag also
headless false. creating the new context
using the route actually here and then
I'm creating page and page.pause. So in
this case what will happen I don't need
to uh
I don't need to pass the uh code genion
in the command line you just write npx
playr write test okay if you want you
can pass headed that's it and it will
open the coion also so for you see it is
like custom one and after this one you
can start uh recording your uh script
okay see it opened also and you can
start recording your script. So there is
a continue option, step over, pause.
Okay, different options are there. So in
this also you can go to page and you can
perform the action. Okay, I hope uh this
is also helpful. Okay, so I'll provide
the link for this commands in the video
description. So you can go to the video
descriptions and you will find all the
commands which I use in this video. So
thanks for watching. So don't forget to
subscribe. I'll be uploading more videos
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
