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 参数实现