Menu
使用Playwright进行UI测试，检查页面布局、样式和交互体验。Invoke when user needs to test user interface, layout, or visual elements.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Complete PRD template with AI-friendly markers. Use for product requirement docs: includes overview, requirements, processes, data, interfaces, acceptance. AI can quickly identify [AI] marked sections for implementation.
Provides API documentation template and standards for RESTful API, gRPC, and other interfaces. Includes request/response format, parameter definitions, error codes, and Markdown documentation structure. Invoke when generating API documentation or interface specifications.
Provides database design templates and documentation structure. Invoke when designing database schemas, creating database design documents, or generating SQL scripts.
Provides common Java coding standards including hutool tool usage and Lombok annotations. Invoke when generating Java code (DO, VO, Service, Controller) or applying coding standards.
Provides Java Controller layer standards including RESTful API design, request mapping, parameter validation, and response handling. Invoke when generating Controller files or RESTful API endpoints.
Provides Java DAO layer standards including interface specifications, MyBatis XML templates, method naming, parameter annotations, and CRUD operation patterns. Invoke when generating DAO files or MyBatis mappers.
| name | test-ui |
| description | 使用Playwright进行UI测试，检查页面布局、样式和交互体验。Invoke when user needs to test user interface, layout, or visual elements. |
使用Playwright工具进行UI测试，检查页面布局、样式和交互体验。
直接使用 Playwright MCP 工具进行自动化测试，无需额外脚本：
mcp_Playwright_playwright_navigatemcp_Playwright_playwright_get_visible_html、mcp_Playwright_playwright_screenshotmcp_Playwright_playwright_click、mcp_Playwright_playwright_fill、mcp_Playwright_playwright_hovermcp_Playwright_playwright_screenshotmcp_Playwright_playwright_resize导航工具
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（测试不同浏览器）布局测试
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. 对比设计稿和实际效果