Playwright

Install the Replay plugin

1. Install the @replayio/playwright (opens in a new tab) package into your project:

npm install @replayio/playwright -D

2. Add Replay Chromium browser and Replay Reporter to your playwright.config.ts file.

import { PlaywrightTestConfig, devices } from "@playwright/test";
import { devices as replayDevices } from "@replayio/playwright";
 
const config: PlaywrightTestConfig = {
  reporter: [["@replayio/playwright/reporter", {
    apiKey: process.env.REPLAY_API_KEY,
    upload: true
  }], ['line']],
  projects: [
    {
      name: "replay-chromium",
      use: { ...replayDevices["Replay Chromium"] as any },
    }
  ],
};
export default config;

Setup Replay Dashboard

First, create a new team in Replay to organize your Playwright replays. You’ll also need an API Key to upload your replays and team API keys have much higher limits than personal API keys.

1. Go to your Replay Dashboard and create a new team

Alternatively, you can visit this link (opens in a new tab) to instantly create a new team.

2. Once you’ve created a team, click on the settings icon next to your team name and create a new API Key

3. Save the API key in your environment as REPLAY_API_KEY. You can run your tests locally or using your CI provider.

Record your tests

Recording Locally

Once you have added Chromium Replay Browser to your project, you are ready to create your recordings. These will be available in your Replay Dashboard (opens in a new tab). You can run your tests normally, using npx playwright test command.

If your project has multiple browsers set up, you can run Replay Browser only:

npx playwright test --project replay-chromium

➜ npx playwright test
 
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
[replay.io]:       https://app.replay.io/recording/1d50d6ee-fe59-47ba-bc69-fdc6339df3cc
  1 passed (2.1s)

Integrate into your CI workflow

Replay is designed to record tests in CI so you can debug when tests fail. Without Replay, test failures in CI are like a black box, with little insights into what went wrong. By recording with Replay, you get a full recording of the test run with debugging tools built in.

Here are basic configurations for some of the most popular providers which you can add to you project

name: End-to-end tests
on: [push, pull_request]
jobs:
  cypress-run:
    runs-on: ubuntu-22.04
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install dependencies
        run: npm ci
      - name: Run Playwright tests
        run: npx playwright test

Next Steps

Your replays will now be recorded on each test run. You can find all your replays in Test Suite Dashboard.