用途:当需要为 Cypress 测试接入 Replay、配置 Cypress 插件或用 Replay 浏览器运行测试时使用,可实现测试录制与时间旅行调试。
配置步骤:
- 访问 https://app.replay.io/team/new/tests 创建测试团队,自动生成上传录制所需的 API Key。
- 安装插件(dev 依赖):npm install --save-dev @replayio/cypress(也可用 yarn add --dev / pnpm add --save-dev / bun add --dev)。
- 安装 Replay 浏览器:npx replayio install。
- 将 API Key 存入环境变量 REPLAY_API_KEY,可写入项目根目录 .env 文件,或直接 export REPLAY_API_KEY=<your_api_key>。
- 在 cypress/support/e2e.js(或 .ts)中引入:CommonJS 用 require('@replayio/cypress/support'),ESM 用 import '@replayio/cypress/support'。
- 在 cypress.config.js 或 .ts 中加入 Replay 插件:使用 wrapOn 包装 Cypress 的 on 事件,并调用 replayPlugin(on, config, { upload: true, apiKey: process.env.REPLAY_API_KEY })。
- 运行测试:npx cypress run --browser replay-chromium,录制会自动上传,并返回每个录制的查看 URL。
主要能力:录制 Cypress 测试并上传;在 Replay DevTools 时间线中查看测试事件(测试开始、命令、断言);支持 CI/CD(在 CI 中将 REPLAY_API_KEY 设为密钥环境变量)。
限制与注意:wrapOn 包装为必需项,否则 Replay 无法接入测试生命周期事件;upload: true 才启用测试完成后的自动上传;录制需使用 Replay Chromium 浏览器。资料未提供具体收费与价格信息。