Configuring Playwright

Installation

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.

Configuration

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.

typescript
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.