Configuring Playwright


Run the following in your project directory:
npm i @replayio/playwright
This installs the Replay Browsers on your machine and provides functionality for recording tests with Replay.


In your playwright.config.ts file, import devices from @replayio/playwright.
This gives you access to β€œReplay Firefox” and β€œReplay Chromium” devices to set the browser in your config using Playwright projects.
import { PlaywrightTestConfig, devices } from "@playwright/test"; import { devices as replayDevices } from "@replayio/playwright"; const config: PlaywrightTestConfig = { projects: [ { name: "replay-firefox", use: { ...replayDevices["Replay Firefox"] as any }, }, { name: "replay-chromium", use: { ...replayDevices["Replay Chromium"] as any }, }, { name: "firefox", use: { ...devices["Desktop Firefox"] }, }, { name: "chromium", use: { ...devices["Desktop Chromium"] }, }, ], }; export default config;
This example also includes projects for running your tests without recording using Firefox and Chromium, imported from @playwright/test. Only the replay-firefox and replay-chromium projects will generate replays.
Once configured, continue to Recording Tests.