重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
visual-testing-advanced by proffesor-for-testing/agentic-qe
npx skills add https://github.com/proffesor-for-testing/agentic-qe --skill visual-testing-advanced<default_to_action> 当检测视觉回归或验证 UI 时:
快速视觉测试步骤:
关键成功因素:
| 缺陷类型 | 描述 |
|---|---|
| 布局偏移 | 元素位置移动 |
| 颜色变更 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 意外的颜色修改 |
| 字体渲染 | 排版问题 |
| 对齐 | 间距/对齐问题 |
| 图片缺失 | 图片路径损坏 |
| 溢出 | 内容被裁剪 |
| 算法 | 最适合 |
|---|---|
| 像素差异 | 需要精确匹配 |
| 结构相似性 | 处理抗锯齿 |
| AI 语义 | 忽略不重要的变更 |
import { test, expect } from '@playwright/test';
test('homepage visual regression', async ({ page }) => {
await page.goto('https://example.com');
// 捕获并比较截图
await expect(page).toHaveScreenshot('homepage.png');
// 首次运行:保存基线
// 后续运行:与基线比较
});
test('responsive design', async ({ page }) => {
// 移动端视口
await page.setViewportSize({ width: 375, height: 667 });
await page.goto('https://example.com');
await expect(page).toHaveScreenshot('homepage-mobile.png');
// 平板端视口
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'), // 动态时间
page.locator('.user-count'), // 实时计数器
page.locator('.advertisement'), // 广告
page.locator('.avatar') // 用户头像
]
});
});
import percySnapshot from '@percy/playwright';
test('AI-powered visual test', async ({ page }) => {
await page.goto('https://example.com');
// Percy 使用 AI 来忽略抗锯齿、微小的字体差异
await percySnapshot(page, 'Homepage');
});
test('component visual test', async ({ page }) => {
await page.goto('https://example.com/components');
// 对特定组件进行快照
const button = page.locator('.primary-button');
await percySnapshot(page, 'Primary Button', {
scope: button
});
});
// playwright.config.js
export default {
expect: {
toHaveScreenshot: {
maxDiffPixels: 100, // 允许 100 像素差异
maxDiffPixelRatio: 0.01, // 或图像的 1%
threshold: 0.2, // 颜色相似度阈值
animations: 'disabled', // 禁用动画
caret: 'hide' // 隐藏光标
}
}
};
// 全面的视觉回归测试
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");
// 返回:
// {
// comparisons: 27, // 3 页面 × 3 设备 × 3 浏览器
// differences: 2,
// report: 'visual-regression-report.html'
// }
aqe/visual-testing/
├── baselines/* - 基线截图
├── comparisons/* - 差异结果
├── components/* - 组件快照
└── reports/* - 视觉回归报告
const visualFleet = await FleetManager.coordinate({
strategy: 'visual-testing',
agents: [
'qe-visual-tester', // 截图比较
'qe-test-executor', // 跨浏览器执行
'qe-quality-gate' // 阻止视觉回归
],
topology: 'parallel'
});
功能测试无法捕获视觉缺陷。 布局偏移、颜色变更、字体渲染、对齐问题——所有这些对功能测试都不可见,但对用户可见。
AI 驱动的工具可减少误报。 Percy、Applitools 使用 AI 来忽略不重要的差异(抗锯齿、微小的字体渲染)。
使用智能体: qe-visual-tester 自动执行跨浏览器和设备的视觉回归测试,使用 AI 过滤噪音,并生成视觉差异报告。在用户看到之前捕获 UI 回归。
每周安装数
67
代码仓库
GitHub 星标数
297
首次出现
2026年1月24日
安全审计
安装于
opencode64
github-copilot63
gemini-cli63
codex63
cursor62
kimi-cli59
<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 |
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.
Weekly Installs
67
Repository
GitHub Stars
297
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode64
github-copilot63
gemini-cli63
codex63
cursor62
kimi-cli59
通过 LiteLLM 代理让 Claude Code 对接 GitHub Copilot 运行 | 高级变通方案指南
48,700 周安装