Back to Details

ui-testing

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

UI Testing Skill

UI测试技能

Browser automation for UI verification using Chrome MCP tools.
基于Chrome MCP工具的UI验证浏览器自动化方案。

Quick Reference

快速参考

TaskToolKey Parameters
Screenshot
computer
action: "screenshot"
Click
computer
action: "left_click", coordinate: [x,y]
or 
ref: "ref_1"
Type
computer
action: "type", text: "..."
Find element
find
query: "search button"
Read page
read_page
filter: "interactive"
or 
"all"
Navigate
navigate
url: "https://..."
Resize
resize_window
width: 1920, height: 1080
Record GIF
gif_creator
action: "start_recording"
Console
read_console_messages
pattern: "error"
Network
read_network_requests
urlPattern: "/api/"
All tools prefixed with 
mcp__claude-in-chrome__
.
任务工具关键参数
截图
computer
action: "screenshot"
点击
computer
action: "left_click", coordinate: [x,y]
或 
ref: "ref_1"
输入
computer
action: "type", text: "..."
查找元素
find
query: "search button"
读取页面
read_page
filter: "interactive"
或 
"all"
导航
navigate
url: "https://..."
调整窗口大小
resize_window
width: 1920, height: 1080
录制GIF
gif_creator
action: "start_recording"
控制台
read_console_messages
pattern: "error"
网络
read_network_requests
urlPattern: "/api/"
所有工具均以 
mcp__claude-in-chrome__
为前缀。

Workflow: Visual Testing

视觉测试工作流

1. Setup Test Session

1. 搭建测试会话

1. tabs_context_mcp (createIfEmpty: true)
2. tabs_create_mcp  → get new tabId
3. navigate (url: target_url, tabId: {tab})
4. computer (action: "wait", duration: 2, tabId: {tab})
5. computer (action: "screenshot", tabId: {tab})
1. tabs_context_mcp (createIfEmpty: true)
2. tabs_create_mcp  → 获取新的tabId
3. navigate (url: target_url, tabId: {tab})
4. computer (action: "wait", duration: 2, tabId: {tab})
5. computer (action: "screenshot", tabId: {tab})

2. Responsive Testing

2. 响应式测试

Test at standard breakpoints:
DeviceWidthHeight
Mobile375667
Tablet7681024
Desktop1440900
Wide19201080
1. resize_window (width: 375, height: 667, tabId: {tab})
2. computer (action: "wait", duration: 1, tabId: {tab})
3. computer (action: "screenshot", tabId: {tab})
4. Repeat for other breakpoints
在标准断点下进行测试：
设备宽度高度
移动端375667
平板端7681024
桌面端1440900
宽屏19201080
1. resize_window (width: 375, height: 667, tabId: {tab})
2. computer (action: "wait", duration: 1, tabId: {tab})
3. computer (action: "screenshot", tabId: {tab})
4. 针对其他断点重复上述步骤

3. Component State Testing

3. 组件状态测试

Test hover, active, focus states:
undefined
测试悬停、激活、聚焦状态：
undefined

Hover state

悬停状态

  1. find (query: "submit button", tabId: {tab})
  2. computer (action: "hover", ref: "ref_X", tabId: {tab})
  3. computer (action: "screenshot", tabId: {tab})
  1. find (query: "submit button", tabId: {tab})
  2. computer (action: "hover", ref: "ref_X", tabId: {tab})
  3. computer (action: "screenshot", tabId: {tab})

Focus state (tab to element)

聚焦状态（切换到元素）

  1. computer (action: "key", text: "Tab", tabId: {tab})
  2. computer (action: "screenshot", tabId: {tab})
  1. computer (action: "key", text: "Tab", tabId: {tab})
  2. computer (action: "screenshot", tabId: {tab})

Click state

点击状态

  1. computer (action: "left_click", ref: "ref_X", tabId: {tab})
  2. computer (action: "screenshot", tabId: {tab})
undefined
  1. computer (action: "left_click", ref: "ref_X", tabId: {tab})
  2. computer (action: "screenshot", tabId: {tab})
