How do I use the debug mode inspector in Playwright UI?

Answer

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.