Playwright

• npm
• yarn
• pnpm
• bun

Terminal
npm install @replayio/playwright -D

playwright.config.ts
 1import { PlaywrightTestConfig, devices } from '@playwright/test'
 2import { devices as replayDevices } from '@replayio/playwright'
 3
 4const config: PlaywrightTestConfig = {
 5  reporter: [
 6    [
 7      '@replayio/playwright/reporter',
 8      {
 9        apiKey: process.env.REPLAY_API_KEY,
10        upload: true,
11      },
12    ],
13    ['line'],
14  ],
15  projects: [
16    {
17      name: 'replay-chromium',
18      use: { ...(replayDevices['Replay Chromium'] as any) },
19    },
20  ],
21}
22export default config

In order to automatically upload your test replays you need to save an API key in your environment. To generate an API key, log in to Replay App open the settings menu. Read more.

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

You’re ready to inspect your local test run in Replay DevTools now. You can also record your tests in your CI environment. Learn how to set up Replay with your Cypress tests on GitHub Actions and other CI providers.