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元素 - 输出：快照、定位器

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

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

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

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

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

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

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

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

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

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

1. 代码生成器代理 (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

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

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

安装

git clone 
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 已通过身份验证的应用程序存在

1. 代理超时

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

1. OpenAI API错误

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

1. 生成的测试失败

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

🤝 贡献

欢迎投稿！拜托：

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

📝 许可证

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

🙏 致谢

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

______________________________________________________________________

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