Browser Screenshot Diff
按步骤逐一对比两次录制的会话。将会话 A 中的每一步与会话 B 中相同的 step-id 配对,对比捕获的截图与无障碍快照,报告首次出现分歧的位置以及整体相似度评分。
适用场景
UI 变更后的视觉回归(变更前录制、变更后录制、再对比)。
验证一次浏览器回放运行是否在容差内匹配父会话。
比较同一表单流程的两个 A/B 变体。
步骤
定位两个 RVF 容器:
npx -y ruvector@0.2.25 rvf status <session-id-a>.rvf npx -y ruvector@0.2.25 rvf status <session-id-b>.rvf
从 trajectory.ndjson 加载两条轨迹。为每个会话构建 step-id → (screenshot_path, snapshot_path) 映射。
按 step-id 配对步骤。仅存在于一侧的步骤会被标记为未匹配,并计入分歧评分。
像素差异(--mode pixel|both):在每个步骤对比两张 PNG。报告 mse、psnr 以及最大差异簇的边界框。阈值默认 0.02(2% 的像素)。
DOM 差异(--mode dom|both):逐节点对比无障碍快照。报告新增 / 删除 / 变更的节点及其无障碍名称。
聚合相似度:对匹配步骤取加权平均,权重为步骤时长。判定结果写入一个新的 RVF 容器下的 findings.md,使该差异本身可被回放。
将差异判定持久化到 browser-sessions 中两个源 id 的标签下,以便未来搜索能浮现“对会话 X 运行过一次差异对比”。
注意事项
像素差异对字体微调、抗锯齿和滚动条位置敏感。请让两个会话的视口保持一致。
基于 Playwright 无障碍树的 DOM 差异比 HTML 差异更稳定。优先使用它。
本技能不处理动态内容(时钟、广告);请在字段映射中添加忽略区域,或在对比前预处理快照。
browser_screenshot_diff MCP 工具暂无计划(ADR-0001 §7);本技能针对本地保存的 RVF 产物运行,仅在实时验证时使用 browser_eval。