undefined

Workflow: Interaction Testing

交互测试工作流

Form Testing

表单测试

1. find (query: "email input", tabId: {tab})
2. computer (action: "left_click", ref: "ref_X", tabId: {tab})
3. computer (action: "type", text: "test@example.com", tabId: {tab})
4. computer (action: "key", text: "Tab", tabId: {tab})  # Move to next field
5. computer (action: "type", text: "password123", tabId: {tab})
6. computer (action: "screenshot", tabId: {tab})  # Capture filled form
7. find (query: "submit button", tabId: {tab})
8. computer (action: "left_click", ref: "ref_Y", tabId: {tab})
9. computer (action: "wait", duration: 2, tabId: {tab})
10. computer (action: "screenshot", tabId: {tab})  # Capture result
1. find (query: "email input", tabId: {tab})
2. computer (action: "left_click", ref: "ref_X", tabId: {tab})
3. computer (action: "type", text: "test@example.com", tabId: {tab})
4. computer (action: "key", text: "Tab", tabId: {tab})  # 切换到下一个字段
5. computer (action: "type", text: "password123", tabId: {tab})
6. computer (action: "screenshot", tabId: {tab})  # 捕获已填写的表单
7. find (query: "submit button", tabId: {tab})
8. computer (action: "left_click", ref: "ref_Y", tabId: {tab})
9. computer (action: "wait", duration: 2, tabId: {tab})
10. computer (action: "screenshot", tabId: {tab})  # 捕获提交结果

Navigation Testing

导航测试

1. find (query: "navigation menu", tabId: {tab})
2. computer (action: "left_click", ref: "ref_X", tabId: {tab})
3. computer (action: "wait", duration: 1, tabId: {tab})
4. computer (action: "screenshot", tabId: {tab})
5. Check URL changed: read_page to verify content
1. find (query: "navigation menu", tabId: {tab})
2. computer (action: "left_click", ref: "ref_X", tabId: {tab})
3. computer (action: "wait", duration: 1, tabId: {tab})
4. computer (action: "screenshot", tabId: {tab})
5. 检查URL是否变更：通过read_page验证内容

Error State Testing

错误状态测试

undefined
undefined

Test validation errors

测试验证错误

  1. find (query: "email input", tabId: {tab})
  2. computer (action: "left_click", ref: "ref_X", tabId: {tab})
  3. computer (action: "type", text: "invalid-email", tabId: {tab})
  4. computer (action: "key", text: "Tab", tabId: {tab})
  5. computer (action: "screenshot", tabId: {tab}) # Capture error state
  6. read_page (tabId: {tab}) # Verify error message in DOM
undefined
  1. find (query: "email input", tabId: {tab})
  2. computer (action: "left_click", ref: "ref_X", tabId: {tab})
  3. computer (action: "type", text: "invalid-email", tabId: {tab})
  4. computer (action: "key", text: "Tab", tabId: {tab})
  5. computer (action: "screenshot", tabId: {tab}) # 捕获错误状态
  6. read_page (tabId: {tab}) # 验证DOM中的错误提示信息
undefined

Workflow: Accessibility Testing

无障碍测试工作流

Read Accessibility Tree

读取无障碍树

1. read_page (tabId: {tab}, filter: "all")
   → Returns full a11y tree with roles, names, states

2. read_page (tabId: {tab}, filter: "interactive")
   → Returns only interactive elements (buttons, links, inputs)
1. read_page (tabId: {tab}, filter: "all")
   → 返回包含角色、名称、状态的完整无障碍树

2. read_page (tabId: {tab}, filter: "interactive")
   → 仅返回交互式元素（按钮、链接、输入框）

Accessibility Checklist

无障碍检查清单

