feat: init

pages/test-pages/README.md

@@ -0,0 +1,209 @@
+# 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 构建
+- 响应式设计，支持不同屏幕尺寸
+- 深色模式支持
+- 无需外部依赖，完全自包含
+- 模拟真实的网络延迟和错误
+
+## 扩展建议
+
+如需添加新的测试场景，建议考虑以下方面：
+- 特定行业的业务流程
+- 更复杂的数据可视化交互
+- 多媒体内容处理
+- 实时协作功能
+- 移动端特有的交互模式
+
+每个新页面都应该：
+- 有明确的测试目标
+- 包含多种难度级别的任务
+- 提供清晰的状态反馈
+- 模拟真实的用户场景