Run any Skill in Manus with one click

browser-screenshot-diff

Visual + DOM diff between two recorded sessions at matching trajectory step ids; used for visual regression and replay verification

Run Skill in Manus

Stars58,746

Forks6,748

UpdatedMay 4, 2026 at 20:47

Source

ruvnet

ruvnet/ruflo

View GitHub Repository View Creator Repositories

Install command

Download

Run Skill in Manus

Useful forSOC

Software Quality Assurance Analysts and TestersComputer and Mathematical Occupations15-1253L4

SKILL.md

readonly

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-replay run 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 a step-id → (screenshot_path, snapshot_path) map for each.
Pair steps by step-id. Steps that exist on only one side are flagged as unmatched and contribute to the divergence score.
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).
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.md under a fresh RVF container so the diff itself is replayable.
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_diff MCP tool is not planned (ADR-0001 §7); the skill operates against locally-saved RVF artifacts and uses browser_eval only for live verification.

More from this repository

same repository

nested-subagents

ruvnet/ruflo

Spawn nested sub-agents (agents that spawn sub-agents, up to depth=5) via Claude Code's native Task tool — for context-managed deep delegation

2026-06-0958.7k

workflow-create

ruvnet/ruflo

Author a workflow — either an MCP workflow template (persisted, lifecycle) or a native .claude/workflows/*.js orchestration script (agent/parallel/pipeline fan-out)

2026-05-2958.7k

workflow-run

ruvnet/ruflo

Run a workflow — drive an MCP workflow lifecycle (execute/pause/resume/cancel) or invoke + resume a native .claude/workflows/*.js orchestration via the Workflow tool

2026-05-2958.7k

gaia-architecture-comparison

ruvnet/ruflo

Side-by-side comparison of ruflo vs HAL vs other GAIA harnesses — capability gaps, design decisions, and improvement roadmap

2026-05-2858.7k

gaia-debugging

ruvnet/ruflo

Diagnose why a GAIA question failed — extract trace, classify failure mode, and propose a fix

2026-05-2858.7k

gaia-submission

ruvnet/ruflo

Walk through a complete GAIA benchmark→submit flow — from key resolution through HAL-compatible package generation

2026-05-2858.7k

Browser Screenshot Diff

When to use

Visual regression after a UI change (record before, record after, diff).

Verifying a browser-replay run 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 a step-id → (screenshot_path, snapshot_path) map for each.

Pair steps by step-id. Steps that exist on only one side are flagged as unmatched and contribute to the divergence score.

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).

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.md under a fresh RVF container so the diff itself is replayable.

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_diff MCP tool is not planned (ADR-0001 §7); the skill operates against locally-saved RVF artifacts and uses browser_eval only for live verification.