CheckHow to Verify
All buttons have labels
read_page
→ check button names not empty
Images have alt text
read_page
→ check img elements have names
Form inputs have labels
read_page
→ verify input descriptions
Focus visibleTab through elements, screenshot each
Color contrastVisual inspection of screenshots
Keyboard navigableUse 
key: "Tab"
to traverse
检查项验证方式
所有按钮均有标签
read_page
→ 检查按钮名称不为空
图片包含替代文本
read_page
→ 检查图片元素包含名称
表单输入框有标签
read_page
→ 验证输入框描述信息
聚焦状态可见按Tab键切换元素，逐个截图
颜色对比度对截图进行视觉检查
支持键盘导航使用 
key: "Tab"
遍历元素

Keyboard Navigation Test

键盘导航测试

1. computer (action: "key", text: "Tab", tabId: {tab})
2. computer (action: "screenshot", tabId: {tab})  # Focus indicator visible?
3. Repeat Tab, screenshot each focused element
4. computer (action: "key", text: "Return", tabId: {tab})  # Activate element
5. computer (action: "screenshot", tabId: {tab})
1. computer (action: "key", text: "Tab", tabId: {tab})
2. computer (action: "screenshot", tabId: {tab})  # 聚焦指示器是否可见？
3. 重复按Tab键，为每个聚焦元素截图
4. computer (action: "key", text: "Return", tabId: {tab})  # 激活元素
5. computer (action: "screenshot", tabId: {tab})

Workflow: GIF Recording

GIF录制工作流

Record User Flow

录制用户流程

undefined
undefined

Start recording

开始录制

  1. gif_creator (action: "start_recording", tabId: {tab})
  2. computer (action: "screenshot", tabId: {tab}) # First frame
  1. gif_creator (action: "start_recording", tabId: {tab})
  2. computer (action: "screenshot", tabId: {tab}) # 第一帧

Perform actions (each screenshot captures a frame)

执行操作（每次截图捕获一帧）

  1. computer (action: "left_click", coordinate: [x,y], tabId: {tab})
  2. computer (action: "screenshot", tabId: {tab})
  3. computer (action: "type", text: "...", tabId: {tab})
  4. computer (action: "screenshot", tabId: {tab}) ... continue flow ...
  1. computer (action: "left_click", coordinate: [x,y], tabId: {tab})
  2. computer (action: "screenshot", tabId: {tab})
  3. computer (action: "type", text: "...", tabId: {tab})
  4. computer (action: "screenshot", tabId: {tab}) ... 继续执行流程 ...

Stop and export

停止并导出

  1. computer (action: "screenshot", tabId: {tab}) # Last frame
  2. gif_creator (action: "stop_recording", tabId: {tab})
  3. gif_creator (action: "export", download: true, filename: "user-flow.gif", tabId: {tab})
undefined
  1. computer (action: "screenshot", tabId: {tab}) # 最后一帧
  2. gif_creator (action: "stop_recording", tabId: {tab})
  3. gif_creator (action: "export", download: true, filename: "user-flow.gif", tabId: {tab})
undefined

GIF Options

GIF选项

gif_creator (
  action: "export",
  download: true,
  filename: "demo.gif",
  options: {
    showClickIndicators: true,   # Orange circles at clicks
    showActionLabels: true,      # Labels for actions
    showProgressBar: true,       # Progress bar at bottom
    quality: 10                  # 1-30, lower = better quality
  },
  tabId: {tab}
)
gif_creator (
  action: "export",
  download: true,
  filename: "demo.gif",
  options: {
    showClickIndicators: true,   # 点击位置显示橙色圆圈
    showActionLabels: true,      # 显示操作标签
    showProgressBar: true,       # 底部显示进度条
    quality: 10                  # 1-30，数值越小质量越高
  },
  tabId: {tab}
)

Workflow: Debugging

调试工作流

Console Errors

控制台错误

1. read_console_messages (tabId: {tab}, onlyErrors: true)
   → Shows only errors and exceptions

2. read_console_messages (tabId: {tab}, pattern: "TypeError|ReferenceError")
   → Filter specific error types

3. read_console_messages (tabId: {tab}, pattern: "MyApp", clear: true)
   → App-specific logs, clear after reading
1. read_console_messages (tabId: {tab}, onlyErrors: true)
   → 仅显示错误和异常信息

2. read_console_messages (tabId: {tab}, pattern: "TypeError|ReferenceError")
   → 筛选特定类型的错误

