Playwright Trace Viewer is a GUI tool that helps to explore recorded Playwright traces after the script has ran. We can go back and forward through each action of the test and visually see what was happening during each action. This option would be really helpful during Continuous testing in CI environment. Can open traces locally or in browser on trace.playwright.dev.

Trace Viewer will have,

• action snapshots
• rendered DOM snapshots associated with each action
• metadata like the time the action was performed
• what browser engine was used
• what the viewport was
• each trace records as a film strip
• what action was called
• action time and duration as well as parameters, return value and log
• console output for the action
• network requests that were made during the action.

Generate a trace :

Trace can be recorded ,

i. In local

ii. In CI environment.

i. Generate the trace in local :

To generate trace, configure in test suite,

test.use({ trace: 'retain-on-failure' })
test.describe('Test on Assertions', () => {
    test.beforeEach(async ({ page }) => {
        await page.goto('http://www.example.com/')
    })

Run from terminal,

 npx playwright test assertions.test.ts --reporter=html

After running this test, it will generate traze.zip file under project’s test-results folder. Also will be attached with .html report as below,

This trace can be viewed on, Playwright Trace Viewer by uploading this .zip file.

Trace will have info like, what action has been performed and status of DOM element before and after each action, metadata and much more.

ii. Generate the trace in CI :

To generate in CI environment, include the below configuration in playwright.config.ts.

 use: {
    headless: false,
    browserName: "chromium",
    screenshot: "only-on-failure",
    video: "retain-on-failure",
    trace: "retain-on-failure",
  }

Reference :

Trace Viewer | Playwright