Browser Screenshot Diff
FreeVisual regression and DOM comparison for recorded browser sessions.
Free · Opens the source repo
What Browser Screenshot Diff does
Browser Screenshot Diff is a specialized tool designed for developers and QA engineers who need to verify visual consistency between different recorded sessions of web applications. By comparing two sessions step-by-step, it enables users to identify discrepancies in both visual output and accessibility features. This skill is particularly useful for visual regression testing after UI changes, ensuring that updates do not introduce unintended visual artifacts or accessibility issues.
The tool operates by pairing each step in session A with the corresponding step in session B based on matching step-ids. It captures screenshots and accessibility snapshots for each step, allowing for a detailed comparison. Users can choose to perform pixel diffs or DOM diffs, which provide insights into visual differences and changes in the document object model, respectively. The results include an aggregate similarity score, highlighting the first divergence found, which helps prioritize issues that need attention.
Browser Screenshot Diff is ideal for teams working on iterative UI development, A/B testing, or any scenario where visual fidelity is crucial. By leveraging this skill, teams can automate the process of regression testing and ensure that any changes made during development do not negatively impact the user experience. The findings are stored in a new findings.md file within a fresh RVF container, making it easy to track changes over time and revisit previous tests.
However, users should be aware of certain limitations. The pixel diff feature can be sensitive to minor changes in rendering, such as font hinting and scrollbar positions, which may lead to false positives. Additionally, this skill does not handle dynamic content well, so users should preprocess snapshots or define ignore regions for elements that change frequently. Overall, Browser Screenshot Diff is a robust tool for maintaining visual integrity in web applications, provided that its limitations are understood and managed effectively.
When to use it
Use this tool after making UI changes to ensure visual consistency or when verifying that a browser replay matches the original session.
When not to use it
Avoid using this skill for dynamic content or when pixel-perfect accuracy is not critical, as it may produce false positives due to rendering differences.
What you can build with it
Post-Deployment Verification
After deploying a new UI version, use this tool to ensure that no visual regressions occurred during the update.
A/B Testing Validation
Compare two variants of a web page to verify that they maintain visual consistency throughout the user flow.
Accessibility Compliance Checks
Use the DOM diff feature to identify changes in accessibility features between two recorded sessions.
How to install Browser Screenshot Diff
View source1. Install with the skills CLI
npx skills add ruvnet/ruflo/browser-screenshot-diff --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by ruvnetBrowser 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.
Frequently asked questions about Browser Screenshot Diff
Similar skills
Playwright Component Testing
Test React and Vue components in isolation with Playwright.
Fluent UI Blazor
Integrate Fluent UI components in Blazor applications effortlessly.
Build MCP App
Create interactive UI widgets for MCP servers.
Web Design Reviewer
Identify and fix design issues in websites efficiently.
Markstream Install
Seamlessly integrate Markstream for Markdown rendering.
GSAP & Framer Scroll Animation
Create advanced scroll animations effortlessly.