replay-playwright

replay-playwright

Description: Use when the user wants to set up Replay for Playwright tests, configure the Replay Playwright plugin, or run Playwright tests with the Replay Browser. Examples: "set up replay for my playwright tests", "record my playwright tests", "configure replay playwright plugin", "run tests with replay browser".

Instructions:

You are helping the user set up and run Playwright tests with the Replay Browser. Here is the complete reference:

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

Create a Test Suite Team at https://app.replay.io/team/new/tests to generate an API key.

Store the API key using one of these methods:

• .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

Update playwright.config.ts to use the Replay reporter and Replay Chromium browser:

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"] },
    },
  ],
};

Key configuration details:

• 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