# ui-testing

> UI 测试技能，用于测试 Web 应用的用户界面和交互功能

- Author: Manager System Developer
- Repository: jiuzheyangba24/manager-system
- Version: 20260121164953
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/jiuzheyangba24/manager-system
- Web: https://mule.run/skillshub/@@jiuzheyangba24/manager-system~ui-testing:20260121164953

---

---
name: ui-testing
description: UI 测试技能，用于测试 Web 应用的用户界面和交互功能
---

# UI 测试技能

本技能用于系统性测试 Web 应用的用户界面。

## 测试范围

### 1. 视觉测试
- 布局是否正确
- 颜色和字体是否符合设计
- 图片是否正确显示
- 响应式设计是否正常

### 2. 交互测试
- 按钮点击是否有正确响应
- 表单输入是否正常工作
- 导航是否正确跳转
- 动画是否流畅

### 3. 功能测试
- 核心功能是否正常
- 错误状态是否正确显示
- 加载状态是否有反馈
- 空状态是否有提示

## 测试流程

### 准备阶段
1. 启动开发服务器 (`npm run dev`)
2. 确认应用可以正常访问
3. 准备测试用例

### 执行阶段
1. 使用浏览器工具访问应用
2. 按照测试用例逐一验证
3. 记录问题和截图

### 报告阶段
1. 汇总测试结果
2. 描述发现的问题
3. 提供修复建议

## 测试用例模板

```markdown
## 测试用例: [功能名称]

**前置条件**: [测试前需要满足的条件]

**测试步骤**:
1. [步骤1]
2. [步骤2]
3. [步骤3]

**预期结果**: [期望看到的结果]

**实际结果**: [实际观察到的结果]

**状态**: ✅ 通过 / ❌ 失败
```

## 常见测试场景

### 登录页面
- [ ] 输入正确凭据能成功登录
- [ ] 输入错误凭据显示错误提示
- [ ] 表单验证正常工作
- [ ] 记住密码功能正常

### 列表页面
- [ ] 数据正确加载和显示
- [ ] 分页/滚动加载正常
- [ ] 筛选功能正常
- [ ] 空列表显示提示

### 表单页面
- [ ] 必填字段验证
- [ ] 数据格式验证
- [ ] 提交成功/失败反馈
- [ ] 取消操作正常

### 导航
- [ ] 底部导航切换正常
- [ ] 页面跳转无错误
- [ ] 返回按钮正常工作
- [ ] 深度链接可访问

## 浏览器兼容性

测试目标浏览器:
- Chrome (主要)
- Safari (移动端)
- Firefox
- Edge

## 性能指标

| 指标 | 目标值 |
|------|--------|
| 首屏加载 | < 2秒 |
| 交互响应 | < 100ms |
| 动画帧率 | 60fps |