Playwright
Install the Replay plugin
1. Install the @replayio/playwright (opens in a new tab) package into your project:
npm install @replayio/playwright -D
2. Add Replay Chromium browser and Replay Reporter to your playwright.config.ts
file.
import { PlaywrightTestConfig, devices } from "@playwright/test";
import { devices as replayDevices } from "@replayio/playwright";
const config: PlaywrightTestConfig = {
reporter: [["@replayio/playwright/reporter", {
apiKey: process.env.REPLAY_API_KEY,
upload: true
}], ['line']],
projects: [
{
name: "replay-chromium",
use: { ...replayDevices["Replay Chromium"] as any },
}
],
};
export default config;
Setup Replay Dashboard
First, create a new team in Replay to organize your Playwright replays. You’ll also need an API Key to upload your replays and team API keys have much higher limits than personal API keys.
1. Go to your Replay Dashboard and create a new team
Alternatively, you can visit this link (opens in a new tab) to instantly create a new team.
Test Suites are currently in closed Beta. If you’d like to start recording your tests, test suites need to be enabled in your team. Join our waitlist (opens in a new tab) and we’ll reach out to you as soon as possible.
2. Once you’ve created a team, click on the settings icon next to your team name and create a new API Key
3. Save the API key in your environment as REPLAY_API_KEY
. You can run your tests locally or using your CI provider.
Record your tests
Recording Locally
Once you have added Chromium Replay Browser to your project, you are ready to create your recordings. These will be available in your Replay Dashboard (opens in a new tab). 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:
npx playwright test --project replay-chromium
➜ 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
[replay.io]: https://app.replay.io/recording/1d50d6ee-fe59-47ba-bc69-fdc6339df3cc
1 passed (2.1s)
Integrate into your CI workflow
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
name: End-to-end tests
on: [push, pull_request]
jobs:
cypress-run:
runs-on: ubuntu-22.04
steps:
- name: Checkout
uses: actions/checkout@v4
- uses: actions/setup-node@v3
with:
node-version: 18
- name: Install dependencies
run: npm ci
- name: Run Playwright tests
run: npx playwright test
Next Steps
Your replays will now be recorded on each test run. You can find all your replays in Test Suite Dashboard.