Web 应用测试

重要: 本项目已内置 browser_action 工具支持完整的 Playwright 自动化。以下指南提供测试最佳实践和决策框架。

决策树：选择测试方法

用户任务 → 是静态 HTML? ├─ 是 → 直接读取 HTML 文件识别选择器 │ ├─ 成功 → 使用选择器编写测试 │ └─ 失败 → 当作动态应用处理（见下方） │ └─ 否（动态应用）→ 服务器是否已运行? ├─ 否 → 先启动开发服务器 │ 使用 run_command 或 run_persistent_command 启动 │ └─ 是 → 侦察后行动模式: 1. 导航并等待 networkidle 2. 截图或检查 DOM 3. 从渲染状态识别选择器 4. 使用发现的选择器执行操作

使用内置 browser_action 工具

基础流程

1. browser_action(action="navigate", url="http://localhost:3000")
2. browser_action(action="screenshot") # 查看当前页面
3. browser_action(action="get_elements", selector="button") # 发现元素
4. browser_action(action="click", selector="text=提交") # 交互
5. browser_action(action="screenshot") # 验证结果

表单测试

1. browser_action(action="navigate", url="http://localhost:3000/login")
2. browser_action(action="type", selector="#username", text="testuser")
3. browser_action(action="type", selector="#password", text="password123")
4. browser_action(action="click", selector="button[type=submit]")
5. browser_action(action="screenshot") # 验证登录结果

侦察后行动模式

这是测试动态 Web 应用的核心模式：

1. 侦察阶段

导航到目标页面

browser_action(action="navigate", url="目标URL")

等待页面完全加载（关键！）

browser_action(action="wait", selector="body", timeout=5000)

截图查看当前状态

browser_action(action="screenshot")

获取页面内容和元素

browser_action(action="get_content") browser_action(action="get_elements", selector="button, a, input")

2. 识别选择器

从侦察结果中提取可用选择器：

• 文本选择器: text=按钮文本

• 角色选择器: role=button[name="提交"]

• CSS 选择器: #id , .class , [data-testid="xxx"]

• 优先级: data-testid > role > text > CSS

3. 执行操作

使用发现的选择器进行交互和验证。

常见测试场景

页面加载验证

1. 导航到 URL
2. 等待关键元素出现
3. 截图确认
4. 检查页面标题/内容

用户交互流程

1. 导航到起始页
2. 填写表单/点击按钮
3. 等待页面响应
4. 截图验证结果
5. 检查 URL 变化/内容更新

响应式测试

1. 设置不同视口大小
2. 截图对比布局变化
3. 验证移动端适配

控制台错误检查

browser_action(action="console") # 捕获控制台日志

检查是否有 JavaScript 错误

browser_action 支持的所有 action

action 用途

navigate

导航到 URL

click

点击元素

type

在输入框中输入文本

screenshot

截取页面截图

scroll

滚动页面（direction: up/down/left/right）

get_content

获取页面 HTML 内容

evaluate

执行 JavaScript 代码

wait

等待元素出现

get_elements

获取匹配选择器的元素列表

press_key

按下键盘按键

select_option

选择下拉选项

console

获取控制台日志

hover

悬停在元素上

close

关闭浏览器会话

常见陷阱

陷阱 解决方案

在动态应用加载完成前检查 DOM 始终等待 networkidle 或关键元素

使用脆弱的 CSS 选择器 优先用 data-testid 或 role

忽略异步操作 操作后等待响应完成再验证

不截图就判断结果 关键步骤都截图，用视觉确认

硬编码等待时间 用条件等待（元素出现/消失）替代

最佳实践

• 始终先侦察再行动 — 不要假设 DOM 结构

• 使用描述性选择器 — text= , role= , CSS, ID

• 添加适当等待 — wait 动作或 timeout 参数

• 关键步骤截图 — 视觉验证比 DOM 检查更可靠

• 检查控制台日志 — 使用 action="console" 捕获 JavaScript 错误

• 测试边界情况 — 空输入、超长文本、特殊字符

• 使用 evaluate 执行自定义 JS — 复杂验证逻辑可通过 action="evaluate"

• script 参数实现