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.
The steps to debug your Playwright tests are as follows:
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.
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
Go to Extensions in VSCode and search for “Playwright”. Make sure you install the one that is verified by Microsoft.
Suppose you have the following Playwright test:
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:
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.
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.