Hello, this is Ilarion and this is JavaScript /
TypeScript web automation course. I feel really thrilled now because I just recorded the third
video. and just I'm on the move. I decided to record the fourth one so today we're going to talk
about Playwright recorder and not only talk but use Playwright recorder to record actual tests on
real websites and we're going to right as I said our first tests and see how we should run them
all right so today again Playwright recorder and create an or
der tests and not only that okay today
we are recording tests we'll mark this as done at the end of this video so let's just jump right
into it recording first test first let's go to this website I created just basically copy pasted
from somebody else this website which I put in this GitHub Pages GJ kill e-commerce demo and what
do we have here we have a simple website just for automation testing so we have products our story
then contact form right with the map cool and when when we click
on the product we have the product
page opened and we have the OD card add to card button and we also have this switch for the colors
great cool feature by the way all right and if we click add to the card we will see the card pop
up here on the right side and we also have this button for the card so we can go to the checkout
and just change the amount of the products change the color change the size like whatever and remove
the product from the card okay and let's actually let me show the
full functionality of this
website did I just remove it and it appeared again no I added this one more time okay let's
go to the checkout in checkout we have this form let's fill it with fake filler fill all inputs
okay that works street address okay wherever it suggests City some City Country let's say
Canada com state ZIP code continue to payment no thanks not saving in info no thanks again
test card is this one I'll just copy this over common then any date we want to put on here
okay I
just revealed all my credit cards for you please don't don't don't break my credit
cards I don't have much money there so I don't care and now I just created the order thank you
for your order I was kind of nervous for a second that this wouldn't work because I just copied
this website from somebody else all right but this actually worked so thank you for your order
and your order number is this one and card summary blah blah blah this is the card that I used
and this is the amount of money
it took from me okay so pretty simple website continue
shopping and we'll use this for automation what we want to do we want to record a test all
right let's go to vs code open our project then go to some website let's extensions make sure
you have the Playwright for vs code extension installed let's try to run this extension Playwright okay I'm not sure how to run because
I usually use webstorm or Pycharm IDE so this all VS Code stuff is new for me but I know that you
can hit here the tes
t and then right click and reveal in text Explorer and this will pop up the
test like the vs code extension for us okay close the terminal it bothers me let me close this one
too okay so what do we have here locator reveal test record new we want to record new test right
okay so I hit record new and it says recording it opened this window like on my another screen
and now what it wants me to do is it wants me to actually go to some website and hit
something on this page it makes it small we
can make it larger another time
okay I went to this website now I want to go to let's say products okay I'm already on
products now I want to click on this G the tiger G the tiger and now I want to add this
product to the card adding this to the card and now let's say I want to go to check
out full name Ilarion then email random email.com email whatever then street address I don't know freedom and let's click on this one
apartment I don't care City Boston okay that works United States it's
a of field rin
a of field 1 2 3 4 5 for zip code this field is required 6 7 8 9 10 okay I don't
know what the ZIP code format is in us come on this will fail every Everything zip code in USA - five
digit number specifies individual destination list of zip codes
blah blah blah okay let's try this one this field does reply come on
let's try "continue" payment okay that worked that was weird Okay card number 42 42 42 now month 12 year 30 and CVV Code 1
2 3 now place order thank you for your
order okay and now let's select this
element I just clicked on this one and now let's continue shopping "continue
shopping" and we are here and let's go to products back to products okay this
should be enough let's go back to the code and let's see what happened is there a
button to stop the recording I don't think so but there is a button to close over all
browsers okay closing the browser and let's see what this gave us so we actually recorded
every action that user did on the page start
ing from navigation to the website should I zoom
in I don't know okay I'll just show you this way go to so it navigates to this website then get by roll this is navigation navigation
remember we clicked on the products on the on the header of the page right on the top then get
by roll link name gav the tiger we click on G the tiger product then clicked on the button called
add to card add to card then the card opened and we clicked on check out button there so this
is click on check out but
ton then we clicked on full name click full name fan great then email
we clicked on email input email F random mail then what else snip card textbox first click we
clicked on something else on some text box then we did double click on email field because
I wanted to replace the the mail typer right then I clicked on street address filled it with
freedom then you you get the idea right I think you get the idea then CVV credit card where's the
credit card okay here is card number card number
month CVV I first clicked on it then filled it
then I clicked on place order and then I clicked on thank you for your order so I just clicked to
make sure that we have it and then I clicked on continue shopping like go back button and clicked
on the products in the navigation okay so this is relatively easy so this is just English you see
all this is just reading English navigation get Boll product and then do click then when
we want to fill something we execute this function Fon and the te
xt so relatively easy and
let's try to run this test and actually show the browser let's show the browser I know it will
open in another window let me here okay so it starts filling out the info okay and looks
like the test failed so for this test it did not do the auto complete or maybe it did let's
see let's see if this works okay spending few seconds going back to the console I see it tries
to find something okay and here we see the error the error current number frame locator get
by pl
aceholder but we saw that in the test this didn't succeed so it failed somewhere
so looks like it didn't it doesn't see this Boston it says field is required maybe because
this was autofilled so we didn't fill this one this was aof fill okay let's go to let's try the
following let's try to remove what we have here below what can we do okay let's try to
record this test once again just to play with this recorder just record
new delete everything record new recording do I have the website no
what was the link to the website do you
[Music] remember JavaScript.info was automation okay I'm going to this website going to website products ging
the tiger add to card check name email some random email street address some freedom apartment suit
then Boston let's make sure like this one then let's choose Canada here
Province State British Colombia 5132 this field is required why is it
so strange why this validation is so strange this field Des okay
now let's click continue to payment 4
2 42 42 42 month 1225 and
here 1 2 3 and now we are placing the order that worked clicking on
thank you for your order then clicking on continue shopping and clicking
on products that's it going back to the vs code where is that thing close all browsers okay
and what do we have here let's actually close this one okay same everything is recorded everything
let's run okay again running a new window okay everything selected okay it went through and
praying right now yes yes it worked wow this
this is great from the second time test one passed
but that was tough so it it usually it doesn't happen this way so you usually you struggle
like 10 times to record the test and to make it work wow this means what this means that this
Playwright recorder is a great tool I'm really wow s surprised I'm surprised and and I love I
love all the locators here like it selects by the name it it does the click I can read through
this code very easily so I just want to say that I I don't know I'm s
urprised and astonished by this
Playwright recorder great so what we just learned sorry that was some Matrix what we just learned
we learned how to record tests again reminding you again here right click reveal Element Explorer
then here record new just go to this side record new okay actually it creates a new website
every time you want to record something all right so then record the test and then stop the
browser and you will have your test here easy now I want to show you one more thing
now let's
say I have to close all browsers now let's say I already have this test and it's working and now I
want to add something more to this test I want to if you remember like the last thing that I clicked
on was products so I clicked on products and I was on this page products okay on this page and now
let's say I want to continue my test continue writing my test for this I need to click on
this record at cursor so I set my cursor here I set my cursor and now record at cursor let's
d
o it okay it opens again in new window come on okay let's navigate here navigate into
the website let's click through these links I don't know just check some navigation then
let's click this one open the cart back to store open the cart again click this button
open the card again and don't know click on products click on products again go to contact
enter your name your email M MSG message send message not allowed that's fine all right
so this error is related to the website not to the Pla
ywright or writing automate tests
all right let's close all the browsers and what do we have here you remember I said the
cursor online 40 and from here it again goes to the close this it goes to the website which we
probably don't want to do as at the at this step we are already on the website we are already
on this page so y closing this one and let's see what it does here navigation navigation get
by roll link our story we hit our story in the header in the navigation then we hit contact
yep that was us then we hit on the shopping cart icon then back to store because there
was nothing in the shopping cart then again on shopping cart then we clicked on remove item
this is interesting because I think that um that icon with the cross it has some name remove item
all right then we click on shopping cart again then we click on products first time to close
shopping cart and then we clicked on products second time to navigate to the products then we
went to the contact clicked o
n this input enter your name then filled it with Ilarion another
input email click F click Send message okay and now let's try to run all this I'm running okay
again another how do I make it open in this on this screen okay already wow that was fast it
filled everything went through everything it just filled the contact form and that's it
all right so what do we want to do next we just learned how to record the test we just
learned how to record the test from cursor so when we are at the en
d of the test and we
just want to record something here okay then what do we want to do next and for that we have
the presentation actually let let me show you one thing one cool thing if I look this is our test
you know all these lines they are kind of you have to scroll to the right to the left so long lines
is not a good practice in programming so we want to make this file look prettier and for that
we have to save this file and it automatically makes this prettier so this is considered
pretty
in programming so that you know all right so we don't have to scroll like to the left to the right
to read the code okay so how did I do this so I just hit Ctrl+S or command s s means save and save
the file and it automatically reformatted the code for me so how to do this go to extensions and here
type prettier prettier yep code code formatter and then install prettier I already have it installed
so just install prettier you might have to again restart the vs code and then what you'
ll have
is just you save the file and it formats the file for you let's say I have something like this
I'm writing some code like which looks like this is this pretty no it's not then I'm hitting
Ctrl+S or command s it formats the code from here okay now it's form it let's say I don't know let's say I have
some mess here going on like this then click here then I don't have the semicolon it
formats the test for me so this is much better than it used to be like this okay
common Ctrl+S and it
formats the code for you okay this kind of tip of the day then let's
see what else I wanted to talk about on this we record from cursor we already did that then
get locators selectors okay this is fine so look sometimes you'll have situations when
recorder won't get the right selector for you so let's say let's say the test fails on
this step text box and let's say Playwright gets the wrong selector so I'll write here the
comment this comment is like some text which won't be executed so it
's not programming
test it's not JavaScript TypeScript this test it will fail here it will
fail here because snipcart text box I added this underscore so it will fail here it suggest me I don't know why okay
let's imagine that our test fails here okay and yep that's it says waiting
waiting waiting waiting it cannot find this element and now it will fail in a few seconds I hate when it takes like that much
time or does it search for 30 seconds do I have to feel this silence for
30 seconds a
ll right it failed thankfully okay so this say this error
says locator click test ended execution waiting for waiting for locator so
it didn't find this element by this locator okay snip card text box because we put
this underscore and we want to replace we want to actually like fix this we want to fix this okay
how do I remember this error okay we want to fix this we want to fix this locator all right so what do we again
we open the vs code extension this is VS Code extension and let's cli
ck on the
PE loc locator okay and at this point we can select this element okay I just selected this element on I think it should have
copied okay so it just gives me this um there let's try with Trace R okay Trace
you let's try to re rerun this test again it's just probably work in test VI
okay it opens here so it opened this test get by role. Okay click let's quickly around this test let's run it let's see it come on run the test spec to this is the test we are running
okay so it gets her
e and then it just simply stops stops because it cannot find this element
because we intentionally put the wrong selector all right getting back to vs code we are
waiting for this element to be found and it will say that this will fail because of this
underscore broken locator all right so let it fail okay it just failed here now yep closing
this one now we want to fix this locator this broken one now let's select this option Pi
locator and now let's select this input so I'm hitting this on
e I just did the click and
you see here in vs code I see this PE locator pop up so like I can click on other elements
and it will give me other locators here click here it gives me this one the correct one so
I'll just copy this one over and past it here that's it done we just fixed the test so some
locator was broken the test failed we selected pick locator button went to the page selected
the element which initially failed the test and this popup gave us the correct locator we copy
this
into our test that's it that's how we fix the test all right and one more thing let me
show you the same but with the trace viewer so let's run this test with the trace viewer
so Trace viewer just gives some additional info while I was switching the pages it so it
kind of now the test worked but now I want to break the test again here in this in this point
okay we're running the test where is our Trace viewer okay this page okay it runs the test now
it waits for I don't know how many second
s like 30 seconds and it will fail because it won't
find this locator this selector all right so here what we have for the rescue we have this
button it's a small one circles like Target Emoji I hit this one and now I can do the
same as I did with vs code Qui locator so I select locator and it pops up here I can choose
another one hey come on locator yes but by label so anything you might click on or select okay I
need this one I'm copying this one going to vs code first right let's try to
run it again let's see what happens
okay everything works fine now it now it work got to this page that means that
everything works I just don't have the contact form implemented on this website
all right okay so as far as this worked this should be enough for this lecture later
we will have more errors and we'll debug more all right locator selectors we just checked
how we can choose them with the peak locator Again official docks as always suggesting you
to go check out these two one and
two generating locators recording the test generating locators
it just says the same Peak locator blah blah blah and here record at cursor also really
helpful feature so yep generating locators cool all right moving on I have a small meme
for you if you ever been a single tester QA on the project then you can relate yourself
to this meme selft Junior tester working at startup all right another tip of the day
use watch mode while running test okay let's do this first let me close this
one
I don't like when there are so many windows open let's close let's open the
terminal remind find a new terminal new terminal or just with the shortcut control
Tilda and now let's run tests we right test UI again it opens another
window this is going to kill me okay so here we have our tests have
test two and let's run it let's run it okay actually I need to click on the test all right okay looks like this worked test past
and let's say we change something in the test we change something we
change the url here
and let's rerun the test let's rerun this test and you see it went to this website URL Lio URL come on you see here it went to this website slurl this is what I just changed in vs
code by the way if you don't have aut Tove okay how user friendly is this thing code
settings okay settings settings show profile create profile expert settings okay I have the
settings auto save yep files auto save after delay yep it's probably what we need and then
you can set here let's say
we want to auto save it auto save auto save DeLay So
we want to autosave our files after 500 milliseconds actually I'll make it 200 milliseconds okay and that's it that's all
you have to do to kind of autosave the file so you don't have to always click Ctrl+S
or command s to save the file URL save me okay and now we're going back to the UI mode
and rerunning the test again so this is like second time I'm okay it went to the it went to
the correct page that means that it actually our code wa
s saved in the file okay but you see
every time I change something in the test I have to like I change something here then I go here
and then I have to click play the test replay again so in order to make this faster we can
click on this watch icon watch meaning it will watch for file changes so anytime we save the
file it will rerun the test let's check this okay you see it reruns the test even though I didn't
click on anything okay let's again let me add more text here save it reruns the
test I'll stop
it okay stop and it reruns the test again because again I changed it stop it stop okay it stopped
and then again I'm editing something here save it reruns the test for me so pretty easy pretty easy
to do and save some time okay so that was the tip for today just watching your files and rerunning
them automatically let's try record to record one more test let's navigate to my blog and let's
click through some buttons navigate somewhere type something in this input whatever oka
y to
do this again going back to vs code reminding you about this magic button here on the left
opening vs code extension now let's click on the record new it says recording opens a new
window for you and now let's go to my Blog. github.io okay let's type something here search
input then let's go to about the page let's go back to the list of Articles let's click on
home the same page HR interview questions then let's click on about me again let's type
some text here some text here okay th
is should be enough for our test okay close all browsers
that's it let's see if we can create this and this will actually work let's run this test in
with Trace viewer okay let's run the test one worker now come on run test
the bug test okay let's run it this way terminal npx Playwright test number four let run UI great so this
is the UI and now running and that was fast we didn't
notice anything okay so it goes to website clicks through
buttons put something in input and that's it that wa
s pretty quick so
and let me show you just that we can go through each action and see what's going on
here input click on the button go somewhere else about me type something else and that's
it test finished so we just recorded another one just to practice this skill okay I think
that was it for this lecture and today we covered one item from the list recording tests
recording test recording test from the cursor selecting locators like we played with the
Ws code extension again so I think
this was fun and I suggest you to do what correct go and
automate something with this recorder it's really relatively easy tool just hit the button click
through some website that's it and then replay it replay the test if something fails try to go
and change the locator or if nothing fails then go as I did go and do as I did just change some
locator make the test fail intentionally and then try to to fix it and go also read the docs so
on my slides I put the links to the docs just go ahead
and read them all right so coming
soon next lecture if I'm in the good mood I will record one more today about Playwright
architecture so we we just saw that Playwright runs a browser we are typing some comments
in terminal like we are writing some code in JavaScript JavaScript in TypeScript how all
this works then not JS we have not JS like how all this works together we'll talk about that
in Playwright architecture and again reminding you that if you not don't know the basics of
any pro
gramming languages go learn some of these the earlier you start the easier
it will be later so go ahead and again it was nice having you on this
video hit like share subscribe like and more videos are coming
soon see you in the next one bye
Comments