replay-playwright

replay-playwright

Installation

1. Install the Replay Playwright plugin

npm install --save-dev @replayio/playwright
# or
yarn add --dev @replayio/playwright
# or
pnpm add --save-dev @replayio/playwright
# or
bun add --dev @replayio/playwright

2. Install the Replay Browser

npx replayio install

Authentication

• .env

  file (recommended): Add

  REPLAY_API_KEY=<your_api_key>

  to your

  .env

  file and use the dotenv package to load it.
• macOS/Linux:

  export REPLAY_API_KEY=<your_api_key>

• Windows:

  set REPLAY_API_KEY=<your_api_key>

Configuration

playwright.config.ts

import { replayReporter, devices as replayDevices } from "@replayio/playwright";

const config: PlaywrightTestConfig = {
  reporter: [
    replayReporter({
      apiKey: process.env.REPLAY_API_KEY,
      upload: true,
    }),
    ["line"],
  ],
  projects: [
    {
      name: "replay-chromium",
      use: { ...replayDevices["Replay Chromium"] },
    },
  ],
};

• replayReporter

  handles uploading recordings after test runs

• upload: true

  automatically uploads recordings when tests finish
• The

  replay-chromium

  project uses the Replay Browser to capture recordings
• You can keep existing projects alongside

  replay-chromium

  for regular test runs

Running Tests

npx playwright test --project replay-chromium

upload: true

Core Workflow

1. Install the plugin:

   npm install --save-dev @replayio/playwright

2. Install the browser:

   npx replayio install

3. Update

   playwright.config.ts

   with the Replay reporter and project
4. Set the

   REPLAY_API_KEY

   environment variable
5. Run tests:

   npx playwright test --project replay-chromium

playwright.config.ts

• Preserve existing projects and reporters — add the Replay project and reporter alongside them
• Import

  replayReporter

  and

  devices as replayDevices

  from

  @replayio/playwright

• If the config uses

  defineConfig

  , add the Replay project to the existing

  projects

  array
• If the config already has reporters, append

  replayReporter

  to the existing array

Debugging your recorded application

claude --mcp-config "{
    "mcpServers": {
      "replay": {
        "type": "http",
        "url": "https://dispatch.replay.io/nut/mcp",
        "headers": {
          "Authorization": "${REPLAY_API_KEY}"
        }
      }
    }
  }"