| name | test-ui |
| description | 使用Playwright进行UI测试，检查页面布局、样式和交互体验。Invoke when user needs to test user interface, layout, or visual elements. |
UI测试技能
使用Playwright工具进行UI测试，检查页面布局、样式和交互体验。
适用场景
- 检查UI布局和样式
- 测试页面响应式设计
- 测试交互体验和动画效果
- 测试表单验证和错误提示
- 测试可访问性
- 测试多浏览器兼容性
测试内容
布局测试
- 验证页面布局是否符合设计稿
- 测试元素位置和间距
- 测试响应式布局（不同屏幕尺寸）
- 测试滚动和分页
样式测试
- 验证字体、颜色、大小
- 测试按钮、链接、表单样式
- 测试图标和图片显示
- 测试主题切换（如有）
交互测试
- 测试按钮点击和悬停效果
- 测试表单输入和验证
- 测试弹窗和模态框
- 测试下拉菜单和导航
- 测试动画和过渡效果
可访问性测试
- 测试键盘导航
- 测试屏幕阅读器支持
- 测试对比度和可读性
- 测试焦点管理和标签
使用时机
- UI开发完成后
- 设计稿实现后
- UI调整后
- 多浏览器兼容性测试
执行方式
直接使用 Playwright MCP 工具进行自动化测试，无需额外脚本：
基本测试流程
- 导航到测试页面：使用
mcp_Playwright_playwright_navigate
- 检查页面元素和布局：使用
mcp_Playwright_playwright_get_visible_html、mcp_Playwright_playwright_screenshot
- 测试交互操作：使用
mcp_Playwright_playwright_click、mcp_Playwright_playwright_fill、mcp_Playwright_playwright_hover
- 截图记录UI状态：使用
mcp_Playwright_playwright_screenshot
- 测试不同屏幕尺寸：使用
mcp_Playwright_playwright_resize
- 生成测试报告：根据测试结果手动生成 Markdown 格式报告
常用 Playwright MCP 工具
导航工具
mcp_Playwright_playwright_navigate - 导航到指定 URLmcp_Playwright_playwright_go_back - 返回上一页mcp_Playwright_playwright_go_forward - 前进到下一页
交互工具
mcp_Playwright_playwright_click - 点击元素mcp_Playwright_playwright_fill - 填充输入框mcp_Playwright_playwright_select - 选择下拉框mcp_Playwright_playwright_hover - 悬停元素（测试悬停效果）mcp_Playwright_playwright_press_key - 按键（测试键盘导航）
验证工具
mcp_Playwright_playwright_get_visible_text - 获取页面可见文本mcp_Playwright_playwright_get_visible_html - 获取页面 HTML（检查样式和布局）mcp_Playwright_playwright_screenshot - 截图（对比UI效果）
视口调整工具
mcp_Playwright_playwright_resize - 调整浏览器窗口大小（测试响应式布局）mcp_Playwright_playwright_resize - 使用设备预设（如 iPhone、iPad、Android 等）
HTTP 请求工具
mcp_Playwright_playwright_get - GET 请求mcp_Playwright_playwright_post - POST 请求mcp_Playwright_playwright_put - PUT 请求mcp_Playwright_playwright_delete - DELETE 请求
其他工具
mcp_Playwright_playwright_evaluate - 执行 JavaScript（检查样式、计算元素位置等）mcp_Playwright_playwright_console_logs - 获取控制台日志（检查UI错误）mcp_Playwright_playwright_custom_user_agent - 设置自定义 User Agent（测试不同浏览器）
UI 测试示例
布局测试
1. 使用 mcp_Playwright_playwright_navigate 导航到页面
2. 使用 mcp_Playwright_playwright_screenshot 截取完整页面
3. 使用 mcp_Playwright_playwright_evaluate 检查元素位置和尺寸
4. 对比设计稿验证布局
样式测试
1. 使用 mcp_Playwright_playwright_navigate 导航到页面
2. 使用 mcp_Playwright_playwright_evaluate 检查字体、颜色等样式
3. 使用 mcp_Playwright_playwright_screenshot 截取关键元素
4. 对比设计规范验证样式
交互测试
1. 使用 mcp_Playwright_playwright_navigate 导航到页面
2. 使用 mcp_Playwright_playwright_hover 悬停元素，截图记录悬停效果
3. 使用 mcp_Playwright_playwright_click 点击元素，验证交互效果
4. 使用 mcp_Playwright_playwright_screenshot 截取交互后的状态
响应式测试
1. 使用 mcp_Playwright_playwright_navigate 导航到页面
2. 使用 mcp_Playwright_playwright_resize 设置不同屏幕尺寸（桌面端、笔记本、平板、手机）
3. 使用 mcp_Playwright_playwright_screenshot 截取每个尺寸的布局
4. 验证响应式布局是否正常
可访问性测试
1. 使用 mcp_Playwright_playwright_navigate 导航到页面
2. 使用 mcp_Playwright_playwright_press_key 模拟 Tab 键导航
3. 使用 mcp_Playwright_playwright_evaluate 检查焦点顺序和 ARIA 标签
4. 验证可访问性标准
## 测试报告路径
`doc/{业务名称}/测试报告/UI测试/{测试页面名称}_{时间戳}.md`
## 测试报告内容
### 测试概要
- 测试范围
- 测试环境
- 浏览器信息
- 测试时间
- 测试人员
### UI测试项
- 测试项编号
- 测试标题
- 测试类型（布局/样式/交互/可访问性）
- 测试步骤
- 预期结果
- 实际结果
- 测试状态（通过/失败）
- 截图对比（如有）
### 响应式测试
- 屏幕尺寸
- 布局状态
- 截图
- 测试结果
### 测试结果统计
- 测试项总数
- 通过数量
- 失败数量
- 通过率
### 问题列表
- 问题编号
- 问题描述
- 问题类型
- 严重程度
- 复现步骤
- 截图
## 注意事项
1. 确保设计稿和UI规范文档齐全
2. 测试不同浏览器和屏幕尺寸
3. 注意加载状态和动画效果
4. 测试表单验证和错误提示
5. 检查可访问性标准
6. 截图保存关键UI状态
7. 对比设计稿和实际效果
