Can I use this for cross-browser testing?

Yes, it can capture and compare screenshots across different browser engines to ensure your UI looks consistent everywhere.

Does it work with CI/CD workflows?

Absolutely; it is specifically designed to be integrated into automation pipelines to catch visual regressions before code is merged.

How does it detect UI changes?

It captures current screenshots of your application and compares them pixel-by-pixel against established baseline images to highlight differences.

Which tools does this visual regression skill support?

The skill is designed to work with popular visual testing platforms including Percy, Chromatic, and BackstopJS.

How do I trigger a visual test in Claude?

You can trigger it using natural language phrases like 'visual test', 'check visual changes', or the '/visual-test' command.

Visual Regression Tester

Name: Visual Regression Tester
Author: jeremylongshore

byjeremylongshore

•

883

安全与测试

Automates the detection of unintended UI changes by performing visual regression tests across various browsers and environments.

关于

The Visual Regression Tester skill empowers Claude to maintain UI integrity by integrating with industry-standard tools like Percy, Chromatic, and BackstopJS. It automates the process of capturing screenshots, comparing them against established baselines, and identifying visual discrepancies introduced by code changes. This skill is essential for developers and QA engineers who need to ensure visual consistency across different browsers and viewports, providing an automated layer of UI verification within the development workflow or CI/CD pipeline.

主要功能

Detailed visual diff analysis to identify pixel-level changes
Cross-browser and cross-device visual consistency verification
Baseline comparison using tools like Percy, Chromatic, and BackstopJS
883 GitHub stars
Automated screenshot capture for specific components or full pages
Seamless integration with CI/CD pipelines for automated regression testing

使用场景

Verifying UI consistency after implementing new features or design updates
Comparing rendering across different browsers to catch layout bugs
Automating visual checks in a CI workflow to prevent UI regressions

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jeremylongshore/claude-code-plugins-plus-skills visual-regression-tester

For use in Claude.ai and ChatGPT

Download Skill

GitHub

关于