210 lines
5.6 KiB
Markdown
210 lines
5.6 KiB
Markdown
# Page Use Agent 测试页面
|
||
|
||
这个目录包含了一系列专门设计的测试页面，用于验证 Page Use Agent 的各种能力。每个页面都模拟了真实 Web 应用中的常见交互模式和边界情况。
|
||
|
||
## 测试页面列表
|
||
|
||
### 1. 表单测试页面 (`/test-pages/form`)
|
||
**测试目标：** 表单填写、验证和提交能力
|
||
|
||
**包含功能：**
|
||
- 各种输入类型（文本、邮箱、密码、数字、日期、电话、URL）
|
||
- 下拉选择框和复选框
|
||
- 实时表单验证
|
||
- 异步提交和错误处理
|
||
- 重置表单功能
|
||
|
||
**测试任务示例：**
|
||
- 填写完整的用户注册表单并提交
|
||
- 故意输入错误信息触发验证错误
|
||
- 测试密码确认功能
|
||
- 尝试提交空表单查看错误提示
|
||
|
||
### 2. 导航测试页面 (`/test-pages/navigation`)
|
||
**测试目标：** 复杂导航和交互元素处理
|
||
|
||
**包含功能：**
|
||
- 顶部导航栏和下拉菜单
|
||
- 面包屑导航
|
||
- 标签页切换
|
||
- 模态框弹窗
|
||
- 通知系统
|
||
- 用户菜单
|
||
|
||
**测试任务示例：**
|
||
- 点击产品下拉菜单选择不同选项
|
||
- 切换不同的标签页查看内容
|
||
- 打开和关闭模态框
|
||
- 点击面包屑导航
|
||
- 添加新通知并标记为已读
|
||
|
||
### 3. 列表测试页面 (`/test-pages/list`)
|
||
**测试目标：** 列表操作、搜索、过滤和分页
|
||
|
||
**包含功能：**
|
||
- 产品列表展示（网格和列表视图）
|
||
- 搜索功能
|
||
- 类别过滤
|
||
- 排序功能
|
||
- 分页导航
|
||
- 加载状态和骨架屏
|
||
|
||
**测试任务示例：**
|
||
- 搜索特定产品名称
|
||
- 按价格排序产品列表
|
||
- 切换网格和列表视图
|
||
- 使用分页浏览不同页面
|
||
- 按类别过滤产品
|
||
|
||
### 4. 复杂交互测试页面 (`/test-pages/complex`)
|
||
**测试目标：** 多步骤流程和状态管理
|
||
|
||
**包含功能：**
|
||
- 购物车管理（添加、删除、修改数量）
|
||
- 多步骤向导流程
|
||
- 步骤验证和导航
|
||
- 订单确认流程
|
||
- 异步提交处理
|
||
|
||
**测试任务示例：**
|
||
- 完成完整的购买流程
|
||
- 在向导中前进和后退
|
||
- 修改购物车中的商品数量
|
||
- 添加新商品到购物车
|
||
- 提交订单并处理可能的错误
|
||
|
||
### 5. 错误处理测试页面 (`/test-pages/errors`)
|
||
**测试目标：** 错误识别和重试机制
|
||
|
||
**包含功能：**
|
||
- 网络连接错误模拟
|
||
- 表单验证错误
|
||
- 权限不足错误
|
||
- 请求超时错误
|
||
- 服务器内部错误
|
||
- 文件上传错误处理
|
||
|
||
**测试任务示例：**
|
||
- 触发网络错误并重试
|
||
- 提交不完整表单查看验证错误
|
||
- 测试权限验证（用户名需为"admin"）
|
||
- 上传超大文件触发错误
|
||
- 处理各种错误场景的重试逻辑
|
||
|
||
### 6. 异步操作测试页面 (`/test-pages/async`)
|
||
**测试目标：** 等待和异步操作处理
|
||
|
||
**包含功能：**
|
||
- 文件上传进度条
|
||
- 实时数据更新
|
||
- 数据加载骨架屏
|
||
- 长时间运行任务
|
||
- 进度跟踪和日志显示
|
||
|
||
**测试任务示例：**
|
||
- 启动文件上传并等待完成
|
||
- 开启实时数据更新功能
|
||
- 加载数据并等待所有项目完成
|
||
- 执行长时间任务并监控进度
|
||
- 处理上传失败的重试
|
||
|
||
## 测试任务集合
|
||
|
||
### 基础操作测试
|
||
1. **导航测试**
|
||
- 前往表单测试页面
|
||
- 返回测试页面首页
|
||
- 前往导航测试页面
|
||
|
||
2. **表单填写测试**
|
||
- 填写用户注册表单的所有必填字段
|
||
- 提交表单并等待结果
|
||
- 重置表单并重新填写
|
||
|
||
3. **搜索和过滤测试**
|
||
- 在列表页面搜索"Apple"
|
||
- 按价格降序排列产品
|
||
- 过滤显示"手机"类别的产品
|
||
|
||
### 中级交互测试
|
||
4. **购物流程测试**
|
||
- 前往复杂交互页面
|
||
- 添加商品到购物车
|
||
- 完成多步骤购买流程
|
||
- 填写个人信息、地址和支付信息
|
||
- 提交订单
|
||
|
||
5. **导航和菜单测试**
|
||
- 点击产品下拉菜单选择"手机"
|
||
- 切换到"订单管理"标签页
|
||
- 打开模态框并关闭
|
||
- 添加新的面包屑导航
|
||
|
||
6. **异步操作测试**
|
||
- 启动文件上传
|
||
- 开启实时数据更新
|
||
- 执行长时间任务并等待完成
|
||
|
||
### 高级错误处理测试
|
||
7. **错误恢复测试**
|
||
- 触发网络连接错误
|
||
- 重试失败的操作
|
||
- 处理表单验证错误
|
||
- 测试权限验证（用户名输入"admin"）
|
||
|
||
8. **边界情况测试**
|
||
- 提交空表单查看错误
|
||
- 上传不支持的文件类型
|
||
- 在向导中跳过必填步骤
|
||
- 处理超时错误
|
||
|
||
### 综合场景测试
|
||
9. **完整用户流程**
|
||
- 浏览产品列表
|
||
- 搜索并过滤产品
|
||
- 添加产品到购物车
|
||
- 完成购买流程
|
||
- 处理可能出现的错误
|
||
|
||
10. **压力和边界测试**
|
||
- 快速连续点击按钮
|
||
- 在加载过程中尝试其他操作
|
||
- 测试各种错误恢复场景
|
||
- 验证所有异步操作的完成
|
||
|
||
## 使用说明
|
||
|
||
### 对于 Agent 开发者
|
||
- 每个页面都包含了详细的状态指示器和反馈信息
|
||
- 错误信息清晰明确，便于 Agent 理解和处理
|
||
- 异步操作都有明确的完成标志
|
||
- 所有交互元素都有适当的可访问性标记
|
||
|
||
### 对于测试人员
|
||
- 可以按照测试任务逐一验证 Agent 的能力
|
||
- 每个页面都是独立的，可以单独测试
|
||
- 包含了各种真实场景的模拟
|
||
- 错误场景是随机的，确保测试的真实性
|
||
|
||
### 技术特性
|
||
- 使用 React + TypeScript 构建
|
||
- 响应式设计，支持不同屏幕尺寸
|
||
- 深色模式支持
|
||
- 无需外部依赖，完全自包含
|
||
- 模拟真实的网络延迟和错误
|
||
|
||
## 扩展建议
|
||
|
||
如需添加新的测试场景，建议考虑以下方面：
|
||
- 特定行业的业务流程
|
||
- 更复杂的数据可视化交互
|
||
- 多媒体内容处理
|
||
- 实时协作功能
|
||
- 移动端特有的交互模式
|
||
|
||
每个新页面都应该：
|
||
- 有明确的测试目标
|
||
- 包含多种难度级别的任务
|
||
- 提供清晰的状态反馈
|
||
- 模拟真实的用户场景
|