Trace and Debugging Tests | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Getting Started with Playwright
Instructor: Artem Bondar
Lesson Summary
This lesson covers various methods for analyzing and debugging tests in Playwright, beyond the trace view in the Playwright extension. Using Trace Viewer To analyze tests using the trace viewer from the command line, follow these steps: Run the test with the command: npx playwright test --project=chromium --trace=on . After execution, open the generated report to find the trace attached. Access the trace viewer to analyze each test step. By default, traces are saved on the first retry of a failed test, which aids in debugging. The configuration for retries can be adjusted in the configuration file. Using Playwright Inspector Another debugging option is the Playwright inspector. To use it: Run the command: npx playwright test --project=chromium --debug . The inspector will open alongside the browser, allowing you to control test execution. You can resume or step through the test, viewing logs of actions taken. Using Visual Studio Code Debugger For debugging within Visual Studio Code: Set a breakpoint in the test code by clicking next to the desired line. Run the test in debug mode using the play button with a bug icon. The browser will launch and pause at the breakpoint, allowing for step-by-step execution. Each method provides unique advantages, so experiment with them to find your preferred debugging approach.