Record your Playwright tests

Start by visiting our new test suite form. It will create an API key and guide you through each step.

• npm
• yarn
• pnpm
• bun

Terminal
npm install --save-dev @replayio/playwright

Terminal
npx replayio install

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>

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

With everything set up, you can now run playwright test to record and upload your first Playwright replays.

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)

Check out this replay for a detailed walkthrough on debugging a flaky Playwright test.