Debugging your Playwright tests

Debugging your Playwright end-to-end tests has never been easier. With version 1.19, the Playwright team delivered one heck of an update that includes a VSCode extension for managing and debugging your Playwright tests with one simple click. Read on and get started in just a few minutes.

Summary

The steps to debug your Playwright tests are as follows:

Install Playwright
Install the Playwright VSCode extension
Debug
Analyze

The repository used for this blog and my other blog on Authenticate once with Playwright can be found at: https://github.com/corradin/playwright-testing-library-example.

Install the latest version of Playwright and the Playwright testing library

The functionality described in this article is available as of Playwright version 1.19. Make sure you have installed at least version 1.19.

Install the test library:

npm i -D @playwright/test

Install supported browsers:

npx playwright install

Install the Playwright Visual Studio Code extension

Go to Extensions in VSCode and search for “Playwright”. Make sure you install the one that is verified by Microsoft.

Installing the Playwright Visual Studio Code extension

Debug

Suppose you have the following Playwright test:

View this gist on GitHub

Enable a breakpoint by clicking at the start of the line:

Right-click on the play symbol and click “Debug Test”:

You will see that it will hit your breakpoint:

Analyze

In the previous screenshot, the breakpoint is set on a locator. This will cause the browser to show the highlighted area of the locator. This is shown in blue on the right part of the screenshot. You will also see a small “h1” below the highlighted area, indicating the DOM element that is being located.

While in debugging mode, we can do even more. We could, for example, write a new locator or click between locators and see how that affects the browser screen. This type of real-time debugging will save you tons of time when analyzing issues with your tests.

Conclusion

Debugging your Playwright tests is as easy as running two commands, installing a VSCode extension, and running it with a few clicks. You can literally set this up in five minutes. I hope you do because it is one of the many cool features included in the Playwright testing library. Check out more on what is new in version 1.19 on the official Playwright channel on Youtube.

Would you like to know more about Playwright? Ready for the next step?
Go check this training: End-to-End Testing with Playwright

Any comments are more than welcome! Drop me a message through LinkedIn or Twitter @rscorradin.