skills.rest
ruvnet
ruvnetCOMMUNITY
Explore all skills by this author →
Website𝕏@ruvGitHub

browser-screenshot-diff

Compares screenshots and accessibility snapshots between two recorded browser sessions to detect visual and DOM divergence.

70.1k|8.4k|Updated Jun 2, 2025
Search Tags:#visual regression#Browser Testing#session replay#screenshot diff#accessibility snapshot#dom diff#pixel comparison
One-click install
npx skills add https://github.com/ruvnet/claude-flow --skill browser-screenshot-diff
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-screenshot-diff
Source: https://github.com/ruvnet/claude-flow/tree/main/plugins/ruflo-browser/skills/browser-screenshot-diff
Command: npx skills add https://github.com/ruvnet/claude-flow --skill browser-screenshot-diff

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ruvector.

What problem does it solve?

Verifying that a UI change or a replayed browser session matches a previously recorded baseline requires manually comparing screenshots and page structure step by step, which is slow and error-prone. This Skill automates pairwise comparison of two recorded sessions, pinpointing the first divergence and producing an aggregate similarity score.

Core Features & Use Cases

  • Step-paired comparison: Matches steps across two sessions by step-id, flagging unmatched steps and diffing both screenshots and accessibility snapshots.
  • Pixel and DOM diff modes: Reports MSE, PSNR, and diff bounding boxes for pixel mode, plus added/removed/changed nodes for DOM mode, with a configurable threshold.
  • Replayable verdicts: Writes the diff verdict into a findings.md inside a new RVF container and tags both source sessions for future searchability.
  • Use Case: After a UI change, record the same flow again and diff the new session against the baseline to catch visual regressions before release.

Quick Start

Ask the AI to diff recorded session A against session B with a 2 percent pixel threshold and report the first divergent step.

Frequently Asked Questions about browser-screenshot-diff

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I compare two recorded browser sessions for visual regression?▼

Record the same flow before and after the UI change, then run the diff with both session ids. The skill pairs steps by step-id, diffs screenshots and accessibility snapshots, and reports the first divergence plus an aggregate similarity score.

What is the difference between pixel diff and DOM diff modes?▼

Pixel diff compares PNG screenshots and reports MSE, PSNR, and the largest diff bounding box. DOM diff compares Playwright accessibility snapshots node-by-node, reporting added, removed, and changed nodes, and is generally more stable than HTML comparison.

How do I set the similarity threshold for screenshot comparison?▼

Pass the --threshold flag with a value between 0 and 1; the default is 0.02, meaning 2 percent of pixels may differ before a step is flagged. Use --mode pixel, dom, or both to control which comparisons run.

Why does pixel diff report false differences between identical pages?▼

Pixel diff is sensitive to font hinting, antialiasing, and scrollbar position, so keep the viewport pinned across both sessions. Dynamic content like clocks or ads also causes noise; add ignore regions or pre-process snapshots before diffing.

Can this diff live browser pages instead of recorded sessions?▼

No, the skill operates against locally saved RVF artifacts from recorded sessions and uses browser_eval only for live verification. There is no dedicated MCP tool for screenshot diffing; both inputs must be recorded sessions.

Related Skills

Explore More Software Engineering Skills→
arthtyagiarthtyagi
1

agent-browser

Automate browser interactions and capture web content across isolated sessions.

Community
Advanced
FlintmereFlintmere

fix-bug

Reproduce reported defects in Flintmere's codebase and validate fixes with regression tests.

Official
Advanced
FilenCloudDiensteFilenCloudDienste
34

argent-create-flow

Record and replay MCP tool call sequences as YAML flow files.

Official
Intermediate
RonanCodesRonanCodes

visual-diff

Compares two images for visual differences using ImageMagick or pixelmatch.

Community
Intermediate