Hey everyone, in this video we will learn how to locate
elements on a page using tools such as PIC Locator as well as
how to generate your test code on user interaction using
codegen, making writing tests much easier and much more fun.
When you click the pic locator button in VS Code, it will open
a browser window where we can put in a URL of our choice and
then hover over each element on the page to see what the locator
is.
The locator is what playwright uses to find an element on the
page.
We highly recommend using role based locators above any other
locators.
The great thing about the pick locator feature is that you
don't have to worry about figuring out what role the
element is.
Playwright will do that for you and once you have selected your
element, click on it and the locator will appear in the Pick
Locator box in VS Code where you can then easily copy it to the
clipboard and paste it into your test.
You can also generate tests by recording user actions.
Click on the Record New button in VS Code and a browser window
will open.
Here you can put in the URL of the website you want to test.
Let's create a test for our Contoso trailer site.
Now when we go back to VS Code, we can see that a new file has
been created for us and playwright has generated the
code.
We need to start our test by first importing test and Expect
on line one and then creating our test block on line 3 and on
line four we navigate to the page we want to record our test
on.
This is a great start.
Let's see what else our code Gen.
tool can do for us.
We can now go back to our browser window and record our
user actions by simply clicking through the site just like a
user would.
For example, let's search for an Xbox controller and then choose
our favorite one.
Let's select two and then click on the Add to Bag button.
We can now click on the bag icon where we can see our two Xbox
controllers have been added to our bag.
Let's click the remove button to remove our controllers from the
bag and we can now see our cart is empty.
When we go back to VS Code we can see that everything we did
on the website has been recorded and we basically have our test
written for us.
We can press cancel to stop the recording and look at what was
recorded.
After navigating to the URL with page dot go to.
The test then finds the placeholder with a text Search
by Product Name or Search by Image and fills it with the text
Xbox.
It then clicks the Icon Image button and finds a role of Image
with the name of Xbox Wireless Controller Mineral Camo Special
Edition and clicks it.
It then finds the button element with a + and clicks it and then
a button with the name of add to bag.
We then click on the label of cart.
The name cart is taken from the area label of the button
containing the bag icon that we clicked.
So here we are, not just testing that this button works, but also
that it has a good accessible name which is used by screen
readers.
We then find a link element with the name, remove and click it.
We can run our test with the trace viewer option and see each
of the actions of our test that we recorded.
Our test passes, but this is not a true test.
All we are doing is clicking on the page to test something.
We need to write some assertions.
Let's add an assertion to the end of our test and expect that
our Xbox Wireless Controller is visible in the bag.
When we run our test.
Our test will fail just as expected because the Xbox
controller shouldn't be in the bag after we press remove.
Let's move it up to before we click on the remove button and
rerun our test.
Our test now passes as we expect our controller to be in the bag
before we remove it.
We can now copy this assertion and add it to the last line of
our test, but this time instead of using to be visible, we can
change it to not to be visible as once we have clicked the
remove button we want to make sure the product is no longer in
the cart.
We can run our test one more time to make sure it works and
as you can see our test is in green.
Nice.
In this video we saw how easy it is to write tests using codegen
and add assertions to make our test pass.
But what happens when our tests fail and we don't know why?
Let's dive into debugging tests in the next video.
See you then.