Web-QA

VibeShift Web 测试员

该项目提供了一个人工智能代理，旨在简化 Web 测试工作流程，特别是对于使用 GitHub Copilot、Cursor、Roo Code 等人工智能编码助手的开发人员。它通过**MCP（机器命令协议）**直接集成到这些助手中，允许您使用自然语言提示自动执行测试记录、执行和发现。

**问题：**使用AI助手生成代码后，手动测试Web应用程序既耗时又容易出错。此外，AI驱动的代码更改可能会无意中导致之前正常运行的功能出现回归。

**解决方案：**此工具通过使您的 AI 编码助手能够执行以下操作来弥补差距：

1. **记录新的测试流程：**用自然语言描述用户旅程，代理将在AI指导下与浏览器交互（使用Playwright）以生成可重现的测试脚本（JSON格式）。
2. **执行现有测试：**运行以前记录的测试脚本来执行回归测试，确保新的代码更改不会破坏现有功能。
3. **发现潜在的测试步骤：**爬取网站，使用视觉和 DOM 结构分析页面，并请 LLM 针对不同页面建议相关的测试步骤。

这会创建一个更紧密的反馈循环，自动化测试过程并允许 AI 助手（和开发人员）快速识别和修复问题或回归。

演示（点击播放这些视频）

特征

• **MCP 集成：**与 Cursor/Windsurf/Github Copilot/Roo Code 无缝集成
• **人工智能辅助测试记录：**根据自然语言描述生成基于 Playwright 的测试脚本（自动模式）。
• **确定性测试执行：**使用 Playwright 可靠地运行记录的 JSON 测试文件。
• **人工智能测试发现：**抓取网站并利用任何 LLM（符合 openai 格式）为发现的页面建议测试步骤。
• **回归测试：**轻松运行现有的测试套件来捕捉回归。
• **自动反馈循环：**返回执行结果（包括失败、屏幕截图、控制台日志），向AI助手提供直接反馈。
• **自我修复：**现有测试可在代码变更时自我修复。无需手动更新。
• UI 测试： Playwright 不直接支持的 UI 测试也支持。例如， Check if the text is overflowing in the div
• 视觉回归测试：使用传统的像素匹配和视觉 LLM 方法。

工作原理

1. **用户：**提示他们的 AI 编码助手（例如，“为登录流程记录测试”、“运行回归测试‘test_login.json’”）。
2. **AI编码代理：**识别意图并使用MCP调用MCP Server提供的相应工具。
3. **MCP 服务器：**将请求路由到相应的函数（ record_test_flow 、 run_regression_test 、 discover_test_flows 、 list_recorded_tests ）。
4. Web 测试代理：
   • 记录： WebAgent （自动模式）与 LLM 交互以规划步骤，通过BrowserController （Playwright）控制浏览器，处理 HTML/Vision，并将生成的测试步骤保存到output/目录中的 JSON 文件中。
   • 执行： TestExecutor加载指定的JSON测试文件，根据记录的步骤使用BrowserController与浏览器交互，并捕获结果、截图和控制台日志。
   • 发现： CrawlerAgent使用BrowserController和LLMClient来抓取页面并建议测试步骤。
5. 浏览器： Playwright 驱动实际的浏览器交互。
6. **反馈：**结果（成功/失败、文件路径、错误消息、发现的步骤）通过 MCP 服务器返回给 AI 编码助手，然后呈现给用户。

入门

先决条件

• Python 3.10+
• 获得任何 LLM 学位（在我的测试中，gemini 2.0 flash 效果最好，免费）
• MCP 安装（ pip install mcp[cli] ）
• 安装了 Playwright 浏览器（ playwright install ）

安装

1. 克隆存储库：
   git clone <repository-url> cd <repository-name>
2. 创建虚拟环境（推荐）：
   python -m venv venv source venv/bin/activate # Linux/macOS # venv\Scripts\activate # Windows
3. 安装依赖项：
   pip install -r requirements.txt
4. 安装 Playwright 浏览器：
   playwright install --with-deps # Installs browsers and OS dependencies

配置

1. 将项目根目录中的 .env.example 重命名为 .env 文件。
2. 添加您的 LLM API 密钥和其他必要的详细信息：
   # .env LLM_API_KEY="YOUR_LLM_API_KEY"
   • 用您的实际密钥替换YOUR_LLM_API_KEY 。

添加 MCP 服务器

将其添加到您的 mcp 配置中：

当您与 AI 编码助手交互时，请保持此服务器运行。

用法

通过支持 MCP 的 AI 编码助手使用自然语言与代理进行交互。

例子：

• 记录测试：

  “记录测试：转到https://practicetestautomation.com/practice-test-login/ ，在用户名字段中输入‘student’，在密码字段中输入‘Password123’，单击提交按钮，并验证文本‘Congratulations student’是否可见。”

  • （代理将自动执行这些操作并在output/中保存一个test_....json文件）
• 执行测试：

  “运行回归测试output/test_practice_test_login_20231105_103000.json ”

  • （代理将执行指定文件中的步骤并报告 PASS/FAIL 状态以及错误和详细信息。）
• 发现测试步骤：

  “从https://practicetestautomation.com/practice/开始发现潜在的测试步骤”

  • （代理将抓取网站、分析页面并返回每个页面的建议测试步骤。）
• 列出已记录的测试：

  “列出可用的已记录的网络测试。”

  • （代理将返回在output/目录中找到的.json文件列表。）

输出：

• **记录的测试：**保存为output/目录中的 JSON 文件（有关格式，请参阅test_schema.md ）。
• **执行结果：**以 JSON 对象形式返回，其中包含运行概要（状态、错误、证据路径）。完整结果也保存到output/execution_result_....json 。
• **发现结果：**以 JSON 对象形式返回，其中包含发现的 URL 和建议步骤。完整结果保存在output/discovery_results_....json 。

灵感

• 浏览器使用：DOM 上下文树的生成深受他们的启发，并进行了修改以适应静态/动态/可视化元素。特别感谢他们对开源的贡献。

贡献

欢迎贡献代码！请参阅CONTRIBUTING.md了解如何开始使用、报告问题以及提交 Pull Request。

执照

该项目根据APACHE-2.0许可。