How do I configure Playwright tests to record traces and upload them as artifacts in GitHub Actions for remote viewing?


Configure Playwright Tests to Record Traces

First, update your playwright.config.ts file to record traces on the first retry of each test:

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  // ...
  retries: process.env.CI ? 2 : 0,
  trace: 'on-first-retry',

export default config;

Run Tests with Tracing Enabled

Execute your tests with the --trace option:

npx playwright test --trace on

This generates a trace.zip file for each failed test run.

Upload Trace Artifacts to GitHub Actions

In your GitHub Actions workflow, use the actions/upload-artifact@v2 action to upload the trace files:

- name: Upload Trace Artifacts
  uses: actions/upload-artifact@v2
    name: Traces
    path: **/trace/*.zip

Serve an HTML Report and Host It

Generate an HTML report with the following command:

npx playwright show-report

Host the report on a service like GitHub Pages or Netlify, using your preferred domain, such as https://ray.run/.

Now, you can share the URL for remote viewing of trace files in the trace viewer.

Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.