Test Runners

Playwright

1

Create a new testsuite team

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

Jumping to code
2

Install the Playwright Plugin package into your project

Terminal
npm install @replayio/playwright -D
3

Save your API key

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
REPLAY_API_KEY=<your_api_key>
4

Update your configuration

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;
5

Record your test

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)
6

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

7

Done!

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.

Check out this replay for a detailed walkthrough on debugging a flaky Playwright test. You'll see the capabilities of Replay DevTools and walk through the debugging process of identifying the root cause.

Read more

Learn how to record your tests, manage your test suite and debug flaky tests using Replay DevTools

Record Your CI Test Run

Learn how to integrate Replay into your Continuous integration service

Replay DevTools

Learn how to use Replay DevTools to debug your tests.

Test Suite Management

Test Suite Dashboard helps you stay on top of your test suite health.

Debugging tips

Learn about how to effectively debug flaky or failing tests

Previous
FAQ