gabrielmoreira Browser Screenshot Diff
Compare two recorded sessions step-by-step. Pairs each step in session A to the same step-id in session B, diffs the captured screenshot and accessibility snapshot, reports the first divergence and an aggregate similarity score.
When to use
- Visual regression after a UI change (record before, record after, diff).
- Verifying a
browser-replayrun matches the parent session within tolerance. - Comparing two A/B variants of the same form flow.
Steps
- Locate both RVF containers:
npx -y ruvector@0.2.25 rvf status <session-id-a>.rvf npx -y ruvector@0.2.25 rvf status <session-id-b>.rvf - Load both trajectories from
trajectory.ndjson. Build astep-id → (screenshot_path, snapshot_path)map for each. - Pair steps by
step-id. Steps that exist on only one side are flagged asunmatchedand contribute to the divergence score. - Pixel diff (
--mode pixel|both): compare the two PNGs at each step. Reportmse,psnr, and the bounding box of the largest diff cluster. Threshold default0.02(2% of pixels). - DOM diff (
--mode dom|both): compare the accessibility snapshots node-by-node. Report added / removed / changed nodes with their accessible names. - Aggregate similarity: weighted average across matched steps, weighted by step duration. Verdict goes into a new
findings.mdunder a fresh RVF container so the diff itself is replayable. - Persist the diff verdict in
browser-sessionsunder both source ids' tags so future searches surface "ran a diff against session X".
Caveats
- Pixel diff is sensitive to font hinting, antialiasing, and scrollbar position. Keep viewport pinned across both sessions.
- DOM diff over Playwright's accessibility tree is more stable than HTML diff. Prefer it.
- This skill does not handle dynamic content (clocks, ads); add ignore regions to the field map or pre-process snapshots before diffing.
- The
browser_screenshot_diffMCP tool is not planned (ADR-0001 §7); the skill operates against locally-saved RVF artifacts and usesbrowser_evalonly for live verification.