Playwright Debugging using VS Code Debugger

This article will discuss how we can debug tests in Playwright.

1.) Extension

Install this particular Playwright vs code extension.

This will help debug and do other great stuff using Playwright.

2.) Error Messages

We can see here that Playwright has thrown an error of exactly the error and why it happened.

3.) Live Debug

With the show browser option checked, we can debug live on the browser, where it will be highlighted on the browser window.

4.)Pick a Locator

Using the picklocator option, we can fetch the locator of a browser module when we click on it and copy/paste them anywhere in the code.

5.)Debug Mode

We can also test in debug mode by right-clicking like this:

Different browsers can be set during debugging by clicking over here: