AI导哈

自动化测试生成工具

一个利用多代理工作流从用户故事生成端到端Playwright测试的AI驱动测试自动化框架。

  • by mayankmahajan0work
  • Python
  • 本地部署
  • 更新于
在 GitHub 查看 mayankmahajan0work/playwright-test-mcp

使用说明

使用LangChain、Playwright和Streamlit实现剧作家测试自动化

一个AI驱动的测试自动化框架，使用多代理工作流从用户故事生成端到端的Playwright测试（参见 workflow/).

一个由人工智能驱动的测试自动化框架，使用由LangChain、OpenAI和Playwright支持的多代理工作流，从用户故事中生成端到端的Playwright测试。

🎯 概述

此项目使用 多agent体系结构 致：

  1. 探索 您的web应用程序
  2. 模型 UI页面作为可重用的页面对象
  3. 计划 用户故事中的测试场景
  4. 生成 测试数据
  5. 执行 测试场景并捕获证据
  6. 验证 结果并产生判决
  7. 创建 可执行Playwright测试脚本

🏗️ 建筑

代理工作流（工作流/代理）

graph TD
    A[User Story] --> B[Explorer]
    B --> C[Page Modeler]
    C --> D[Planner]
    D --> E[Test Data Generator]
    E --> F[Test Executor]
    F --> G[Results Generator]
    G --> H[Code Generator]
    H --> I[Playwright Test Scripts]

代理

  1. 浏览器代理 (workflow/agents/explorer.py)

    • 发现导航步骤、页面结构和UI元素
    • 输出：快照、定位器

  2. 页面建模器代理 (workflow/agents/page_modeler.py)

    • 将资源管理器输出转换为逻辑UI页面模型
    • 将定位器分为选择器、动作、输入和断言
    • 输出：页面对象文件

  3. 规划师代理 (workflow/agents/planner.py)

    • 读取导航流和页面模型
    • 从用户故事生成结构化测试计划标记
    • 输出：分析的测试场景

  4. 测试数据生成器代理 (workflow/agents/test_data_generator.py)

    • 生成特定场景的强类型测试数据
    • 输出：测试数据文件

  5. 测试执行代理 (workflow/agents/test_executor.py)

    • 通过Playwright MCP执行测试场景
    • 捕获执行证据（快照、屏幕截图、DOM状态）
    • 产出：执行报告

  6. 结果生成器代理 (workflow/agents/results_generator.py)

    • 根据预期结果分析执行证据
    • 通过推理和信心评分做出通过/失败的判断
    • 输出：验证结果

  7. 代码生成器代理 (workflow/agents/code_generator.py)

    • 从执行报告生成Playwright测试脚本（TypeScript）
    • 输出： .spec.ts 文件

🚀 入门指南

先决条件

  • Python 3.11+
  • Node.js 18+ （为剧作家）
  • 剧作家 （通过npm安装）
  • OpenAI API密钥

（可选）使用save-auth.js绕过身份验证

如果您的应用程序需要登录，您可以使用提供的 save-auth.js 生成Playwright身份验证状态文件的脚本(auth_state.json).

步骤：

  1. 运行脚本：
    node save-auth.js
  2. 按照提示在打开的浏览器窗口中登录您的应用程序。
  3. 成功登录后，脚本将把您的会话Cookie和令牌保存到 auth_state.json 在项目根中。

Playwright和代理将使用此文件在测试执行期间绕过登录步骤。

安装

git clone <your-repo-url>
cd playwright_test_mcp
pip install -r requirements.txt
npm install
npx playwright install chromium

创建一个 .env 项目根目录中的文件：

OPENAI_API_KEY=your_openai_api_key_here

运行应用程序

streamlit run main.py

该应用程序将在您的浏览器中打开 http://localhost:8501.

