# 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 构建
- 响应式设计，支持不同屏幕尺寸
- 深色模式支持
- 无需外部依赖，完全自包含
- 模拟真实的网络延迟和错误

## 扩展建议

如需添加新的测试场景，建议考虑以下方面：
- 特定行业的业务流程
- 更复杂的数据可视化交互
- 多媒体内容处理
- 实时协作功能
- 移动端特有的交互模式

每个新页面都应该：
- 有明确的测试目标
- 包含多种难度级别的任务
- 提供清晰的状态反馈
- 模拟真实的用户场景