replay-cypress

replay-cypress

描述： 当用户希望设置 Replay 来录制 Cypress 测试、配置 Replay Cypress 插件，或使用 Replay 浏览器运行 Cypress 测试时使用。示例：“为 Cypress 设置 Replay”、“录制我的 Cypress 测试”、“配置 Replay Cypress 插件”、“使用 Replay 运行 Cypress”。

说明：

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

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

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

步骤 2：安装 Replay 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

步骤 3：安装 Replay 浏览器

npx replayio install

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

步骤 4：保存 API 密钥

API 密钥必须通过 REPLAY_API_KEY 环境变量提供。将其保存在项目根目录下的 .env 文件中：

REPLAY_API_KEY=<your_api_key>

或者直接导出：

export REPLAY_API_KEY=<your_api_key>

步骤 5：配置 Cypress 支持文件

将 Replay 支持模块导入添加到 cypress/support/e2e.js（或 e2e.ts）：

CommonJS：

require('@replayio/cypress/support')

ESM：

import '@replayio/cypress/support'

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

将 Replay 插件添加到 Cypress 配置中：

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
    },
  },
})

步骤 7：使用 Replay 运行测试

npx cypress run --browser replay-chromium

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

重要说明

• 插件配置中的 upload: true 选项会在测试完成后启用自动上传。
• 必须使用 wrapOn 包装器——它会包装 Cypress 的 on 事件处理程序，以便 Replay 能够挂接测试生命周期事件。
• Cypress 事件（测试开始、命令、断言）会显示在 Replay DevTools 时间轴中。
• 对于 CI/CD，请在 CI 提供商中将 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}"
        }
      }
    }
  }"