Record your Playwright tests

1

Create a new Test Suite team

Start by visiting our new test suite form. It will create an API key and guide you through each step.

Terminal
npm install --save-dev @replayio/playwright

Terminal
npx replayio install

.env
REPLAY_API_KEY=<your_api_key>

playwright.config.ts
 1import { PlaywrightTestConfig } from "@playwright/test";
 2import {
 3  devices as replayDevices,
 4  replayReporter
 5} from "@replayio/playwright";
 6import "dotenv/config";
 7
 8const config: PlaywrightTestConfig = {
 9  reporter: [
10    replayReporter({
11      apiKey: process.env.REPLAY_API_KEY,
12      upload: true,
13    }),
14    ["line"],
15  ],
16  projects: [
17    {
18      name: "replay-chromium",
19      use: { ...replayDevices["Replay Chromium"] },
20    },
21  ],
22};
23export default config;

Terminal
npx playwright test --project replay-chromium

Terminal
➜ npx playwright test --project replay-chromium

Running 1 test using 1 worker
[1/1] things-app.spec.ts:14:7 › Todos › should allow me to add todo items
[replay.io]: 🕑 Completing some outstanding work ...
[replay.io]:
[replay.io]: 🚀 Successfully uploaded 1 recordings:
[replay.io]:
[replay.io]:    ✅ should allow me to add todo items
  1 passed (2.1s)

Adding Replay to an existing Playwright project

If you already have a playwright.config.ts, merge Replay in instead of overwriting it:

• Reporters — Append replayReporter(...) to your existing reporter array. Leave html, github, line, etc. in place.
• Projects — Add the replay-chromium project alongside existing ones. If you do not need a non-Replay run locally, you can keep replay-chromium as the only project and remove a duplicate stock Chromium project to avoid running both browsers.
• Always pass --project replay-chromium when you want Replay to record. Without --project, Playwright runs every project in the config—including non-Replay ones, which will not produce recordings.

Troubleshooting

If something does not look right, work through these in order:

1. No recording uploaded — Confirm REPLAY_API_KEY is set in the shell that runs Playwright (echo $REPLAY_API_KEY) and that the run actually used --project replay-chromium.
2. replayReporter warns "None of the configured projects ran using Replay Chromium" — You ran a different project. Re-run with --project replay-chromium.
3. Browser fails to launch — Re-run npx replayio install and verify the install succeeded. The Replay browser is separate from Playwright's bundled Chromium.
4. The reporter is wired up but recordings still do not appear — Check that replayReporter is before other reporters that may swallow output (for example, Playwright's line reporter trims the last log line; keep replayReporter first in the array).
5. Errors that look like they come from your app (404s, missing assets, dev-server warnings) — These usually indicate an application-side problem, not a Replay issue. Run the same test once with stock Chromium to confirm.

Record your test suite in CI

GitHub Actions is the documented CI path. The minimal workflow installs dependencies, installs the Replay browser, then runs Playwright with REPLAY_API_KEY set:

.github/workflows/e2e.yml
name: End-to-end tests
on:
  pull_request:
  push:
    branches: [main]
jobs:
  e2e-tests:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - name: Install Replay Chromium
        run: npx replayio install
      - name: Run Playwright tests
        run: npx playwright test --project replay-chromium
        env:
          REPLAY_API_KEY: ${{ secrets.REPLAY_API_KEY }}

Add REPLAY_API_KEY to your repository secrets. For deeper CI guidance—including how to merge Replay into an existing workflow and how to control which recordings upload—see the GitHub Actions reference. Other CI providers follow the same pattern; see other CI providers. To tune what gets uploaded (failed-only, branch-based, deduplicated), see Upload strategies.