📖 功能

  • 输入：用户故事和应用程序URL
  • 探索：自动UI探索和快照
  • 建模：页面对象模型生成
  • 规划：根据用户故事进行测试场景规划
  • 测试数据：特定场景的数据生成
  • 执行：自动化测试执行和证据捕获
  • 结果：智能验证和判决
  • 代码生成：剧作家测试脚本生成

📁 项目结构

playwright_test_mcp/
├── main.py
├── workflow/
│   ├── agents/
│   │   ├── explorer.py
│   │   ├── page_modeler.py
│   │   ├── planner.py
│   │   ├── test_data_generator.py
│   │   ├── test_executor.py
│   │   ├── results_generator.py
│   │   └── code_generator.py
│   ├── state.py
│   └── utils/
├── output/
│   ├── snapshots/
│   ├── locators/
│   ├── pages/
│   ├── test_data/
│   ├── execution/
│   ├── results/
│   └── test_plans/
├── tests/
├── requirements.txt
├── package.json
└── playwright.config.ts

🔧 配置

剧作家配置

编辑 playwright.config.ts 自定义：

  • 浏览器类型（chromium、firefox、webkit）
  • 视口大小
  • 基础URL
  • 超时设置
  • 屏幕截图/视频捕捉

环境变量

必修的：

  • OPENAI_API_KEY -您的OpenAI API密钥

可选：

  • OPENAI_BASE_URL -自定义OpenAI端点
  • OPENAI_API_VERSION -API版本

🧪 用户故事示例

电子商务流程

As a user, I want to:
1. Search for "laptop" in the product catalog
2. Filter results by price range $500-$1000
3. Select the first product
4. Add it to cart
5. Proceed to checkout
6. Verify the cart contains 1 item with correct price

登录和导航

As a user, I want to:
1. Login with valid credentials
2. Navigate to Settings page
3. Update profile information
4. Save changes
5. Verify success message appears

📊 输出工件

生成的文件

  • 页面快照 (output/snapshots/*.md)-人类可读的页面结构
  • 定位器 (output/locators/*.json)JSON格式的元素定位器
  • 页面对象 (output/pages/*.ts)TypeScript页面对象类
  • 测试数据 (output/test_data/*.ts)-结构化测试数据文件
  • 执行报告 (output/execution/)-测试执行证据
  • 结果 (output/results/)-核查裁决
  • 测试计划 (output/test_plans/*.md)Markdown测试计划
  • 测试脚本 (tests/*.spec.ts)-可执行的剧作家测试

示例页面对象

export class LoginPage {
  readonly page: Page;
  
  constructor(page: Page) {
    this.page = page;
  }
  
  // Selectors
  async getUsernameInput() {
    return this.page.locator('#username');
  }
  
  // Actions
  async login(username: string, password: string) {
    await this.getUsernameInput().fill(username);
    await this.getPasswordInput().fill(password);
    await this.getLoginButton().click();
  }
  
  // Assertions
  async expectLoginSuccess() {
    await expect(this.page).toHaveURL(/dashboard/);
  }
}

🛠️ 故障排除

常见问题

  1. MCP连接错误

    • 确保安装了Playwright： npx playwright install
    • 检查 auth_state.json 已通过身份验证的应用程序存在

  2. 代理超时

    • 增加代理配置中的超时时间
    • 检查应用程序的网络连接

  3. OpenAI API错误

    • 在中验证API密钥 .env
    • 检查API费率限制和配额

  4. 生成的测试失败

    • 查看页面快照的准确性
    • 检查应用程序结构是否更改
    • 使用“强制重新生成”选项重新生成页面模型

🤝 贡献

欢迎投稿！拜托：

  1. 分叉存储库
  2. 创建要素分支
  3. 进行更改
  4. 提交拉取请求

📝 许可证

[在此处添加您的许可证]

🙏 致谢

  • 建于 LangChain
  • 用途 剧作家 用于浏览器自动化
  • UI由 溪流
  • 用于浏览器控制的MCP（模型上下文协议）

需要帮助？ 在中打开问题或查看文档 tools.md

相关 MCP