mcpField
B
browser-screenshot-diff

browser-screenshot-diff

github.com/ruvnet测试与质量80.0k696 次安装今天更新
代码仓库

关于 browser-screenshot-diff

browser-screenshot-diff 是用于逐步比较两个已记录浏览会话的技能，面向 UI 回归测试和流程验证。它按 step-id 对齐截图与无障碍快照，并将差异结论保存为可回放记录。

主要功能

  1. 01按 step-id 配对步骤
  2. 02比较截图像素差异
  3. 03比较无障碍快照节点
  4. 04报告差异位置与相似度
  5. 05保存可回放的差异结论

适用场景

  1. 01检查 UI 改动后的视觉回归
  2. 02验证 browser-replay 与原会话的一致性
  3. 03比较同一表单流程的 A/B 变体

MCP 相关

该技能处理本地保存的 RVF 文件，不提供 browser_screenshot_diff MCP 工具；仅在需要实时验证时使用 browser_eval。

安装

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

$npx skills add https://github.com/ruvnet/ruflo --skill browser-screenshot-diff

安装后在 Claude Code 中输入/browser-screenshot-diff确认已加载。

详细介绍

浏览器截图差异

逐步比较两个录制的会话。将会话 A 中的每个步骤与会话 B 中具有相同 step-id 的步骤配对，对比捕获的截图和无障碍快照，报告首次出现差异的位置以及总体相似度评分。

使用场景

  • UI 更改后的视觉回归（更改前录制、更改后录制，再进行差异对比）。
  • 验证 browser-replay 运行结果与父会话的匹配程度是否在容差范围内。
  • 比较同一表单流程的两个 A/B 变体。

步骤

  1. 定位两个 RVF 容器： 
    npx -y [email protected] rvf status <session-id-a>.rvf
npx -y [email protected] rvf status <session-id-b>.rvf
  2. 加载两个轨迹中的 trajectory.ndjson。为每个轨迹构建 step-id → (screenshot_path, snapshot_path) 映射。
  3. 按 step-id 配对步骤。仅存在于一侧的步骤会标记为 unmatched，并计入差异评分。
  4. 像素差异（--mode pixel|both）：对比每个步骤中的两张 PNG。报告 mse、psnr，以及最大差异簇的边界框。默认阈值为 0.02（像素占比 2%）。
  5. DOM 差异（--mode dom|both）：逐节点对比无障碍快照。报告新增、移除或更改的节点及其无障碍名称。
  6. 总体相似度：对匹配步骤进行加权平均，权重按步骤时长计算。判定结果写入新建 RVF 容器中的 findings.md，以便重放差异对比本身。
  7. 持久化：在 browser-sessions 中，将差异判定结果写入两个源 ID 的标签下，以便后续搜索能显示“曾与会话 X 进行差异对比”。

注意事项

  • 像素差异容易受字体微调、抗锯齿和滚动条位置影响。两个会话的视口应保持固定。
  • 与 HTML 差异相比，基于 Playwright 无障碍树的 DOM 差异更加稳定，建议优先使用。
  • 此技能无法处理动态内容（时钟、广告）；请向字段映射添加忽略区域，或在差异对比前预处理快照。
  • 不计划开发 browser_screenshot_diff MCP 工具（ADR-0001 §7）；此技能直接处理本地保存的 RVF 工件，仅使用 browser_eval 进行实时验证。

评论

支持 Markdown