Manual CI configuration

👉

Run into questions or issues when configuring in CI? We’re here to help! Contact us in Discord or at support@replay.io.

To record tests in CI without using action-cypress or action-playwright, you’ll need to:

Ensure the Replay test runner package (@replayio/cypress or @replayio/playwright) is installed during the workflow, such as with an npm install step

Update the test run command in your existing workflow to record with Replay

Upload to replay.io

If you are using GitHub Actions, we recommend using action-upload
For other CI environments, use the Replay CLI to add source control metadata and upload to replay.io

shell
npm i -g @replayio/replay
replay metadata --init --keys source --warn
replay upload-all --api-key <api key>

Cypress run command

Adding @replayio/cypress and configuring your project gives access to two additional browser names:

“Replay Firefox” (macOS, Linux)

“Replay Chromium” (Linux only)

Pass the following with your run command to record with Replay:

RECORD_REPLAY_METADATA_FILE=$(mktemp)

RECORD_ALL_CONTENT=1 if using “Replay Firefox”

--browser "Browser Name"

For example, to record with “Replay Firefox”, use the following command:

yaml

RECORD_ALL_CONTENT=1 RECORD_REPLAY_METADATA_FILE=$(mktemp) npx cypress run --browser "Replay Firefox"

If you don’t specify a browser, the Cypress default Electron will be used.

Playwright run command

Adding @replayio/playwright and configuring your project creates Playwright projects for specifying a browser.

replay-firefox (macOS, Linux)

replay-chromium (Linux only)

Pass the following flags to your run command:

--project project-name

--reporter=@replayio/playwright/reporter,line

For example, to use Replay Firefox, the command is:

javascript
npx playwright test --project replay-firefox --reporter=@replayio/playwright/reporter,line

If you don’t specify a project, all projects defined in your config will run.

`@replayio/replay`

You can also use @replayio/replay to manage and upload recordings. The replay package does not require use of GitHub Actions, however it has not been validated with other CI providers.

To use:

Use npx @replayio/replay in your CI configuration file or script to execute commands.

For example, npx @replayio/replay upload-all uploads all replays saved on the machine. RECORD_REPLAY_API_KEY must be set in the environment or passed to the command.

The @replayio/replay package also exposes functions that can be used within scripts, such as uploadAllRecordings(). To use these, install the package in your project and import in your script file. The API key can be passed to the function or set in the environment.

Full instructions at the @replayio/replay repo.

Recording locally

While Replay Test Suites is designed for debugging tests in CI, it can be helpful to record a test locally for additional debugging or when first getting set up.

When recording locally, there are some additional steps.

If using Playwright, additional configuration is required for best performance

Set RECORD_REPLAY_API_KEY as an environment variable locally

Upload replays manually after recording using @replayio/replay

Cypress

Tests can only be recorded when in cypress run mode. You cannot use Replay to record with cypress open.

No additional configuration is required to record Cypress tests locally, just use the run command as described in the Cypress run command section. Then, upload your replays.

Playwright

When recording locally with Playwright, configure Playwright to only use a single worker and increase the timeout if needed to allow for increased run time.

Config example:

javascript
import { PlaywrightTestConfig, devices } from "@playwright/test";
import { devices as replayDevices } from "@replayio/playwright";

const inCI = !!process.env.CI;

const config: PlaywrightTestConfig = {
  timeout: !inCI ? 30 * 1000 : 10 * 1000,
  workers: !inCI ? 1 : undefined,
  use: {
    baseURL: !inCI ? "http://localhost:3000" : undefined,
    launchOptions: {
      slowMo: inCI ? 0 : 500,
    },
  },
  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;

Then, use the run command as described in Playwright run command section and upload your replays.

Uploading replays

When recording tests locally, you’ll need to use @replayio/replay to upload and view replays.

Make sure RECORD_REPLAY_API_KEY is set as an environment variable before uploading.

Common commands are:

npx @replayio/replay ls lists the replays saved on your machine.

npx @replayio/replay view-latest uploads and opens the last replay recorded.

npx @replayio/replay upload-all uploads all replays saved on your machine.

npx @replayio/replay upload <id> uploads a single replay with a given id. The id can be found by viewing replays with ls.

Full instructions at the @replayio/replay repo.

➡️

After recording, view your test run and replays in the Test Suites Dashboard.

Recording Tests