mcpField
R
replay-playwright

replay-playwright

github.com/replayio测试与质量0103 次安装37 周前更新
代码仓库

关于 replay-playwright

replay-playwright 是一项指导使用 Replay Browser 运行 Playwright 测试并上传录制内容的技能，面向希望在现有项目中加入 Replay 录制功能的团队。它说明如何在保留原有项目和报告器的同时进行配置。

主要功能

  1. 01安装 Replay Playwright 插件和浏览器
  2. 02配置 Replay 报告器与 Chromium 项目
  3. 03测试结束后上传录制内容
  4. 04排查录制驱动加载问题

适用场景

  1. 01为现有 Playwright 测试套件添加 Replay 录制
  2. 02使用 Replay Browser 运行测试
  3. 03诊断测试未生成录制内容的问题

MCP 相关

文档说明如何在 Claude 中配置 Replay MCP 服务，以调试录制的应用。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/replayio/skills --skill replay-playwright

安装后在 Claude Code 中输入/replay-playwright确认已加载。

详细介绍

replay-playwright

**描述：**当用户希望为 Playwright 测试设置 Replay、配置 Replay Playwright 插件，或使用 Replay Browser 运行 Playwright 测试时使用。例如：“为我的 Playwright 测试设置 Replay”“录制我的 Playwright 测试”“配置 Replay Playwright 插件”“使用 Replay Browser 运行测试”。

说明：

你正在帮助用户使用 Replay Browser 设置和运行 Playwright 测试。以下是完整参考：

安装
1. 安装 Replay Playwright 插件
npm install --save-dev @replayio/playwright
# or
yarn add --dev @replayio/playwright
# or
pnpm add --save-dev @replayio/playwright
# or
bun add --dev @replayio/playwright
2. 安装 Replay Browser
npx replayio install
身份验证

在 https://app.replay.io/team/new/tests 创建一个测试套件团队，以生成 API 密钥。

使用以下任一方法存储 API 密钥：

  • .env 文件（推荐）：将 REPLAY_API_KEY=<your_api_key> 添加到 .env 文件，并使用 dotenv 包加载。
  • macOS/Linux：export REPLAY_API_KEY=<your_api_key>
  • Windows：set REPLAY_API_KEY=<your_api_key>
配置

更新 playwright.config.ts，使用 Replay reporter 和 Replay Chromium 浏览器：

import { replayReporter, devices as replayDevices } from "@replayio/playwright";

const config: PlaywrightTestConfig = {
  reporter: [
    replayReporter({
      apiKey: process.env.REPLAY_API_KEY,
      upload: true,
    }),
    ["line"],
  ],
  projects: [
    {
      name: "replay-chromium",
      use: { ...replayDevices["Replay Chromium"] },
    },
  ],
};

关键配置详情：

  • replayReporter 负责在测试运行后上传录制内容
  • upload: true 会在测试结束时自动上传录制内容
  • replay-chromium 项目使用 Replay Browser 捕获录制内容
  • 你可以保留现有项目，并将它们与 replay-chromium 并列，以便常规运行测试
运行测试

使用 Replay Browser 运行 Playwright 测试：

npx playwright test --project replay-chromium

在 reporter 配置中设置 upload: true 后，录制内容会自动上传。

核心工作流

为现有 Playwright 项目设置 Replay：

  1. 安装插件：npm install --save-dev @replayio/playwright
  2. 安装浏览器：npx replayio install
  3. 使用 Replay reporter 和项目更新 playwright.config.ts
  4. 设置 REPLAY_API_KEY 环境变量
  5. 运行测试：npx playwright test --project replay-chromium

修改用户的 playwright.config.ts 时：

  • 保留现有项目和 reporters，并在其旁添加 Replay 项目和 reporter
  • 从 @replayio/playwright 导入 replayReporter 和 devices as replayDevices
  • 如果配置使用 defineConfig，将 Replay 项目添加到现有的 projects 数组
  • 如果配置中已有 reporters，将 replayReporter 追加到现有数组中
调试录制的应用程序

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

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

故障排除：未创建录制内容

如果 Replay 浏览器成功运行测试，但没有出现录制内容（replayio list 没有显示任何内容）， 录制驱动程序可能未能加载。

诊断

直接运行 Replay 浏览器并启用录制，然后检查 stderr：

RECORD_ALL_CONTENT=1 $(node -e "console.log(require('os').homedir() + '/.replay/runtimes/chrome-linux/chrome')") --headless https://google.com

如果录制驱动程序正确加载，你应该不会看到 DoLoadDriverHandle 错误。运行 replayio list 时应该能看到录制内容。

修复：缺少 libcrypto.so.1.1

如果你看到：

DoLoadDriverHandle: dlopen failed ... libcrypto.so.1.1: cannot open shared object file

Replay 录制驱动程序需要 OpenSSL 1.1，但系统中只有 OpenSSL 3。 下载 Ubuntu 18.04 的 libssl1.1 软件包并解压库文件：

curl -sL -o /tmp/libssl1.1.deb \
  http://archive.ubuntu.com/ubuntu/pool/main/o/openssl/libssl1.1_1.1.1-1ubuntu2.1~18.04.23_amd64.deb
dpkg-deb -x /tmp/libssl1.1.deb $HOME/.local/openssl11
rm /tmp/libssl1.1.deb

然后在启动浏览器前设置 LD_LIBRARY_PATH：

export LD_LIBRARY_PATH=$HOME/.local/openssl11/usr/lib/x86_64-linux-gnu

再次运行诊断命令以验证修复结果：DoLoadDriverHandle 错误应该已消失。

应在 Playwright 配置的 launchOptions.env 中设置此项，或通过 Dockerfile 全局设置。

评论

支持 Markdown