replay-cypress

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

replay-cypress

Description: Use when the user wants to set up Replay for recording Cypress tests, configure the Replay Cypress plugin, or run Cypress tests with the Replay browser. Examples: "set up replay for cypress", "record my cypress tests", "configure replay cypress plugin", "run cypress with replay".

Instructions:

You are helping the user set up and configure Replay for recording Cypress tests. Follow these steps in order.

说明： 当用户想要设置Replay以录制Cypress测试、配置Replay Cypress插件或使用Replay浏览器运行Cypress测试时使用。示例："为Cypress设置Replay"、"录制我的Cypress测试"、"配置Replay Cypress插件"、"使用Replay运行Cypress"。

操作步骤：

你正在帮助用户设置并配置Replay以录制Cypress测试，请按以下顺序执行步骤。

Step 1: Create a Test Suite Team

步骤1：创建测试套件团队

Direct the user to visit https://app.replay.io/team/new/tests to create a test suite team. This automatically generates an API key needed for uploading recordings.

引导用户访问https://app.replay.io/team/new/tests创建测试套件团队。这会自动生成上传录制内容所需的API密钥。

Step 2: Install the Replay Cypress Plugin

步骤2：安装Replay Cypress插件

Install the plugin as a dev dependency:

npm install --save-dev @replayio/cypress

将插件作为开发依赖安装：

npm install --save-dev @replayio/cypress

or

yarn add --dev @replayio/cypress

or

pnpm add --save-dev @replayio/cypress

or

bun add --dev @replayio/cypress

undefined

bun add --dev @replayio/cypress

undefined

Step 3: Install the Replay Browser

步骤3：安装Replay浏览器

npx replayio install

This installs the Replay Chromium browser required for recording.

npx replayio install

这会安装录制所需的Replay Chromium浏览器。

Step 4: Store the API Key

步骤4：存储API密钥

The API key must be available as the

REPLAY_API_KEY

environment variable. Save it in a

.env

file at the project root:

REPLAY_API_KEY=<your_api_key>

Alternatively, export it directly:

export REPLAY_API_KEY=<your_api_key>

API密钥需要作为

REPLAY_API_KEY

环境变量存在。将其保存在项目根目录的

.env

文件中：

REPLAY_API_KEY=<your_api_key>

或者直接导出：

export REPLAY_API_KEY=<your_api_key>

Step 5: Configure the Cypress Support File

步骤5：配置Cypress支持文件

Add the Replay support import to

cypress/support/e2e.js

(or

e2e.ts

CommonJS:

require('@replayio/cypress/support')

ESM:

import '@replayio/cypress/support'

在

cypress/support/e2e.js

（或

e2e.ts

）中添加Replay支持导入：

CommonJS：

require('@replayio/cypress/support')

ESM：

import '@replayio/cypress/support'

Step 6: Configure cypress.config.js (or cypress.config.ts)

步骤6：配置cypress.config.js（或cypress.config.ts）

Add the Replay plugin to the Cypress config:

const { defineConfig } = require('cypress')
const { plugin: replayPlugin, wrapOn } = require('@replayio/cypress')
require('dotenv').config()

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(cyOn, config) {
      const on = wrapOn(cyOn)
      replayPlugin(on, config, {
        upload: true,
        apiKey: process.env.REPLAY_API_KEY,
      })
      return config
    },
  },
})

For TypeScript (

cypress.config.ts

import { defineConfig } from 'cypress'
import { plugin as replayPlugin, wrapOn } from '@replayio/cypress'
import 'dotenv/config'

export default defineConfig({
  e2e: {
    setupNodeEvents(cyOn, config) {
      const on = wrapOn(cyOn)
      replayPlugin(on, config, {
        upload: true,
        apiKey: process.env.REPLAY_API_KEY,
      })
      return config
    },
  },
})

在Cypress配置中添加Replay插件：

const { defineConfig } = require('cypress')
const { plugin: replayPlugin, wrapOn } = require('@replayio/cypress')
require('dotenv').config()

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(cyOn, config) {
      const on = wrapOn(cyOn)
      replayPlugin(on, config, {
        upload: true,
        apiKey: process.env.REPLAY_API_KEY,
      })
      return config
    },
  },
})

对于TypeScript（

cypress.config.ts

）：

import { defineConfig } from 'cypress'
import { plugin as replayPlugin, wrapOn } from '@replayio/cypress'
import 'dotenv/config'

export default defineConfig({
  e2e: {
    setupNodeEvents(cyOn, config) {
      const on = wrapOn(cyOn)
      replayPlugin(on, config, {
        upload: true,
        apiKey: process.env.REPLAY_API_KEY,
      })
      return config
    },
  },
})

Step 7: Run Tests with Replay

步骤7：使用Replay运行测试

npx cypress run --browser replay-chromium

Recordings are automatically uploaded and a URL is provided for each recording to view in Replay DevTools.

npx cypress run --browser replay-chromium

录制内容会自动上传，并为每个录制提供一个URL，可在Replay DevTools中查看。

Important Notes

重要说明

The
```
upload: true
```
option in the plugin config enables automatic upload after tests complete.
The
```
wrapOn
```
wrapper is required — it wraps the Cypress
```
on
```
event handler so Replay can hook into test lifecycle events.
Cypress events (test starts, commands, assertions) appear in the Replay DevTools timeline.
For CI/CD, set the
```
REPLAY_API_KEY
```
as a secret environment variable in your CI provider.

插件配置中的
```
upload: true
```
选项可在测试完成后启用自动上传。
```
wrapOn
```
包装器是必需的——它包装Cypress的
```
on
```
事件处理程序，以便Replay可以挂钩到测试生命周期事件。
Cypress事件（测试启动、命令、断言）会显示在Replay DevTools时间轴中。
对于CI/CD，请在CI提供商中将
```
REPLAY_API_KEY
```
设置为秘密环境变量。

Debugging your recorded application

调试录制的应用程序

Run Replay MCP Server to debug your recored application to install the MCP server in Claude, run the following command:

claude --mcp-config "{
    "mcpServers": {
      "replay": {
        "type": "http",
        "url": "https://dispatch.replay.io/nut/mcp",
        "headers": {
          "Authorization": "${REPLAY_API_KEY}"
        }
      }
    }
  }"

运行Replay MCP Server以调试录制的应用程序 要在Claude中安装MCP服务器，请运行以下命令：

claude --mcp-config "{
    "mcpServers": {
      "replay": {
        "type": "http",
        "url": "https://dispatch.replay.io/nut/mcp",
        "headers": {
          "Authorization": "${REPLAY_API_KEY}"
        }
      }
    }
  }"