Record your Playwright tests

Start by visiting our new testsuite 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;

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)

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