菜单
Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency. Use when detecting UI regressions, validating designs, or ensuring visual consistency.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/proffesor-for-testing/agentic-qe --skill visual-testing-advanced命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | visual-testing-advanced |
| description | Advanced visual regression testing with pixel-perfect comparison, AI-powered diff analysis, responsive design validation, and cross-browser visual consistency. Use when detecting UI regressions, validating designs, or ensuring visual consistency. |
| category | specialized-testing |
| priority | high |
| tokenEstimate | 900 |
| agents | ["qe-visual-tester","qe-test-executor","qe-quality-gate"] |
| implementation_status | optimized |
| optimization_version | 1 |
| last_optimized | "2025-12-02T00:00:00.000Z" |
| dependencies | [] |
| quick_reference_card | true |
| tags | ["visual","regression","screenshot","pixel-diff","percy","playwright","responsive"] |
| trust_tier | 3 |
| validation | {"schema_path":"schemas/output.json","validator_path":"scripts/validate-config.json","eval_path":"evals/visual-testing-advanced.yaml"} |
<default_to_action> When detecting visual regressions or validating UI:
Quick Visual Testing Steps:
Critical Success Factors:
| Bug Type | Description |
|---|---|
| Layout shift | Elements moved position |
| Color change | Unintended color modification |
| Font rendering | Typography issues |
| Alignment | Spacing/alignment problems |
| Missing images | Broken image paths |
| Overflow | Content clipping |
| Algorithm | Best For |
|---|---|
| Pixel diff | Exact match requirement |
| Structural similarity | Handle anti-aliasing |
| AI semantic | Ignore insignificant changes |
Most visual regression work should go through the qe-browser fleet skill. It wraps Vibium (WebDriver BiDi) and provides pixel-diff against stored baselines with threshold enforcement and diff-image output. See .
.claude/skills/qe-browser/SKILL.md# Navigate
vibium go https://example.com
vibium wait load
# First run — creates baseline in .aqe/visual-baselines/homepage.png
node .claude/skills/qe-browser/scripts/visual-diff.js --name homepage
# Subsequent runs — compare, non-zero exit on mismatch
node .claude/skills/qe-browser/scripts/visual-diff.js --name homepage --threshold 0.02
# Scope to a single region
node .claude/skills/qe-browser/scripts/visual-diff.js --name hero --selector "#hero"
# Responsive — run diff at each breakpoint
for viewport in "375 667" "768 1024" "1920 1080"; do
read w h <<< "$viewport"
vibium viewport $w $h
node .claude/skills/qe-browser/scripts/visual-diff.js --name "homepage-${w}x${h}"
done
# Reset baseline after an intentional design change
node .claude/skills/qe-browser/scripts/visual-diff.js --name homepage --update-baseline
Baselines live in .aqe/visual-baselines/. The script uses pixelmatch when installed, with a hash-based exact-match fallback otherwise. Non-zero exit when similarity < 1 - threshold, so CI gating is $?-based.
Use the Playwright recipe below only when you need:
import { test, expect } from '@playwright/test';
test('homepage visual regression', async ({ page }) => {
await page.goto('https://example.com');
// Capture and compare screenshot
await expect(page).toHaveScreenshot('homepage.png');
// First run: saves baseline
// Subsequent runs: compares to baseline
});
test('responsive design', async ({ page }) => {
// Mobile viewport
await page.setViewportSize({ width: 375, height: 667 });
await page.goto('https://example.com');
await expect(page).toHaveScreenshot('homepage-mobile.png');
// Tablet viewport
await page.setViewportSize({ width: 768, height: 1024 });
await expect(page).toHaveScreenshot('homepage-tablet.png');
});
test('mask dynamic elements', async ({ page }) => {
await page.goto('https://example.com');
await expect(page).toHaveScreenshot({
mask: [
page.locator('.timestamp'), // Dynamic time
page.locator('.user-count'), // Live counter
page.locator('.advertisement'), // Ads
page.locator('.avatar') // User avatars
]
});
});
import percySnapshot from '@percy/playwright';
test('AI-powered visual test', async ({ page }) => {
await page.goto('https://example.com');
// Percy uses AI to ignore anti-aliasing, minor font differences
await percySnapshot(page, 'Homepage');
});
test('component visual test', async ({ page }) => {
await page.goto('https://example.com/components');
// Snapshot specific component
const button = page.locator('.primary-button');
await percySnapshot(page, 'Primary Button', {
scope: button
});
});
// playwright.config.js
export default {
expect: {
toHaveScreenshot: {
maxDiffPixels: 100, // Allow 100 pixel difference
maxDiffPixelRatio: 0.01, // Or 1% of image
threshold: 0.2, // Color similarity threshold
animations: 'disabled', // Disable animations
caret: 'hide' // Hide cursor
}
}
};
// Comprehensive visual regression
await Task("Visual Regression Suite", {
baseline: 'main-branch',
current: 'feature-branch',
pages: ['homepage', 'product', 'checkout'],
devices: ['desktop', 'tablet', 'mobile'],
browsers: ['chrome', 'firefox', 'safari'],
threshold: 0.01
}, "qe-visual-tester");
// Returns:
// {
// comparisons: 27, // 3 pages × 3 devices × 3 browsers
// differences: 2,
// report: 'visual-regression-report.html'
// }
aqe/visual-testing/
├── baselines/* - Baseline screenshots
├── comparisons/* - Diff results
├── components/* - Component snapshots
└── reports/* - Visual regression reports
const visualFleet = await FleetManager.coordinate({
strategy: 'visual-testing',
agents: [
'qe-visual-tester', // Screenshot comparison
'qe-test-executor', // Cross-browser execution
'qe-quality-gate' // Block on visual regressions
],
topology: 'parallel'
});
Functional tests don't catch visual bugs. Layout shifts, color changes, font rendering, alignment issues - all invisible to functional tests but visible to users.
AI-powered tools reduce false positives. Percy, Applitools use AI to ignore insignificant differences (anti-aliasing, minor font rendering).
With Agents: qe-visual-tester automates visual regression across browsers and devices, uses AI to filter noise, and generates visual diff reports. Catches UI regressions before users see them.