visual-testing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Visual Testing Skill

Visual Testing 技能

Perform visual testing, UI verification, and design comparison using screenshots, responsive testing, and Figma integration.

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

When to Use

使用场景

This skill activates when:

User wants to verify UI appearance
User asks to compare page with design or Figma
User needs responsive design testing
User wants to check for visual regressions
User mentions UI bugs or styling issues
User asks about design parity
User wants to validate implementation against design

当出现以下情况时，将激活该技能：

用户需要验证UI外观
用户要求将页面与设计稿或Figma文件对比
用户需要进行响应式设计测试
用户需要检查视觉回归问题
用户提及UI bug或样式问题
用户询问设计一致性
用户需要验证设计落地效果

Capabilities

功能特性

Screenshot Capture

截图捕获

bash

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

bash

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

Responsive Testing

响应式测试

bash

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

bash

browser-devtools-cli interaction resize-viewport --width 375 --height 667   # 手机
browser-devtools-cli interaction resize-viewport --width 768 --height 1024  # 平板
browser-devtools-cli interaction resize-viewport --width 1920 --height 1080 # 桌面端

Figma Design Comparison

Figma设计对比

bash

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

bash

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 Inspection

DOM检查

bash

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"

bash

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"

Viewport Presets

视口预设

Device	Width	Height	Command
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`

设备	宽度	高度	命令
手机小屏	320px	568px	`--width 320 --height 568`
手机中屏	375px	667px	`--width 375 --height 667`
手机大屏	425px	812px	`--width 425 --height 812`
平板	768px	1024px	`--width 768 --height 1024`
笔记本	1366px	768px	`--width 1366 --height 768`
桌面端	1920px	1080px	`--width 1920 --height 1080`

Prerequisites for Figma Comparison

Figma对比前置条件

Figma API Access:

Set
```
FIGMA_ACCESS_TOKEN
```
environment variable
Get token from Figma account settings

Optional (for enhanced comparison):

AWS credentials for image/text embeddings
Cloud inference profile configuration

Figma API 访问权限：

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

可选（增强对比功能）：

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

Visual Testing Workflow

视觉测试工作流

bash

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

bash

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

1. Navigate

1. 导航至目标页面

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

2. Capture desktop

2. 捕获桌面端截图

browser-devtools-cli $SESSION content take-screenshot --name "desktop"

3. Test mobile viewport

3. 测试手机视口

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

4. Test tablet viewport

4. 测试平板视口

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

5. Cleanup

5. 清理会话

browser-devtools-cli session delete visual-test

undefined

browser-devtools-cli session delete visual-test

undefined

Figma Comparison Workflow

Figma对比工作流

1. Get Figma Reference

1. 获取Figma参考信息

Find the Figma file key and node ID:

File key: From URL
```
figma.com/file/{FILE_KEY}/...
```
Node ID: Select frame → Copy link → Extract node-id parameter

找到Figma文件密钥和节点ID：

文件密钥：从URL
```
figma.com/file/{FILE_KEY}/...
```
中提取
节点ID：选中框架 → 复制链接 → 提取node-id参数

2. Compare with Live Page

2. 与在线页面对比

bash

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

bash

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

3. Analyze Results

3. 分析结果

Score 0.9-1.0: Excellent match
Score 0.7-0.9: Minor differences
Score 0.5-0.7: Significant differences
Score < 0.5: Major mismatch

分数0.9-1.0：匹配度极佳
分数0.7-0.9：存在细微差异
分数0.5-0.7：存在显著差异
分数<0.5：严重不匹配

4. Investigate Differences

4. 排查差异问题

If score is low:

bash

undefined

如果分数较低：

bash

undefined

Take screenshot of the area

截取差异区域截图

browser-devtools-cli content take-screenshot --name "mismatch" --selector ".hero-section"

Check HTML structure

检查HTML结构

browser-devtools-cli content get-as-html --selector ".hero-section"

undefined

browser-devtools-cli content get-as-html --selector ".hero-section"

undefined

Comparison Modes

对比模式

Semantic Mode (Default)

语义模式（默认）

More tolerant of text/data differences
Focuses on layout and structure
Good for comparing sample vs real data

bash

browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "1:2" \
  --mssim-mode semantic

对文本/数据差异的容忍度更高
聚焦于布局与结构对比
适用于示例数据与真实数据的对比

bash

browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "1:2" \
  --mssim-mode semantic

Raw Mode

原始模式

Stricter pixel comparison
Expects near-identical output
Good for static content

bash

browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "1:2" \
  --mssim-mode raw

严格的像素级对比
要求输出近乎完全一致
适用于静态内容对比

bash

browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "1:2" \
  --mssim-mode raw

Common Scenarios

常见场景

Full Page Comparison

整页对比

bash

browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "1:2" \
  --full-page true

bash

browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "1:2" \
  --full-page true

Component Comparison

组件对比

bash

browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "5:10" \
  --selector ".card-component"

bash

browser-devtools-cli figma compare-page-with-design \
  --figma-file-key "ABC123" \
  --figma-node-id "5:10" \
  --selector ".card-component"

Responsive Testing with Figma

结合Figma的响应式测试

bash

undefined

bash

undefined

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"

undefined

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

undefined

Common Visual Checks

常见视觉检查项

Element visibility at breakpoints
Text overflow and truncation
Image aspect ratios
Color and typography consistency
Spacing and alignment
Interactive state styling

断点处元素可见性
文本溢出与截断
图片比例
颜色与字体一致性
间距与对齐
交互状态样式

Best Practices

最佳实践

Use semantic mode for real data vs sample data
Compare components not just full pages
Test multiple viewports for responsive designs
Document Figma references for CI/CD
Set baseline scores for regression testing
Review notes in response for signal details
Take screenshots at key states (initial, hover, active)

使用语义模式对比真实数据与示例数据
对比组件而非仅整页
测试多视口以覆盖响应式设计
记录Figma参考信息用于CI/CD流程
设置基准分数用于视觉回归测试
查看响应中的备注获取细节信息
在关键状态下截图（初始、悬停、激活状态）