Setting up a team

You’ll need a Replay team specifically for your automated test replays. This lets you set up an API key for recording in CI and provides

Start by creating a new team in the Replay Library sidebar and inviting your team members. Once created, we’ll enable access to the Test Suite Dashboard.

When you’re ready to record, you can create an API Key from the Team Settings. Using the API Key connects your recordings to the correct team to ensure access to your replays is protected and your Test Suite Dashboard views are accurate.

Configuring Playwright

Replay records automated browser tests by replacing the browser normally used to run your tests. Playwright must be configured to launch the Replay Browser to generate recordings.

Installation

Run the following in your project directory:

npm install @replayio/playwright -D

This installs the Replay Browsers on your machine and provides functionality for recording tests with Replay.

Configuration

In your playwright.config.ts file, import devices from @replayio/playwright.

This gives you access to “Replay Chromium” devices to set the browser in your config using Playwright projects.

Example config:

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

const config: PlaywrightTestConfig = {
  projects: [
    {
      name: "replay-chromium",
      use: { ...replayDevices["Replay Chromium"] as any },
    },
    {
      name: "chromium",
      use: { ...devices["Desktop Chromium"] },
    },
  ],
};
export default config;