Record your Cypress.io tests

Install the Cypress plugin in your project:

• npm
• yarn
• pnpm
• bun

Terminal
npm install @replayio/cypress -D

Simply add the Replay plugin to your project configuration and support files.

• CommonJS
• ESM

cypress/support/e2e.js
require('@replayio/cypress/support')

cypress.config.js
 1const { defineConfig } = require('cypress')
 2const { plugin: replayPlugin } = require('@replayio/cypress')
 3require('dotenv').config()
 4
 5module.exports = defineConfig({
 6  e2e: {
 7    setupNodeEvents(on, config) {
 8      replayPlugin(on, config, {
 9        upload: true, // automatically upload your replays do DevTools
10        apiKey: process.env.REPLAY_API_KEY,
11      })
12      return config
13    },
14  },
15})

In order to upload your test replays you need to generate an API key and save it to your environment. You can generate an API key once you created a team in Replay App. API key management section can be found in the team settings menu. Read more about API keys here.

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
• macOS/Linux
• Windows

.env
REPLAY_API_KEY=<your_api_key>

With everything set up, you can now run your test locally:

• npm
• yarn
• pnpm
• bun

Terminal
npx cypress run --browser replay-chromium

After your test finishes it will generate a link to Replay DevTools where you can inspect your test run.