browser-screenshot-diff

Étoiles66 991

Forks7 995

Mis à jour17 juillet 2026 à 03:06

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

Installation

Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.

Source

ruvnet

ruvnet/ruflo

Ouvrir le dépôt GitHub Voir les dépôts du créateur

Téléchargement

Métiers associésSOC

Basé sur la classification professionnelle SOC

Analystes en assurance qualité des logiciels et testeursProfessions informatiques et mathématiques·SOC 15-1253

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__plugin_ruflo-core_ruflo__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.

Plus depuis ce dépôt

même dépôt

ruflo

ruvnet/ruflo

Ruflo is a multi-agent orchestration platform for AI coding agents (Claude Code, Cursor, Codex, Copilot, Gemini, Amp, +12 more). Use this skill when the user wants to (1) install/init ruflo in a project, (2) run multi-agent swarms with hierarchical coordination, (3) use ruflo's 314+ MCP tools for memory, routing, hooks, sub-agents, or workflows, (4) check ruflo status/version/doctor health, or (5) discover which of ruflo's 30+ plugins fits their task.

2026-08-0467.0k

agntcy-status

ruvnet/ruflo

Show AGNTCY/SLIM/CASA integration status — whether upstream AGNTCY packages are installed, which transport (local vs SLIM) is active, and whether CASA enforcement is enabled. Use when the user asks "is AGNTCY configured?", "show SLIM/CASA status", or "is AGNTCY/IOC integration active?".

2026-07-3167.0k

adr-create

ruvnet/ruflo

Create a new Architecture Decision Record with sequential numbering and AgentDB registration

2026-07-2967.0k

adr-index

ruvnet/ruflo

Build or rebuild the ADR index + dependency graph by running scripts/import.mjs (handles v3-style and plugin-style ADR formats; one Bash call vs hundreds of MCP round-trips)

2026-07-2967.0k

harness-genome

ruvnet/ruflo

7-section repo readiness report from `metaharness genome <path>`. Returns repo_type / agent_topology / risk_score / mcp_surface / test_confidence / publish_readiness. Pure-read; degrades gracefully (ADR-150).

2026-07-2967.0k

ruflo-status

ruvnet/ruflo

Diagnose Ruflo health, then report system, MCP server, and active-agent status without changing the installation

2026-07-2967.0k

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.