Writing Playwright Tests in VS Code

Hey everyone, In this post we will learn how to locate elements on the page using tools such as pick locator and how to generate your tests on user interaction using Codegen making writing tests much more easier and much more fun.

When you click the pick 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.

A 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 Traders 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 1 and then creating our test block on line 3 and on line 4 we navigate to the page we want to record our test on. This is a great start. Let’s see what else our Codegen 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 favourite one. Let’s select two and then click on add to bag button. We can now click on the bag icon where we can see our two x-box 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.goto the test then finds the placeholder with the text search by product name or search by image and it 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 plus sign 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 aria 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 toBeVisible we can change it to not.toBeVisible 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 still in green. Nice.

To see a full collection of playwrights assertions, check out the assertion docs. Now that we know how to write tests it’s time to learn how to debug our tests for those times when our tests are failing and we don’t know why. Let’s dive into debugging in the next video. See you then.

In this post we saw how easy it is to write tests using Codgen and add assertions to make our tests pass. But what do we do when our tests fail and we don’t know why. Let’s dive into debugging tests in the next post.

Check out the Video

Useful Links

• Playwright docs
• Join our Discord server
• Subscribe to the Playwright YouTube channel