Playwright Tutorial for Beginners 3 - Trace Viewer

#testing #softwaretesting #qualityassurance #playwright

In this tutorial, we will learn about another GUI tool provided by Playwright called the Trace Viewer.

The Playwright Trace Viewer is a GUI tool that helps in exploring recorded Playwright traces after a tests script is executed.

Recording a Trace

We set the trace configuration in the Playwright configuration file, playwright.config.js.

For instance:

// playwright.config.js

const config = {
    retries: 1,
    use: {
        trace: 'on-first-retry'
    }
};

module.exports = config;

When you run a test with the above configuration, a trace.zip file would be created for each test that was retried.

When you specify the retries key in the config file, Playwright retries the test until the test is passed or the maximum number of retries specified is reached.

Available options for the trace key:

off - does not record a trace at all
on - records a trace for each test ran
retain-on-failure - record trace for each test but removes it when the test runs successfully
on-first-retry - record a trace only when retrying a test for the first time

Lets practice now

Lets configure trace to run on every test in the playwright.config.js file and make use of the Desktop Chrome device:
Lets create a test:
Running the test with npx playwright test simple_test.spec.js would generate a trace.zip file.
You can view the trace by running this command in the CLI. (The trace.zip file is stored in the test-results folder:
Doing this would open the Trace Viewer window now you can see the actions performed by the script.

The trace-viewer shows the action on the script on the left side of the window and clicking each of the actions reveals:
- action snapshot
- action log
- source code location
- network log for the action
For instance, clicking on the locator.click text=Phones: