web-qa-bot

基于无障碍树的AI驱动Web应用QA自动化测试。

概述

该技能提供Web应用的自动化QA测试工具。它利用浏览器无障碍树进行可靠的元素检测，而非脆弱的CSS选择器。

安装

bash
npm install -g web-qa-bot agent-browser
agent-browser install

命令

快速冒烟测试

bash
web-qa-bot smoke https://example.com

运行基本健康检查：

• - 页面加载成功
• 无控制台错误
• 导航元素存在
• 图片包含alt文本

运行测试套件

bash
web-qa-bot run ./tests/suite.yaml --output report.md

生成PDF报告

bash
web-qa-bot report ./results.json -o report.pdf -f pdf

使用场景

1. 快速站点健康检查

bash

对生产环境URL进行冒烟测试

web-qa-bot smoke https://app.example.com --checks pageLoad,consoleErrors,navigation

2. 部署前QA

创建测试套件并在每次部署前运行：

yaml

tests/critical-paths.yaml

name: 关键路径
baseUrl: https://staging.example.com

tests:
- name: 登录流程
steps:
- goto: /login
- type: { ref: 邮箱, text: test@example.com }
- type: { ref: 密码, text: testpass }
- click: 登录
- expectVisible: 仪表盘
- expectNoErrors: true

bash
web-qa-bot run ./tests/critical-paths.yaml --output qa-report.pdf -f pdf

3. 回归监控

bash

运行测试，发现问题则CI失败

web-qa-bot run ./tests/smoke.yaml || exit 1

4. 编程式测试

typescript
import { QABot } from web-qa-bot

const qa = new QABot({
baseUrl: https://example.com,
headless: true
})

await qa.goto(/)
await qa.click(开始使用)
await qa.snapshot()
qa.expectVisible(注册)
await qa.close()

与agent-browser集成

该工具封装了agent-browser CLI以实现浏览器自动化：

bash

连接到现有浏览器会话

web-qa-bot smoke https://example.com --cdp 18800

以有头模式运行以便调试

web-qa-bot run ./tests/suite.yaml --no-headless

测试结果格式

结果以结构化JSON格式返回：

json
{
name: 冒烟测试,
url: https://example.com,
summary: {
total: 4,
passed: 3,
failed: 0,
warnings: 1
},
tests: [
{
name: 页面加载,
status: pass,
duration: 1234
}
]
}

提示

1. 1. 使用基于角色的选择器 - 比CSS类更可靠
2. 检查控制台错误 - 常能发现隐藏问题
3. 测试两种导航方式 - 直接URL和应用内路由
4. 失败时截图 - 测试套件中自动执行
5. 监控弹窗 - 可能阻塞交互

报告格式

• - Markdown - 默认格式，人类可读
• PDF - 通过ai-pdf-builder生成专业报告
• JSON - 机器可读，适用于CI/CD

故障排除

agent-browser not found

bash npm install -g agent-browser agent-browser install

Element not found

先截图查看可用引用： bash agent-browser snapshot

Timeout waiting for element

增加超时时间或检查元素是否处于加载状态之后： yaml steps: - waitMs: 2000 - waitFor: 加载中 # 等待加载出现 - waitFor: 内容 # 然后等待内容

链接

• - GitHub
• npm