Sure, you can start with the debug mode inspector from Playwright UI. It's a handy GUI tool for debugging your Playwright tests.
To launch the inspector, run your tests with the
--debug flag. This sets up Playwright for debugging and automatically opens the inspector.
// run your tests with the --debug flag npm run test --debug
In debug mode, browsers launch in headed mode. You'll see the browser window while your tests are running. The default timeout is set to 0, meaning there's no timeout for test execution.
You can use the inspector to step through your tests and pause at breakpoints. To set a breakpoint, click next to the line number where you want the breakpoint. A red dot appears, indicating the breakpoint.
// set a breakpoint await page.pause();
You can also live edit locators in the inspector. This lets you modify locators on-the-fly and see them highlighted in real-time in the browser window.
The debug mode inspector provides actionability logs. These show which locators match and how many of them there are. This helps you spot any issues or inconsistencies with your locators during test execution.
Starting with debug mode inspector from Playwright UI gives you powerful debugging capabilities. It's a great tool for troubleshooting and analyzing your Playwright tests.
For more insights on Playwright tests, check out Mastering Playwright Test Automation: Your Comprehensive Cheat Sheet.
If you still have questions, please ask a question and I will try to answer it.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email email@example.com.