Visual Regression Tester
This tool automatically compares screenshots of UI changes, quickly identifying visual regressions and saving valuable testing time.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add visual-regression-tester npx -- -y @trustedskills/visual-regression-tester
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"visual-regression-tester": {
"command": "npx",
"args": [
"-y",
"@trustedskills/visual-regression-tester"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill enables AI agents to automatically compare screenshots of UI changes, identifying visual regressions and saving testing time. It supports integration with popular tools like Playwright, Chromatic, and Percy for capturing baseline screenshots, defining acceptable differences (thresholds), and integrating into continuous integration (CI) pipelines. The tool helps ensure that UI updates don't introduce unintended visual inconsistencies.
When to use it
- After making changes to a user interface to verify the changes are as expected.
- As part of an automated testing pipeline in CI/CD workflows.
- When needing to quickly identify and address unexpected visual differences across different browsers or devices.
- To establish baseline screenshots for consistent UI comparisons.
Key capabilities
- Supports Playwright, Chromatic, and Percy tools.
- Allows configuration of acceptable difference thresholds (maxDiffPixels, maxDiffPixelRatio, threshold).
- Enables integration with CI pipelines for automated testing.
- Provides options to capture full-page screenshots or specific UI elements.
- Includes features like disabling animations and waiting for load states to ensure consistent screenshots.
Example prompts
- "Run a visual regression test on the homepage using Playwright."
- "Update the baseline screenshot for the login page."
- "Compare the current state of the product details page with the last approved baseline."
Tips & gotchas
- Requires installation and configuration of a supported tool like Playwright. The source content provides example
playwright.config.tssettings. - Initial setup involves capturing baseline screenshots to serve as references for comparisons.
- Consider adjusting thresholds based on the specific UI and acceptable level of visual variation.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.