Getting Started

This guide assumes that you already have a Cypress 10.9+ test suite. If youโ€™re just setting up your Cypress test suite, first follow the instructions here.

Step 1: Installing the Replay plugin

Install the @replayio/cypress package in your project:
npm install @replayio/cypress -D
Add the Replay plugin to cypress.config.js
const { defineConfig } = require('cypress'); // ๐Ÿ™‹โ€โ™‚๏ธ Add this line to require the replay plugin const { plugin: replayPlugin } = require("@replayio/cypress") module.exports = defineConfig({ e2e: { setupNodeEvents(on, config) { // ๐Ÿ™‹โ€โ™‚๏ธ Add this line to install the replay plugin replayPlugin(on, config); // Make sure that setupNodeEvents returns config return config; }, }, });
Add this line your support file, which should be cypress/support/e2e.js for e2e tests (unless modified)
// cypress/support/e2e.js require('@replayio/cypress/support');
After the setup is complete, you can now try running your tests locally with the Replay browser:
npx cypress run --browser=replay-chromium
Replay Chromium is GA on Linux and beta for Mac and Windows!
โš ๏ธ
If you run into any problems, consult our troubleshooting guide here.

Step 2: Uploading and viewing replays

We recommend creating a new team in Replay to organize your Cypress replays. Youโ€™ll also need an API Key to upload your replays and team API keys have much higher limits than personal API keys.
  1. Visit app.replay.io/team/new to create a team.
  1. Once youโ€™ve created a team, create a new API Key.
  1. Save that API in your GitHub Repository secrets as RECORD_REPLAY_API_KEY so itโ€™s available for the workflow weโ€™ll make next!

Step 3: Setting up your CI environment

Hereโ€™s a basic GitHub Action configuration which you can add to you project as .github/workflows/e2e.yaml to get started.
name: End-to-end tests on: [push, pull_request] jobs: cypress-run: runs-on: ubuntu-22.04 steps: - name: Checkout uses: actions/checkout@v3 # Install NPM dependencies, cache them correctly # and run all Cypress tests - name: Cypress run uses: cypress-io/github-action@v5.1.0 with: browser: replay-chromium build: npm run build start: npm start env: REPLAY_API_KEY: ${{ secrets.RECORD_REPLAY_API_KEY }} # Always run this step so failed tests are uploaded - name: Upload replays if: always() uses: replayio/action-upload@v0.5.1 with: api-key: ${{ secrets.RECORD_REPLAY_API_KEY }}
The steps may be different depending on how you run tests in CI, so pick one of the options below that best applies to you.
๐Ÿ› ๏ธDiagnostic Modes๐Ÿ”ƒRecording strategies