browser-screenshot-diff
Visual + DOM diff between two recorded sessions at matching trajectory step ids; used for visual regression and replay verification
Best for visual regression testingWorks with GitHubLow risk
⌘source
- author
@ruvnet- repo
- ruvnet/ruflo
- language
- TypeScript
★46kstars
5.1kforks
May 5, 2026
✦overview.md
Key Features
- ·Step-by-step screenshot comparison
- ·DOM diff via accessibility snapshot
- ·Aggregate similarity score
- ·Threshold-based pixel diff
- ·Unmatched step detection
Use Cases
- →Compare recorded sessions before and after UI changes
- →Verify browser-replay output matches parent session
- →Diff two A/B variants of the same user flow
Best for
- ✓visual regression testing
- ✓replay verification
- ✓UI change validation
Not ideal for
- !live website comparison
- !non-step-based recordings
FAQs
name
browser-screenshot-diff
description
Visual + DOM diff between two recorded sessions at matching trajectory step ids; used for visual regression and replay verification
argument-hint:<session-id-a> <session-id-b> [--threshold <0..1>] [--mode pixel|dom|both]
allowed-tools:mcp__claude-flow__browser_eval Bash Read Write
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).
$install
1-click copynpx skills add ruvnet/ruflo --skill browser-screenshot-diffSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
4/ 5
very goodClear and well structured, with only minor parts that might need a second read.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
4/ 5
highMostly actionable with clear steps; only a few small gaps remain.