Answer

Recording and Viewing Traces with Playwright and Cucumber

Recording a Trace Locally

To record a trace during development, you can use the --trace flag. Run your tests with the following command:

npx playwright test --trace on

This command will record traces for each test. You can then open the HTML report and click on the trace icon to view the trace.

Recording a Trace on CI

You can also record traces on continuous integration (CI) on the first retry of a failed test. To do this, set the trace: 'on-first-retry' option in your test configuration file (playwright.config.ts). This will produce a trace.zip file for each retried test.

module.exports = {
  trace: 'on-first-retry'
};

Viewing Traces

To view the traces, you can use Playwright's Trace Viewer tool. This tool provides details about each action in your tests, such as the action called, its time and duration, parameters, return value, log output, console logs or errors, network requests made during the action, and source code for your entire test.

Using Playwright's Tooling

Playwright comes with a range of tools that can help you write tests effectively. These tools include features like stepping through tests while viewing actionability logs and editing locators live to see them highlighted in the browser window.

If you're not using Playwright as a Test Runner, you can use the browserContext.tracing API instead.