Trace and Debugging Tests | Bondar Academy

Lesson Summary

In this lesson, we will learn how to analyze and debug code in Playwright . When tests fail, it’s essential to understand the underlying issues, and Playwright offers three effective debugging options: Debugging Options Trace Playwright Debugger (Inspector) Visual Studio Code Debugger 1. Using Trace To run tests with tracing, use the command: npx playwright test --trace on This generates a report with a Traces section, allowing you to view the steps performed during the test. By default, tracing is configured to be on for the first retry of a failed test. To enable tracing for all tests, modify the configuration: trace: 'on' 2. Using Playwright Inspector Run the test with the following command to open the inspector: npx playwright test --debug This opens two windows: the Playwright Inspector and the browser. You can run tests step by step, allowing you to observe the actions taken by Playwright in real-time. 3. Using Visual Studio Code Debugger Set a breakpoint in your code and run the test in debug mode. This can be done by clicking the debug button in the test explorer. The debugger will pause at the breakpoint, enabling you to inspect variable values and step through the code execution: debug test This method is particularly useful for complex logic, as it provides insights into variable states during execution. In summary, these three techniques—using Trace, the Playwright Inspector, and the Visual Studio Code Debugger—are essential for effectively debugging your Playwright tests.