Debugging Playwright Tests with VS Code

I use VS Code as my text editor/IDE for writing Playwright tests. I can use use VS Code for debugging since it offers full debugging functionality like breakpoints and being able to see variables etc.

To enable this, there’s a couple of things you do:

  1. I created a debug task in my package.json file: "debug": "npx playwright test --headed --timeout=0" which means I can use npm run debug to execute a test without a timeout and showing the browser – by either adding a .only to a specific test, or telling it a file, eg. npm run debug ./scenarios/test1.spec.ts
  2. In VSCode use the “View → Debug Console” menu option, choose “Terminal” and make sure “JavaScript Debug Terminal” is set as the terminal type.
  3. Add a breakpoint in your code using the red dot in the left margin
  4. You can then use the npm run debug command which starts a debugging session where you can step through and see variables etc.
Debugging Playwright scripts in VS Code

Happy Debugging & Happy New Year! 🥳

3 replies on “Debugging Playwright Tests with VS Code”

Great stuff! I’ve been enjoying the series on playwright! I’m using it for my current project. I found it helpful to default the worker to 1 when running in debug mode `–workers=1`

Leave a Reply

Your email address will not be published. Required fields are marked *