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 @replayio/playwright -D

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 { devices as replayDevices, replayReporter } from "@replayio/playwright";
 3import "dotenv/config";
 4
 5const config: PlaywrightTestConfig = {
 6  reporter: [
 7    replayReporter({
 8      apiKey: process.env.REPLAY_API_KEY,
 9      upload: true,
10    }),
11    ["line"],
12  ],
13  projects: [
14    {
15      name: "replay-chromium",
16      use: { ...replayDevices["Replay Chromium"] },
17    },
18  ],
19};
20export 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.