Initial commit
This commit is contained in:
Zhongwei Li
54
skills/visual-regression-tester/SKILL.md
Normal file
54
skills/visual-regression-tester/SKILL.md
Normal file
@@ -0,0 +1,54 @@
|
||||
---
|
||||
name: performing-visual-regression-testing
|
||||
description: |
|
||||
This skill enables Claude to execute visual regression tests using tools like Percy, Chromatic, and BackstopJS. It captures screenshots, compares them against baselines, and analyzes visual differences to identify unintended UI changes. Use this skill when the user requests visual testing, UI change verification, or regression testing for a web application or component. Trigger phrases include "visual test," "UI regression," "check visual changes," or "/visual-test".
|
||||
allowed-tools: Read, Bash, Grep, Glob
|
||||
version: 1.0.0
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
This skill empowers Claude to automatically detect unintended UI changes by performing visual regression tests. It integrates with popular visual testing tools to streamline the process of capturing screenshots, comparing them against baselines, and identifying visual differences.
|
||||
|
||||
## How It Works
|
||||
|
||||
1. **Capture Screenshots**: Captures screenshots of specified components or pages using the configured visual testing tool.
|
||||
2. **Compare Against Baselines**: Compares the captured screenshots against established baseline images.
|
||||
3. **Analyze Visual Diffs**: Identifies and analyzes visual differences between the current screenshots and the baselines.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
This skill activates when you need to:
|
||||
- Detect unintended UI changes introduced by recent code modifications.
|
||||
- Verify the visual consistency of a web application across different browsers or environments.
|
||||
- Automate visual regression testing as part of a CI/CD pipeline.
|
||||
|
||||
## Examples
|
||||
|
||||
### Example 1: Verifying UI Changes After a Feature Update
|
||||
|
||||
User request: "Run a visual test on the homepage to check for any UI regressions after the latest feature update."
|
||||
|
||||
The skill will:
|
||||
1. Capture a screenshot of the homepage.
|
||||
2. Compare the screenshot against the baseline image of the homepage.
|
||||
3. Report any visual differences detected, highlighting potential UI regressions.
|
||||
|
||||
### Example 2: Checking Visual Consistency Across Browsers
|
||||
|
||||
User request: "Perform a visual regression test on the product details page to ensure it renders correctly in Chrome and Firefox."
|
||||
|
||||
The skill will:
|
||||
1. Capture screenshots of the product details page in both Chrome and Firefox.
|
||||
2. Compare the screenshots against the respective baseline images for each browser.
|
||||
3. Identify and report any visual inconsistencies detected between the browsers.
|
||||
|
||||
## Best Practices
|
||||
|
||||
- **Configuration**: Ensure the visual testing tool is properly configured with the correct API keys and project settings.
|
||||
- **Baselines**: Maintain accurate and up-to-date baseline images to avoid false positives.
|
||||
- **Viewport Sizes**: Define appropriate viewport sizes to cover different screen resolutions and devices.
|
||||
|
||||
## Integration
|
||||
|
||||
This skill can be integrated with other Claude Code plugins to automate end-to-end testing workflows. For example, it can be combined with a testing plugin to run visual tests after functional tests have passed.
|
||||
8
skills/visual-regression-tester/assets/README.md
Normal file
8
skills/visual-regression-tester/assets/README.md
Normal file
@@ -0,0 +1,8 @@
|
||||
# Assets
|
||||
|
||||
Bundled resources for visual-regression-tester skill
|
||||
|
||||
- [ ] example_percy_config.yml: Example Percy configuration file.
|
||||
- [ ] example_chromatic_config.yml: Example Chromatic configuration file.
|
||||
- [ ] example_backstop_config.js: Example BackstopJS configuration file.
|
||||
- [ ] html_report_template.html: HTML template for generating visual regression test reports.
|
||||
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* BackstopJS Configuration File
|
||||
*
|
||||
* This is an example configuration file for BackstopJS. Customize it to fit your project's needs.
|
||||
*
|
||||
* For detailed documentation, visit: https://github.com/garris/BackstopJS
|
||||
*/
|
||||
|
||||
module.exports = {
|
||||
id: 'my-project', // A unique ID for your project, used for report naming. Change this!
|
||||
|
||||
viewports: [
|
||||
{
|
||||
label: 'desktop',
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
},
|
||||
{
|
||||
label: 'mobile',
|
||||
width: 320,
|
||||
height: 480,
|
||||
},
|
||||
],
|
||||
|
||||
onBeforeScript: 'puppet/onBefore.js',
|
||||
onReadyScript: 'puppet/onReady.js',
|
||||
|
||||
scenarios: [
|
||||
{
|
||||
label: 'Example Homepage', // A descriptive label for this scenario
|
||||
url: 'https://example.com', // The URL to test
|
||||
referenceUrl: '', // Optional: URL for the baseline/reference screenshots. Leave empty for first run.
|
||||
readyEvent: '', // Optional: Wait for a specific event to fire before taking the screenshot.
|
||||
readySelector: '', // Optional: Wait for a specific selector to be present before taking the screenshot.
|
||||
delay: 0, // Optional: Wait for a specified number of milliseconds before taking the screenshot. Useful for animations.
|
||||
hideSelectors: [], // Optional: Hide elements before taking the screenshot. Useful for dynamic content.
|
||||
removeSelectors: [], // Optional: Remove elements before taking the screenshot. Useful for dynamic content.
|
||||
selectorExpansion: true, // Optional: Expand selectors to include all matching elements.
|
||||
selectors: [
|
||||
'document', // Take a screenshot of the entire document
|
||||
],
|
||||
misMatchThreshold: 0.1, // Percentage of acceptable pixel difference between the baseline and the test screenshot.
|
||||
requireSameDimensions: true, // Ensure that the baseline and test screenshots have the same dimensions.
|
||||
},
|
||||
// Add more scenarios here to test different pages and components.
|
||||
// Example:
|
||||
// {
|
||||
// label: 'Example Contact Page',
|
||||
// url: 'https://example.com/contact',
|
||||
// selectors: [
|
||||
// '.contact-form',
|
||||
// ],
|
||||
// },
|
||||
],
|
||||
|
||||
paths: {
|
||||
bitmaps_reference: 'backstop_data/bitmaps_reference',
|
||||
bitmaps_test: 'backstop_data/bitmaps_test',
|
||||
html_report: 'backstop_data/html_report',
|
||||
ci_report: 'backstop_data/ci_report',
|
||||
},
|
||||
|
||||
report: ['browser'], // Generate a browser-based HTML report.
|
||||
engine: 'puppeteer', // Use Puppeteer as the browser automation engine.
|
||||
engineOptions: {
|
||||
args: ['--no-sandbox'], // Required for running Puppeteer in some environments (e.g., Docker).
|
||||
},
|
||||
asyncCaptureLimit: 5, // Limit the number of concurrent screenshots to avoid overloading the system.
|
||||
asyncCompareLimit: 50, // Limit the number of concurrent comparisons to avoid overloading the system.
|
||||
debug: false, // Enable debug mode for more verbose logging.
|
||||
debugWindow: false, // Open the browser window in debug mode.
|
||||
};
|
||||
@@ -0,0 +1,55 @@
|
||||
# Configuration for Chromatic visual regression testing
|
||||
# https://www.chromatic.com/
|
||||
|
||||
# Project token - REPLACE_ME with your actual Chromatic project token.
|
||||
# This token is used to authenticate with Chromatic and identify your project.
|
||||
projectToken: REPLACE_ME
|
||||
|
||||
# Branch name - Optional, defaults to the current git branch.
|
||||
# You can specify a branch name manually if needed.
|
||||
branchName: main
|
||||
|
||||
# Commit SHA - Optional, defaults to the current git commit SHA.
|
||||
# Used to link the Chromatic build to a specific commit.
|
||||
commitSha: YOUR_VALUE_HERE # e.g., "a1b2c3d4e5f6g7h8i9j0"
|
||||
|
||||
# Repository slug - Optional, defaults to the origin URL from git config.
|
||||
# Format: <owner>/<repository> (e.g., "my-org/my-repo")
|
||||
repositorySlug: YOUR_VALUE_HERE # e.g., "my-org/my-repo"
|
||||
|
||||
# Build number - Optional, defaults to the CI build number (if available).
|
||||
# Useful for tracking specific builds within your CI/CD system.
|
||||
buildNumber: YOUR_VALUE_HERE # e.g., "1234"
|
||||
|
||||
# Auto Accept Changes - Flag to automatically accept all changes. USE WITH CAUTION!
|
||||
# Useful in CI environments where you want to automatically approve visual changes.
|
||||
# Set to 'true' to auto-accept all changes, 'false' to require manual approval.
|
||||
autoAcceptChanges: false
|
||||
|
||||
# Ignore Files - List of file patterns to ignore during screenshot collection.
|
||||
# Use glob patterns to match files or directories.
|
||||
ignoreFiles:
|
||||
- "**/node_modules/**"
|
||||
- "**/dist/**"
|
||||
- "**/build/**"
|
||||
|
||||
# Include Files - List of file patterns to include during screenshot collection.
|
||||
# Use glob patterns to match files or directories. If not specified, all files are considered.
|
||||
includeFiles:
|
||||
- "**/src/**/*.stories.@(js|jsx|ts|tsx)"
|
||||
- "**/stories/**/*.stories.@(js|jsx|ts|tsx)"
|
||||
|
||||
# Storybook URL - The URL of your deployed Storybook instance.
|
||||
# If not specified, Chromatic will attempt to build and serve Storybook locally.
|
||||
# Useful when you want to use a pre-built Storybook instance.
|
||||
storybookUrl: YOUR_VALUE_HERE # e.g., "https://your-storybook.example.com"
|
||||
|
||||
# Debug - Enable debug mode for more verbose logging.
|
||||
debug: false
|
||||
|
||||
# Options specific to the Chromatic CLI. See https://www.chromatic.com/docs/cli-options for full details.
|
||||
chromaticFlags:
|
||||
# Example: --only-changed
|
||||
onlyChanged: false
|
||||
# Example: --exit-zero-on-changes
|
||||
exitZeroOnChanges: false
|
||||
@@ -0,0 +1,42 @@
|
||||
# Percy configuration file example
|
||||
# This file defines the settings for running visual regression tests using Percy.
|
||||
|
||||
version: 2
|
||||
# Percy configuration version. Keep this as 2 for the latest stable features.
|
||||
|
||||
percy:
|
||||
# Percy specific settings
|
||||
token: REPLACE_ME # Your Percy project token. Get this from the Percy dashboard.
|
||||
branch: main # The branch to compare against. Defaults to 'main' or environment variable.
|
||||
parallel: true # Enable parallel test execution for faster results.
|
||||
widths: # Viewport widths to capture screenshots at. Important for responsive testing.
|
||||
- 375 # Mobile
|
||||
- 768 # Tablet
|
||||
- 1280 # Desktop
|
||||
minimum_height: 1024 # Minimum height for the screenshot. Useful for pages that dynamically load content.
|
||||
debug: false # Enable debug logging. Useful for troubleshooting.
|
||||
|
||||
# Generic configuration for test execution
|
||||
test:
|
||||
url: "YOUR_VALUE_HERE" # The base URL of your application. e.g., "https://example.com"
|
||||
files:
|
||||
- "path/to/your/test/file.js" # Example test file. Can be a glob pattern.
|
||||
- "another/test/file.spec.ts" # Example test file. Can be a glob pattern.
|
||||
# Test framework specific configurations. These are examples, adjust to your framework.
|
||||
# This plugin doesn't execute the tests, it just passes the config along to Percy CLI or similar.
|
||||
framework:
|
||||
type: playwright # Example: "playwright", "cypress", "selenium"
|
||||
options: # Framework specific options. Consult your framework's documentation.
|
||||
headless: true # Run tests in headless mode. Good for CI/CD.
|
||||
browser: chromium # Browser to use for testing. e.g., "chromium", "firefox", "webkit"
|
||||
|
||||
# Environment variables to pass to the test execution environment.
|
||||
# Useful for injecting credentials or other configuration values.
|
||||
environment:
|
||||
API_KEY: "YOUR_API_KEY" # Example API key. Replace with your actual key.
|
||||
DATABASE_URL: "YOUR_DATABASE_URL" # Example database URL. Replace with your actual URL.
|
||||
|
||||
# Optional: Configure custom snapshot names. Useful for making reports easier to read.
|
||||
snapshots:
|
||||
prefix: "Component_" # Prefix for all snapshot names.
|
||||
suffix: "_Example" # Suffix for all snapshot names.
|
||||
139
skills/visual-regression-tester/assets/html_report_template.html
Normal file
139
skills/visual-regression-tester/assets/html_report_template.html
Normal file
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Visual Regression Test Report</title>
|
||||
<style>
|
||||
/* Inline CSS for styling */
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f4f4f4;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 960px;
|
||||
margin: 20px auto;
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.test-suite {
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.test-case h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.image-comparison {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
flex: 1 1 300px;
|
||||
text-align: center;
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.status-passed {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.status-failed {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #eee;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 600px) {
|
||||
.container {
|
||||
padding: 10px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.image-comparison {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1>Visual Regression Test Report</h1>
|
||||
|
||||
<p><strong>Date:</strong> {{report_date}}</p>
|
||||
<p><strong>Generated By:</strong> Visual Regression Tester Plugin</p>
|
||||
|
||||
<h2>Summary</h2>
|
||||
<p><strong>Total Tests:</strong> {{total_tests}}</p>
|
||||
<p><strong>Passed:</strong> <span class="status-passed">{{passed_tests}}</span></p>
|
||||
<p><strong>Failed:</strong> <span class="status-failed">{{failed_tests}}</span></p>
|
||||
<p><strong>Pending:</strong> <span class="status-pending">{{pending_tests}}</span></p>
|
||||
|
||||
<h2>Test Results</h2>
|
||||
|
||||
{{test_results}} <!-- Placeholder for dynamically generated test results -->
|
||||
|
||||
<div class="footer">
|
||||
<p>Report generated by Visual Regression Tester plugin.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
8
skills/visual-regression-tester/references/README.md
Normal file
8
skills/visual-regression-tester/references/README.md
Normal file
@@ -0,0 +1,8 @@
|
||||
# References
|
||||
|
||||
Bundled resources for visual-regression-tester skill
|
||||
|
||||
- [ ] percy_api_docs.md: Documentation for the Percy API, including authentication, project setup, and test execution.
|
||||
- [ ] chromatic_api_docs.md: Documentation for the Chromatic API, including authentication, project setup, and test execution.
|
||||
- [ ] backstopjs_config.md: Example BackstopJS configuration file with detailed explanations of each option.
|
||||
- [ ] visual_testing_best_practices.md: A guide to best practices for visual regression testing, including test setup, baseline management, and change classification.
|
||||
7
skills/visual-regression-tester/scripts/README.md
Normal file
7
skills/visual-regression-tester/scripts/README.md
Normal file
@@ -0,0 +1,7 @@
|
||||
# Scripts
|
||||
|
||||
Bundled resources for visual-regression-tester skill
|
||||
|
||||
- [ ] run_visual_tests.sh: Executes visual regression tests using specified tool and configuration.
|
||||
- [ ] update_baselines.sh: Updates the baseline images for visual regression tests.
|
||||
- [ ] analyze_diffs.py: Analyzes the visual differences and classifies them as intentional or unintended.
|
||||
Reference in New Issue
Block a user