SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场visual-testing

visual-testing

测试与质量

查看项目

更新于 10-16 02:00

技能介绍

Visual Testing Skill

用于通过截图、响应式测试和 Figma 集成执行视觉测试、UI 验证与设计对比。

何时使用

该技能在以下情况下激活：

  • 用户想要验证 UI 外观
  • 用户要求将页面与设计稿或 Figma 进行对比
  • 用户需要响应式设计测试
  • 用户想要检查视觉回归
  • 用户提到 UI bug 或样式问题
  • 用户询问设计一致性（design parity）
  • 用户想要验证实现是否符合设计

能力

截图捕获

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

带标注截图（ref 标签）

在交互元素上叠加数字标签 [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"

视口预设

设备 宽度 高度 命令
Mobile S 320px 568px --width 320 --height 568
Mobile M 375px 667px --width 375 --height 667
Mobile L 425px 812px --width 425 --height 812
Tablet 768px 1024px --width 768 --height 1024
Laptop 1366px 768px --width 1366 --height 768
Desktop 1920px 1080px --width 1920 --height 1080

Figma 对比的前提条件

Figma API 访问：

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

可选（用于增强对比）：

  • 用于图像/文本嵌入的 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 文件 key 和 node ID：

  • 文件 key：来自 URL figma.com/file/{FILE_KEY}/...
  • Node ID：选中 frame → 复制链接 → 提取 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"

常见视觉检查项

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

最佳实践

  • 实际数据与样本数据对比时使用语义模式
  • 不仅对比整页，也对比组件
  • 针对响应式设计测试多个视口
  • 为 CI/CD 记录 Figma 参考
  • 为回归测试设置基线分数
  • 查看响应中的注释以获取信号细节
  • 在关键状态（初始、hover、active）下截图