VibeCheck

VibeCheck Web 测试工具

1. 录制新的测试流程： 用自然语言描述用户操作流程，代理将在 AI 指导下与浏览器（使用 Playwright）交互，生成可重复执行的测试脚本（JSON 格式）。

2. 执行现有测试： 运行之前录制的测试脚本，进行回归测试，确保新代码更改没有破坏现有功能。

3. 发现潜在的测试步骤： 爬取网站，通过视觉和 DOM 结构分析页面，并利用 LLM 为不同页面建议相关的测试步骤。

演示

功能

• MCP 集成： 无缝集成 Cursor/Windsurf/Github Copilot/Roo Code。

• AI 辅助测试录制： 通过自然语言描述生成基于 Playwright 的测试脚本（自动化模式）。

• 确定性测试执行： 使用 Playwright 可靠地运行录制的 JSON 测试文件。

• AI 驱动的测试发现： 爬取网站并利用任何 LLM（符合 OpenAI 格式）为发现的页面建议测试步骤。

• 回归测试： 轻松运行现有测试套件以捕获回归问题。

• 自动化反馈循环： 执行结果（包括失败、截图、控制台日志）会返回，直接反馈给 AI 助手。

• 自我修复： 现有测试在代码更改时会自动修复，无需手动更新。

• UI 测试： 支持 Playwright 无法直接处理的 UI 测试。例如，检查 div 中的文本是否溢出。

• 视觉回归测试： 结合传统的 pixelmatch 和视觉 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/视觉信息，并将生成的测试步骤保存到 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. 克隆仓库：

2. 创建虚拟环境（推荐）：

3. 安装依赖：

4. 安装 Playwright 浏览器：

配置

1. 将项目根目录下的 .env.example 文件重命名为 .env。

2. 添加您的 LLM API 密钥和其他必要信息：
• 将 YOUR_LLM_API_KEY 替换为您的实际密钥。

添加 MCP 服务器

使用

• 录制测试：

"录制测试：访问 https://practicetestautomation.com/practice-test-login/，在用户名字段中输入 'student'，在密码字段中输入 'Password123'，点击提交按钮，并验证文本 'Congratulations student' 是否可见。"

• （代理将自动执行这些操作，并将 test_....json 文件保存到 output/ 目录中。）

• 执行测试：

"运行回归测试 output/test_practice_test_login_20231105_103000.json"

• （代理将执行指定文件中的步骤，并报告 PASS/FAIL 状态及错误详情。）

• 发现测试步骤：

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

• （代理将爬取网站，分析页面，并为每个页面返回建议的测试步骤。）

• 列出录制的测试：

"列出可用的录制 Web 测试。"

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

• 录制的测试： 以 JSON 文件形式保存在 output/ 目录中（格式见 test_schema.md）。

• 执行结果： 以 JSON 对象形式返回运行摘要（状态、错误、证据路径）。完整结果也会保存到 output/execution_result_....json。

• 发现结果： 以 JSON 对象形式返回发现的 URL 和建议的步骤。完整结果保存到 output/discovery_results_....json。

灵感来源

• Browser Use：DOM 上下文树的生成部分大量借鉴了他们的工作，并进行了修改以支持静态/动态/视觉元素。特别感谢他们对开源社区的贡献。

贡献

许可证