Debugging Playwright Tests

Writing and executing tests can be a seamless and enjoyable process, depending on the technology stack for testing or the application being tested. However, it can be a painful experience if you are not well-equipped with tools for debugging failing tests. This is often due to error messages not providing enough information about the issue, and the browser hanging at specific points in the test script. Rerunning and pausing the test to debug a specific step can be time-consuming.

Let’s examine a common error in test automation: “Test timeout exceeded.” If we know that this test was executed successfully in the past and is now failing with a timeout error, we can assume that there was an error with executing one action inside the test because the element was not found. The error message indicates that the error occurred at action locator.fill and the line of code is 19.

Error while entering text into input field

There are several tools that we can use to debug tests:

• Headed mode execution
• Verbose API logs
• Browser Developer Tools
• Playwright Inspector
• VS Code extension
• Trace Viewer
• UI mode

Headed mode execution

Running tests in headed mode and watching the UI during execution can provide clues as to what is going on. Although it may not seem like much help, defining headed mode by starting the browser with options can be useful in this regard.

// Chromium, Firefox, or WebKit
await chromium.launch({ headless: false, slowMo: 100 });

Setting headed mode can be done in the Playwright config file or by starting the browser with argument headed.

npx playwright test --headed

After execution, Playwright generates a console and HTML report, depending on the configuration. If an error occurred while something was displayed in the UI, a screenshot is generated at the moment when the issue occurred. This still doesn’t provide much help, as it suggests an issue with the action fill. A better error…