Playwright

• npm
• yarn
• pnpm
• bun

Terminal
npm install @replayio/playwright@alpha -D

playwright.config.ts
 1import { PlaywrightTestConfig, devices } from '@playwright/test'
 2import {
 3  createReplayReporterConfig,
 4  devices as replayDevices,
 5} from "@replayio/playwright";
 6import 'dotenv/config'
 7
 8const config: PlaywrightTestConfig = {
 9  reporter: [
10    createReplayReporterConfig({
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

In order to upload your test replays you need to generate an API key and save it to your environment. You can generate an API key once you created a team in Replay App. API key management section can be found in the team settings menu. Read more about API keys here.

To use your API key, you can either use dotenv package and save it to a .env file or add the API key to your environment directly.

• .env
• macOS/Linux
• Windows

.env
REPLAY_API_KEY=<your_api_key>

Once you have added Chromium Replay Browser to your project, you are ready to create your recordings. 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:

Terminal
npx playwright test --project replay-chromium

Terminal
➜ 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
  1 passed (2.1s)

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