Enabling pw:api debugging in Playwright Test for VSCode

Getting started in playwright, it's likely that you may have ran your first test executing the command, npx playwright test .   That's awesome! In the words of the late Jedi Master Obi-Wan Kenobi,  "You've taken your first step into a larger world".

Digging a little deeper you may have learned about passing environment variables to show debugging information in the console when running your tests. DEBUG=pw:api npx playwright test  Or you may have even permanently have this set as a system environment variable, which is pretty cool on its own!

Look at all that beautiful, detailed debug deliciousness!

Now, some time has gone by.

You've explored more of the Playwright ecosystem, and setup into Visual Studio Code and installed the Playwright Test for VSCode Extension!  You've got so much power at your fingertips now!  You open up the Test Explorer, kick off a test, and when you Reveal test output all you see now is...

Where's all the sweet sweet debug goodness? :(

If you like sweet, sweet debug goodness, and running your tests through Playwright Test for VSCode keep reading!

Let's fix this fast!

1. Open Extensions in VS Code.
2. Find Playwright Test for VS Code and click the gear icon

3. Then click Extension Settings.

4. Now a window called Settings will appear in your main tabs of open files.  Note the section Playwright: Env .  Here we can save environment variables for Playwright Test to utilize when executing through VS Code.
Click Edit in settings.json

5. A file called settings.json will now be open in your editor with your cursor inside the section of "playwright.env"

Carefully add "DEBUG": "pw:api" inside of the curly braces of "playwright.env"

6. Save and close settings.json

7. Run your test and open Reveal test output.

And there it is again!

Oh sweet sweet debug goodness, how I've missed you.

Thanks for reading! If you found this helpful, reach out and let me know on LinkedIn or consider buying me a cup of coffee. If you want more content delivered to you in your inbox subscribe below.