How should I handle dynamic content like ads or timestamps?

Since dynamic content causes false positives in pixel diffs, it is recommended to use browser_evaluate to hide or freeze dynamic elements before taking screenshots.

Does it detect changes that aren't visible to the eye?

Yes, by comparing the accessibility tree snapshots, it identifies structural changes in the DOM, such as altered ARIA labels or role changes, even if the visual appearance remains identical.

What system dependencies are required for this skill?

This skill requires the Playwright MCP server and ImageMagick tools (compare, convert, composite, and montage) to be installed and available in your system's PATH.

Can I use this to test mobile responsiveness?

Yes, you can use the browser_resize command between captures to compare how a single URL renders across different viewport dimensions.

How do I interpret the 'AE' metric in the reports?

The Absolute Error (AE) metric represents the number of pixels that differ. Typically, counts under 100 are negligible noise, while counts over 10,000 indicate significant visual changes.

Visual & Structural A/B Compare

Name: Visual & Structural A/B Compare
Author: anouar1991

byanouar1991

•

安全与测试

Performs automated visual and structural comparisons between web pages using pixel diffing and accessibility tree analysis.

The ab-visual-compare skill provides a comprehensive toolkit for identifying regressions and design inconsistencies by comparing two web pages—or the same page at different viewports—using high-precision visual and structural audits. By integrating Playwright browser automation with ImageMagick's pixel-by-pixel diffing capabilities, the skill generates side-by-side comparisons, highlighted difference maps, and transparency overlays to pinpoint UI shifts. Beyond visuals, it captures and compares accessibility tree snapshots to ensure that underlying DOM changes don't compromise the user experience or accessibility standards during deployments or refactors.

主要功能

01Generation of highlight, blend, and side-by-side comparison artifacts

02Accessibility tree snapshot comparison to detect structural DOM regressions

03Automated pixel-level visual diffing using ImageMagick comparison algorithms

04Multi-viewport support for verifying responsive design across device sizes

05Quantitative reporting with pixel error counts for severity assessment

061 GitHub stars

使用场景

01Verifying staging deployments against production to prevent visual regressions

02Auditing structural accessibility changes during complex frontend refactoring

03Testing responsive layouts by comparing the same URL at desktop and mobile widths

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anouar1991/binarypetsclaude ab-visual-compare

For use in Claude.ai and ChatGPT

Download Skill