3. read_console_messages (tabId: {tab}, pattern: "MyApp", clear: true)
   → 仅显示应用相关日志，读取后清空控制台

Network Requests

网络请求

1. read_network_requests (tabId: {tab}, urlPattern: "/api/")
   → Filter API calls only

2. read_network_requests (tabId: {tab}, limit: 50)
   → Last 50 requests

3. read_network_requests (tabId: {tab}, clear: true)
   → Clear after reading to track new requests
1. read_network_requests (tabId: {tab}, urlPattern: "/api/")
   → 仅筛选API请求

2. read_network_requests (tabId: {tab}, limit: 50)
   → 显示最近50条请求

3. read_network_requests (tabId: {tab}, clear: true)
   → 读取后清空记录，以便追踪新请求

JavaScript Execution

JavaScript执行

javascript_tool (
  action: "javascript_exec",
  text: "document.querySelector('.error-message')?.textContent",
  tabId: {tab}
)
javascript_tool (
  action: "javascript_exec",
  text: "document.querySelector('.error-message')?.textContent",
  tabId: {tab}
)

Test Report Format

测试报告格式

After testing, report findings:
markdown
undefined
测试完成后，按以下格式输出测试结果：
markdown
undefined

UI Test Report

UI测试报告

Page: {url} Date: {date} Tester: {agent}
页面地址： {url} 测试日期： {date} 测试人员： {agent}

Visual Verification

视觉验证

  • Layout matches design spec
  • Responsive at mobile (375px)
  • Responsive at tablet (768px)
  • Responsive at desktop (1440px)
  • 布局与设计规范一致
  • 移动端（375px）响应式正常
  • 平板端（768px）响应式正常
  • 桌面端（1440px）响应式正常

Interaction Testing

交互测试

  • Forms submit correctly
  • Navigation works
  • Error states display properly
  • Loading states visible
  • 表单提交正常
  • 导航功能可用
  • 错误状态显示正确
  • 加载状态可见

Accessibility

无障碍测试

  • All interactive elements keyboard accessible
  • Focus indicators visible
  • Labels on all inputs
  • Alt text on images
  • 所有交互式元素支持键盘访问
  • 聚焦指示器可见
  • 所有输入框均有标签
  • 图片包含替代文本

Issues Found

发现的问题

SeverityIssueScreenshot
High{issue}{screenshot_id}
严重程度问题描述截图ID
高{issue}{screenshot_id}

Recommendations

建议

  • {recommendation 1}
  • {recommendation 2}
undefined
  • {recommendation 1}
  • {recommendation 2}
undefined

Tips

小贴士

  1. Always get tab context first - 
    tabs_context_mcp
    before any operation
  2. Wait after navigation - Pages need time to load
  3. Use 
    find
    for elements     - More reliable than coordinates
  4. Screenshot after each action - Captures state for verification
  5. Clear console/network - Before testing to isolate new issues
  6. Name GIFs descriptively - 
    login-flow.gif
    not 
    recording.gif
  1. 始终先获取标签页上下文 - 执行任何操作前调用 
    tabs_context_mcp
  2. 导航后等待加载 - 页面需要时间完成加载
  3. 使用
    find
    定位元素     - 比坐标定位更可靠
  4. 每次操作后截图 - 捕获状态用于验证
  5. 清空控制台/网络记录 - 测试前清空以隔离新问题
  6. 为GIF起描述性名称 - 例如
    login-flow.gif
    而非
    recording.gif

Common Issues

常见问题

ProblemSolution
Element not foundWait longer, check selector
Click missedUse 
ref
from 
find
instead of coordinates
Page not loadedIncrease wait duration
GIF too largeUse fewer frames, lower quality
Tab invalidCall 
tabs_context_mcp
for fresh IDs
问题解决方案
元素未找到延长等待时间，检查选择器
点击未命中使用
find
返回的
ref
而非坐标
页面未加载完成增加等待时长
GIF文件过大减少帧数，降低质量
标签页无效调用
tabs_context_mcp
获取新ID