How does the skill match steps between different sessions?

The skill loads trajectory.ndjson files from two RVF containers and pairs them based on unique step-ids to ensure comparisons occur at the exact same point in the user flow.

What is the benefit of using DOM diff mode?

The DOM mode compares Playwright accessibility snapshots, which are more stable than raw HTML, allowing you to identify structural changes like missing labels or buttons without being distracted by minor CSS noise.

Can I adjust the sensitivity of the visual comparison?

Yes, you can use the --threshold argument (defaulting to 0.02) to set the tolerance for pixel-level differences before a step is flagged as diverged.

What metrics are provided in the pixel diff report?

The report includes Mean Squared Error (MSE), Peak Signal-to-Noise Ratio (PSNR), and the bounding box of the largest cluster of changed pixels.

Does this skill work with dynamic web content?

While highly sensitive, users can handle dynamic content like clocks or ads by adding ignore regions to the field map or pre-processing snapshots before the diffing process.

Browser Screenshot Diff - Claude Code Skill

The Browser Screenshot Diff skill provides a robust framework for automated visual and structural verification by comparing two recorded browser sessions step-by-step. By aligning trajectories through unique step IDs, the skill performs a dual-mode analysis: pixel-level diffing to calculate visual similarity (MSE/PSNR) and accessibility tree inspection to identify structural DOM changes. This allows developers and QA engineers to quickly pinpoint the exact moment a web flow diverged, making it an essential tool for visual regression testing, A/B variant comparison, and verifying the accuracy of autonomous agent replays within the Ruflo ecosystem.

主な機能

01Step-by-step trajectory alignment using matching step-ids across sessions

02Dual-mode analysis supporting both pixel-level and accessibility tree diffing

03Automated reporting of MSE, PSNR, and bounding boxes for visual changes

04Structural comparison of added, removed, or modified accessibility nodes

05Persistence of diff verdicts in findings.md for integrated replay verification

0659,162 GitHub stars

ユースケース

01Performing visual regression testing after UI or CSS framework updates

02Verifying that a browser-replay run accurately matches its parent session

03Comparing two versions of a multi-step form flow for A/B testing analysis

Tieline — product intent grounded in code

Browser Screenshot Diff

主な機能

ユースケース

1Password CLI

GateGuard Pre-Action Gate

Quarkus Verification

主な機能

ユースケース