名称： web-qa-bot
描述： 基于 AI 的 Web 应用自动化质量保证工具。支持冒烟测试、无障碍访问测试和视觉回归测试。兼容 Cursor、Claude、ChatGPT、Copilot。支持 Vibe-coding。
版本： 0.1.3
作者： NextFrontierBuilds
关键词： [automated-qa, ai-testing, smoke-test, accessibility-testing, visual-regression, ci-testing, playwright-alternative, e2e-testing, qa, testing, automation, ai, ai-agent, vibe-coding, cursor, claude, chatgpt, copilot, github-copilot, mcp, llm, devtools, ai-tools, developer-tools, typescript, moltbot, openclaw]

web-qa-bot

基于浏览器无障碍树进行测试的 AI 驱动 Web 应用质量保证自动化工具。

概述

本工具提供了一套用于 Web 应用自动化 QA 测试的工具。它使用浏览器的无障碍树进行可靠的元素检测，避免了脆弱的 CSS 选择器。

安装

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

命令

快速冒烟测试

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

运行基本健康检查：
- 页面成功加载
- 无控制台错误
- 导航元素存在
- 图片包含替代文本

运行测试套件

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

生成 PDF 报告

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

使用场景

1. 快速站点健康检查

# 对生产环境 URL 进行冒烟测试
web-qa-bot smoke https://app.example.com --checks pageLoad,consoleErrors,navigation

2. 部署前质量保证

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

# tests/critical-paths.yaml
名称： 关键路径
baseUrl: https://staging.example.com

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

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

3. 监控回归问题

# 运行测试，如果发现问题则使 CI 失败
web-qa-bot run ./tests/smoke.yaml || exit 1

4. 编程式测试

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 以进行浏览器自动化：

# 连接到现有的浏览器会话
web-qa-bot smoke https://example.com --cdp 18800

# 以非无头模式运行以便调试
web-qa-bot run ./tests/suite.yaml --no-headless

测试结果格式

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

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

使用技巧

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

报告格式

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

故障排除

"agent-browser 未找到"

npm install -g agent-browser
agent-browser install

"未找到元素"

先截取快照以查看可用的引用：

agent-browser snapshot

"等待元素超时"

增加超时时间或检查元素是否处于加载状态后：

steps:
  - waitMs: 2000
  - waitFor: "加载中" # 等待加载提示出现
  - waitFor: "内容" # 然后等待内容出现

相关链接

• GitHub
• npm