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

Question

Accepted Answer

### Configure Playwright Tests to Record Traces

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

```typescript
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:

```bash
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:

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

### Serve an HTML Report and Host It

Generate an HTML report with the following command:

```bash
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.

Answer