Debugging your Playwright tests

Riccardo Corradin on 25 March 2022

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:

  1. Install Playwright
  2. Install the Playwright VSCode extension
  3. Debug
  4. 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:

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

Activating a breakpoint

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

Debug test run

You will see that it will hit your breakpoint:

Breakpoint hit

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.

Real-time debugging recording

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.