Introduction to Playwright Trace Viewer & Test Generator

What is Trace Viewer

It is a graphical user interface (GUI) tool for analyzing captured Playwright traces after the script has run.

Recording a trace​

In the test configuration file, enable the trace: ‘on-first-retry’ option. This will generate a trace.zip file for each retried test.

Options

• 'off' - Do not record a trace.
• 'on' - Record a trace for each test.
• 'retain-on-failure' - Record a trace for each test, but remove it from successful test runs.
• 'on-first-retry' - Record a trace only when retrying a test for the first time.

Viewing the trace​

You can access the stored trace using Playwright CLI:

// npx playwright show-trace <<path of trace.zip>>
npx playwright show-trace test-results/tests-demo-demo-feature-demo-test-chromium/trace.zip

You may view remote traces by entering their URL. They may be created as part of a CI run, making it simple to inspect the remote trace without explicitly downloading the file.

npx playwright show-trace https://example.com/trace.zip

Actions

When you open trace, you will see a list of activities performed by Playwright on the left side:

Selecting each action reveals:

• action snapshots,
• action log,
• source code location,
• network log for this action

in the properties pane. You will also see rendered DOM snapshots associated with each action.

Screenshots

When the screenshots option is enabled during tracing, each trace records a screencast and presents it as a film strip. Hover your cursor over the film strip to obtain an enlarged picture.

Snapshots

Playwright takes a series of full DOM snapshots for each operation when tracing with the snapshots option. Depending on the sort of activity, it will capture:

Before: A snapshot at the time action is called.

Action: A snapshot of the input as it was performed. This sort of image is useful for determining where Playwright clicked.

After: A snapshot after the action.

What is Test Generator

The playwright has the ability to build tests straight out of the box.

Create tests

Run codegen and interact with the browser. The playwright will generate the code for the user interactions. codegen will attempt to build text-based selections that are durable.

npx playwright codegen https://playwright.dev/

You can copy generated code by clicking the button near the record button.

Emulate devices

While mimicking a device, you may record scripts and tests.

# Emulate iPhone 11.
npx playwright codegen --device="iPhone 11" https://playwright.dev/

Emulate color scheme and viewport size

Scripts and tests may also be recorded while imitating various browser features.

# Emulate screen size and color scheme.
npx playwright codegen --viewport-size=800,600 --color-scheme=dark https://playwright.dev/

Emulate geolocation, language, and timezone

# Emulate timezone, language & location
# Once page opens, click the "my location" button to see geolocation in action
npx playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com