Configuring Cypress

Installation

Run the following in your project directory:

npm i @replayio/cypress

This installs the Replay Browsers on your machine and provides functionality for recording tests with Replay.

Configuration

Cypress v. 10+

In your Cypress config file, import cypressReplay from @replayio/cypress.

Then, add cypressReplay inside setupNodeEvents.

The examples below correspond to the configuration examples in the Cypress docs.

CommonJS syntax

javascript
const { defineConfig } = require("cypress");
const cypressReplay = require("@replayio/cypress");

module.exports = defineConfig({
  e2e: {
    screenshotOnRunFailure: false,
    video: false,
    setupNodeEvents(on, config) {
      cypressReplay.default(on, config);
      return config;
    },
  },
});

cypress.config.js

ESM Module syntax

typescript
import { defineConfig } from "cypress";
import cypressReplay from "@replayio/cypress";

export default defineConfig({
  e2e: {
		screenshotOnRunFailure: false,
    video: false,
    setupNodeEvents(on, config) {
      cypressReplay(on, config);
      return config;
    },
  },
});

cypress.config.ts

Cypress legacy versions

In your Cypress plugins file, add the following code:

javascript
const cypressReplay = require("@replayio/cypress");

module.exports = (on, config) => {
  cypressReplay.default(on, config);

  return config;
};

cypress/plugins/index.js

Screenshots and Videos

In these examples, video and screenshotOnRunFailure are set to false. This is not required, but recommended to improve performance.

Screenshots and videos typically aren’t needed when you already have a replay!

Once configured, continue to Recording Tests.