visual-regression

What This Skill Does

The visual-regression skill empowers the OpenClaw AI agent to act as a quality assurance specialist for web interfaces. It leverages the robust capabilities of Playwright to perform automated pixel-perfect comparisons between current application states and predefined visual baselines. By identifying layout shifts, broken CSS, and component regressions, this skill ensures that your UI remains consistent across various viewports and browsers, catching subtle bugs that traditional functional testing frameworks often ignore.

Installation

To integrate this skill into your environment, run the following command in your terminal within your OpenClaw workspace:

clawhub install openclaw/skills/skills/anton-abyzov/sw-visual-regression

Use Cases

• Continuous Integration Pipelines: Automatically fail deployment builds when CSS changes negatively impact core page layouts.
• Component Library Maintenance: Ensure that atomic components look identical across different projects that consume your shared UI library.
• Responsive Design Audit: Verify that your mobile, tablet, and desktop breakpoints render correctly by generating automated screenshot matrices.
• Design System Drift Detection: Track unintended design changes as global styles evolve over long development cycles.

Example Prompts

1. "Check the checkout flow for any visual regressions after the latest global CSS update and update the baseline if necessary."
2. "I need to add a visual regression test for the user dashboard, but please make sure to mask the dynamic timestamp and the live user profile picture to avoid false positives."
3. "Set up a cross-browser visual snapshot test for the landing page across mobile, tablet, and desktop viewports using Playwright."

Tips & Limitations

To maximize the effectiveness of this skill, consider the following best practices:

• Deterministic Content: Always mock dynamic API responses or use static data in your test environment to prevent screenshots from failing due to changing text or data.
• Masking: Use the mask configuration option for elements that inherently change, such as dates, usernames, or random ad banners, to reduce maintenance overhead.
• Threshold Tuning: Don't hesitate to adjust the maxDiffPixels or maxDiffPixelRatio thresholds. Some minor anti-aliasing issues are expected in cross-browser rendering, and setting a 1% threshold is often sufficient to avoid flaky tests without sacrificing reliability.
• Environment Stability: Ensure tests run in a consistent environment, preferably in Docker, to avoid differences in font rendering and sub-pixel rounding that vary between macOS, Linux, and Windows machines.