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:
- I created a
debugtask in mypackage.jsonfile:"debug": "npx playwright test --headed --timeout=0"which means I can usenpm run debugto execute a test without a timeout and showing the browser – by either adding a.onlyto a specific test, or telling it a file, eg.npm run debug ./scenarios/test1.spec.ts - In VSCode use the “View → Debug Console” menu option, choose “Terminal” and make sure “JavaScript Debug Terminal” is set as the terminal type.
- Add a breakpoint in your code using the red dot in the left margin
- You can then use the
npm run debugcommand which starts a debugging session where you can step through and see variables etc.
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`
Thanks a lot, this is extremely helpful.
Oh, I just found out that this can be achieved very easily through the VSCode plugin for Playwright:
https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright
Then in the vertical tabs on the very left, you’ll have a “Testing” items where you can run tests. When hovering over an entry, there will be specific actions like “Run Test” and “Debug Test”. There you go!