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)
测试目标： 等待和异步操作处理
包含功能：
- 文件上传进度条
- 实时数据更新
- 数据加载骨架屏
- 长时间运行任务
- 进度跟踪和日志显示
测试任务示例：
- 启动文件上传并等待完成
- 开启实时数据更新功能
- 加载数据并等待所有项目完成
- 执行长时间任务并监控进度
- 处理上传失败的重试
测试任务集合
基础操作测试
-
导航测试
- 前往表单测试页面
- 返回测试页面首页
- 前往导航测试页面
-
表单填写测试
- 填写用户注册表单的所有必填字段
- 提交表单并等待结果
- 重置表单并重新填写
-
搜索和过滤测试
- 在列表页面搜索"Apple"
- 按价格降序排列产品
- 过滤显示"手机"类别的产品
中级交互测试
-
购物流程测试
- 前往复杂交互页面
- 添加商品到购物车
- 完成多步骤购买流程
- 填写个人信息、地址和支付信息
- 提交订单
-
导航和菜单测试
- 点击产品下拉菜单选择"手机"
- 切换到"订单管理"标签页
- 打开模态框并关闭
- 添加新的面包屑导航
-
异步操作测试
- 启动文件上传
- 开启实时数据更新
- 执行长时间任务并等待完成
高级错误处理测试
-
错误恢复测试
- 触发网络连接错误
- 重试失败的操作
- 处理表单验证错误
- 测试权限验证（用户名输入"admin"）
-
边界情况测试
- 提交空表单查看错误
- 上传不支持的文件类型
- 在向导中跳过必填步骤
- 处理超时错误
综合场景测试
-
完整用户流程
- 浏览产品列表
- 搜索并过滤产品
- 添加产品到购物车
- 完成购买流程
- 处理可能出现的错误
-
压力和边界测试
- 快速连续点击按钮
- 在加载过程中尝试其他操作
- 测试各种错误恢复场景
- 验证所有异步操作的完成
使用说明
对于 Agent 开发者
- 每个页面都包含了详细的状态指示器和反馈信息
- 错误信息清晰明确，便于 Agent 理解和处理
- 异步操作都有明确的完成标志
- 所有交互元素都有适当的可访问性标记
对于测试人员
- 可以按照测试任务逐一验证 Agent 的能力
- 每个页面都是独立的，可以单独测试
- 包含了各种真实场景的模拟
- 错误场景是随机的，确保测试的真实性
技术特性
- 使用 React + TypeScript 构建
- 响应式设计，支持不同屏幕尺寸
- 深色模式支持
- 无需外部依赖，完全自包含
- 模拟真实的网络延迟和错误
扩展建议
如需添加新的测试场景，建议考虑以下方面：
- 特定行业的业务流程
- 更复杂的数据可视化交互
- 多媒体内容处理
- 实时协作功能
- 移动端特有的交互模式
每个新页面都应该：
- 有明确的测试目标
- 包含多种难度级别的任务
- 提供清晰的状态反馈
- 模拟真实的用户场景