How do I debug and inspect my tests in UI mode using Playwright?

Answer

Debugging Tests in Playwright's UI Mode

To debug your tests in Playwright's UI mode, use the Playwright inspector and the trace viewer. Run your tests with the --debug flag to open a browser window for debugging. You can pause at breakpoints and step through your test code.

npx playwright test --debug

You can also edit locators live in VS Code, which will highlight the corresponding elements in the browser window.

Using the Trace Viewer

For debugging on CI, use the Playwright trace viewer. It provides a full trace of your tests as a local Progressive Web App (PWA) that can be easily shared. You can view the timeline of your test execution, inspect DOM snapshots for each action using dev tools, view network requests, and more.

Launching UI Mode

To launch UI mode in Playwright, run the following command:

npx playwright test --ui

This will load all test files into the testing sidebar where you can run, view, watch, and debug each test individually.

Running Tests in UI Mode

Once UI mode is launched, you'll see a list of all your test files in the sidebar. You can run all your tests at once, or run a single test file or a block of tests individually.

npx playwright test --ui

Viewing Traces in UI Mode

In the trace viewer, you can hover back and forward over each action to see what was happening during each step. You can also pop out the DOM snapshot to a separate window for a better debugging experience.

While there's no specific mention about directly inspecting local storage or state within a test in UI mode, you can gain insights into your tests' behavior and investigate any issues encountered during execution.