Browser Screenshot Diff
- 606 installs
- 67k repo stars
- Updated August 4, 2026
- ruvnet/ruflo
browser-screenshot-diff is an agent skill that compares visual and DOM snapshots between two recorded browser sessions at matching step IDs for developers running visual regression and replay verification tests.
About
browser-screenshot-diff is a ruflo agent skill that pairs each step in session A to the same step-id in session B, then diffs captured screenshots and accessibility snapshots to find the first divergence and compute an aggregate similarity score. Invocation accepts session-id-a, session-id-b, an optional --threshold between 0 and 1, and --mode pixel, dom, or both for combined comparison. Allowed tools include mcp__claude-flow__browser_eval plus Bash, Read, and Write for report output. Developers reach for browser-screenshot-diff after recording a before-and-after browser session when validating UI refactors, replay correctness, or accessibility tree changes. The skill reports the first mismatched trajectory step and an overall similarity metric rather than replacing full end-to-end test suites.
- browser-screenshot-diff
Browser Screenshot Diff by the numbers
- 606 all-time installs (skills.sh)
- +6 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Ranked #647 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/ruvnet/ruflo --skill browser-screenshot-diffAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 606 |
|---|---|
| repo stars | ★ 67k |
| Last updated | August 4, 2026 |
| Repository | ruvnet/ruflo ↗ |
How do you diff browser screenshots between two sessions?
Use browser-screenshot-diff for development tasks
Who is it for?
Developers with paired before-and-after browser session recordings who need step-aligned visual regression or replay verification beyond single-page screenshot checks.
Skip if: Teams without recorded browser sessions or projects needing full Playwright/Cypress E2E test authoring—browser-screenshot-diff only compares existing session recordings.
When should I use this skill?
The user provides two browser session IDs and wants visual regression comparison, replay verification, or DOM snapshot diffing after a UI change.
What you get
Diff report with first diverging step-id, per-step screenshot and accessibility snapshot comparison, and aggregate similarity score at the chosen threshold.
- First divergence step report
- Per-step screenshot and DOM diff results
- Aggregate session similarity score
By the numbers
- Supports 3 comparison modes: pixel, dom, and both
- Accepts similarity threshold values from 0 to 1
- Pairs and diffs every matching step-id across two recorded sessions
Files
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
1. 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>.rvf2. Load both trajectories from trajectory.ndjson. Build a step-id → (screenshot_path, snapshot_path) map for each. 3. Pair steps by step-id. Steps that exist on only one side are flagged as unmatched and contribute to the divergence score. 4. Pixel diff (--mode pixel|both): compare the two PNGs at each step. Report mse, psnr, and the bounding box of the largest diff cluster. Threshold default 0.02 (2% of pixels). 5. DOM diff (--mode dom|both): compare the accessibility snapshots node-by-node. Report added / removed / changed nodes with their accessible names. 6. Aggregate similarity: weighted average across matched steps, weighted by step duration. Verdict goes into a new findings.md under a fresh RVF container so the diff itself is replayable. 7. Persist the diff verdict in browser-sessions under 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.
Related skills
Lark Openapi ExplorerInstantly explore, test, and generate calls against the full Lark (Feishu) OpenAPI surface without leaving their agent workflow.493k
Lark EventConsume real-time events from Lark/Feishu as structured NDJSON streams inside AI agent workflows.387k16kLark Openapi ExplorerWhen an existing Lark/Feishu skill or CLI command cannot fulfill a specific requirement and they need to discover and invoke the exact native OpenAPI endpoint.386k16k
Just ScrapeQuickly search, crawl, extract structured JSON, or monitor web pages without writing custom scraping code.245k41Lark AppsQuery the current visibility and permission scope of a Lark (Feishu) app without writing HTTP client code.235k16k
Design An InterfaceGenerate multiple radically different interface or API designs in parallel before committing to one.188k198kHow it compares
Use browser-screenshot-diff for step-aligned session replay comparison; use standard Playwright visual snapshots when you need inline test-suite assertions instead of recorded trajectory diffs.
FAQ
What inputs does browser-screenshot-diff require?
browser-screenshot-diff takes two recorded session IDs as arguments: session-id-a and session-id-b. Optional flags include --threshold from 0 to 1 and --mode pixel, dom, or both for combined screenshot and accessibility snapshot comparison.
What does browser-screenshot-diff output?
browser-screenshot-diff pairs steps by shared step-id, diffs screenshots and accessibility snapshots at each step, reports the first divergence point, and returns an aggregate similarity score across the full recorded trajectory.
When should browser-screenshot-diff be used?
browser-screenshot-diff fits visual regression after UI changes: record a session before the change, record again after, then diff to verify replay correctness and catch unintended DOM or pixel differences early.