mcpField
V
visual-testing

visual-testing

github.com/serkan-ozal测试与质量753 次安装33 周前更新
代码仓库

关于 visual-testing

visual-testing 是用于检查网页界面外观、响应式表现和设计一致性的 skill。它通过 browser-devtools-cli 截图、检查页面内容，并与 Figma 设计稿比较。

主要功能

  1. 01捕获整页或元素截图
  2. 02按指定视口测试布局
  3. 03与 Figma 设计稿比较
  4. 04检查 HTML 和文本内容
  5. 05使用语义或原始比较模式

适用场景

  1. 01检查界面在不同屏幕尺寸下的表现
  2. 02将实现页面与 Figma 画板比较
  3. 03排查视觉回归或样式问题

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/serkan-ozal/browser-devtools-skills --skill visual-testing

安装后在 Claude Code 中输入/visual-testing确认已加载。

详细介绍

视觉测试技能

使用截图、响应式测试和 Figma 集成进行视觉测试、UI 验证和设计对比。

使用时机

在以下情况下启用此技能：

  • 用户想要验证 UI 外观
  • 用户要求将页面与设计或 Figma 进行对比
  • 用户需要进行响应式设计测试
  • 用户想要检查视觉回归
  • 用户提到 UI 缺陷或样式问题
  • 用户询问设计一致性
  • 用户想要根据设计验证实现效果

功能

截图捕获
browser-devtools-cli content take-screenshot --name "homepage"
browser-devtools-cli content take-screenshot --name "element" --selector ".hero"
browser-devtools-cli content take-screenshot --name "fullpage" --full-page
browser-devtools-cli content take-screenshot --name "photo" --type jpeg --quality 80
browser-devtools-cli content save-as-pdf --name "page" --format A4
带标注的截图（引用标签）

在交互元素上覆盖编号标签 [1]、[2]。先调用 a11y take-aria-snapshot。

browser-devtools-cli a11y take-aria-snapshot
browser-devtools-cli content take-screenshot --annotate --name "annotated"
browser-devtools-cli content take-screenshot --annotate --annotate-content --name "with-headings"
响应式测试
browser-devtools-cli interaction resize-viewport --width 375 --height 667   # Mobile
browser-devtools-cli interaction resize-viewport --width 768 --height 1024  # Tablet
browser-devtools-cli interaction resize-viewport --width 1920 --height 1080 # Desktop
Figma 设计对比
browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123xyz" \
  --figma-node-id "12:34"

browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123xyz" \
  --figma-node-id "12:34" \
  --selector ".hero-section"

browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123xyz" \
  --figma-node-id "12:34" \
  --mssim-mode semantic
DOM 检查
browser-devtools-cli content get-as-html
browser-devtools-cli content get-as-html --selector ".component"
browser-devtools-cli content get-as-text --selector ".content"

视口预设

设备宽度高度命令
小屏手机320px568px--width 320 --height 568
中屏手机375px667px--width 375 --height 667
大屏手机425px812px--width 425 --height 812
平板电脑768px1024px--width 768 --height 1024
笔记本电脑1366px768px--width 1366 --height 768
台式电脑1920px1080px--width 1920 --height 1080

Figma 对比的前提条件

Figma API 访问权限：

  • 设置 FIGMA_ACCESS_TOKEN 环境变量
  • 从 Figma 账户设置中获取令牌

可选（用于增强对比）：

  • 用于图像/文本嵌入的 AWS 凭证
  • 云端推理配置文件配置

视觉测试工作流

SESSION="--session-id visual-test"

# 1. Navigate
browser-devtools-cli $SESSION navigation go-to --url "https://example.com"
browser-devtools-cli $SESSION sync wait-for-network-idle

# 2. Capture desktop
browser-devtools-cli $SESSION content take-screenshot --name "desktop"

# 3. Test mobile viewport
browser-devtools-cli $SESSION interaction resize-viewport --width 375 --height 667
browser-devtools-cli $SESSION content take-screenshot --name "mobile"

# 4. Test tablet viewport
browser-devtools-cli $SESSION interaction resize-viewport --width 768 --height 1024
browser-devtools-cli $SESSION content take-screenshot --name "tablet"

# 5. Cleanup
browser-devtools-cli session delete visual-test

Figma 对比工作流

1. 获取 Figma 参考

查找 Figma 文件键和节点 ID：

  • 文件键：来自 URL figma.com/file/{FILE_KEY}/...
  • 节点 ID：选择画板 → 复制链接 → 提取 node-id 参数
2. 与实时页面对比
browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123xyz" \
  --figma-node-id "12:34" \
  --selector ".hero-section"
3. 分析结果
  • 得分 0.9-1.0：匹配度极佳
  • 得分 0.7-0.9：细微差异
  • 得分 0.5-0.7：明显差异
  • 得分 < 0.5：差异很大
4. 调查差异

如果得分较低：

# Take screenshot of the area
browser-devtools-cli content take-screenshot --name "mismatch" --selector ".hero-section"

# Check HTML structure
browser-devtools-cli content get-as-html --selector ".hero-section"

对比模式

语义模式（默认）
  • 对文本/数据差异更宽容
  • 侧重布局和结构
  • 适合对比示例数据与真实数据
browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "1:2" \
  --mssim-mode semantic
原始模式
  • 像素对比更严格
  • 预期输出几乎完全一致
  • 适合静态内容
browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "1:2" \
  --mssim-mode raw

常见场景

全页面对比
browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "1:2" \
  --full-page
组件对比
browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "5:10" \
  --selector ".card-component"
使用 Figma 进行响应式测试
# Resize viewport first
browser-devtools-cli interaction resize-viewport --width 375 --height 667

# Then compare with mobile design
browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "20:30"

常见视觉检查项

  • 各断点下元素的可见性
  • 文本溢出和截断
  • 图像宽高比
  • 颜色和排版的一致性
  • 间距和对齐
  • 交互状态样式

最佳实践

  1. 使用语义模式对比真实数据与示例数据
  2. 对比组件，而不只是整个页面
  3. 测试多个视口，检查响应式设计
  4. 为 CI/CD 记录 Figma 参考
  5. 设置基准分数，用于回归测试
  6. 查看响应中的备注，了解信号详情
  7. 在关键状态下截取屏幕截图（初始、悬停、激活）

评论

支持 Markdown