AI导哈

测试自动化框架

一个基于Playwright、TypeScript和AI代理（规划器、生成器、修复器）的全面测试自动化框架，适用于网站功能测试。

  • by leelakrishnasarepalli
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 leelakrishnasarepalli/playwright-mcp-agents-demo

使用说明

带有MCP代理的Playwright测试自动化框架

一个全面的测试自动化框架 pmiloc.org 使用Playwright、TypeScript和AI驱动的代理（Planner、Generator、Healer）与Claude集成。

建筑

该框架实现了一个用于智能测试自动化的三代理系统：

代理

  1. 规划师代理 (克劳德/经纪人/剧作家)

    • 探索目标网站
    • 分析用户流和功能
    • 创建具有详细场景的全面测试计划
    • 识别边缘情况和边界条件

  2. 发电机代理 (.claude/经纪人/剧作家-最佳制作人.md)

    • 从Planner Agent读取测试计划
    • 使用页面对象模型生成Playwright测试代码
    • 创建可重用的页面对象
    • 实施测试自动化的最佳实践

  3. 治疗师代理 (.claude/经纪人/剧作家-test-healer.md)

    • 监控测试执行
    • 检测和分析测试失败
    • 自动修复常见问题（定位器、计时、断言）
    • 自愈测试维护

项目结构

playwright-mcp-agents-demo/
├── .claude/
│   └── agents/               # Agent definitions
│       ├── playwright-test-planner.md
│       ├── playwright-test-generator.md
│       └── playwright-test-healer.md
├── src/
│   ├── pages/               # Page Object Model classes
│   │   └── BasePage.ts     # Base class with common methods
│   └── utils/              # Shared utilities
├── tests/                  # Test specification files
├── .mcp.json              # MCP server configuration
├── playwright.config.ts   # Playwright configuration
└── tsconfig.json          # TypeScript configuration

先决条件

  • Node.js（v18或更高版本）
  • npm或纱线
  • 支持MCP的Claude代码IDE

安装

  1. 安装依赖项：
npm install
  1. 安装Playwright浏览器：
npm run install:browsers

配置

基本URL

该框架已配置为测试 https://pmiloc.org/ 默认情况下。您可以在中修改此内容 剧作家配置ts:

use: {
  baseURL: 'https://pmiloc.org/',
  ...
}

MCP服务器

Playwright MCP服务器配置在 .mcp.json 并向代理提供浏览器自动化工具。

用法

与代理商合作

步骤1：创建测试计划（Planner Agent）

通过Claude Code调用Planner Agent来浏览网站并创建测试场景：

User: "I need comprehensive test scenarios for the homepage of pmiloc.org"

规划师代理将：

  • 导航到网站
  • 探索界面
  • 创建详细的测试计划markdown文件

步骤2：生成测试（生成器代理）

一旦你有了测试计划，调用Generator Agent来创建实际的测试代码：

User: "Generate Playwright tests from the test plan"

发电商代理将：

  • 阅读测试计划
  • 在tests/目录中创建测试文件
  • 根据需要生成/更新页面对象

步骤3：运行和治疗测试（治疗者代理）

如果测试失败，请调用Healer Agent自动修复它们：

User: "Fix the failing tests"

治疗代理将：

  • 运行所有测试
  • 识别故障
  • 调试并修复问题
  • 重新运行测试以验证修复

运行测试

运行所有测试：

npm test

在头部模式下运行测试（请参阅浏览器）：

npm run test:headed

在调试模式下运行测试：

npm run test:debug

使用UI模式运行测试：

npm run test:ui

在特定浏览器上运行测试：

npm run test:chrome     # Chromium only
npm run test:firefox    # Firefox only
npm run test:webkit     # WebKit only
npm run test:mobile     # Mobile browsers

查看测试报告：

npm run test:report

页面对象模型

该框架使用页面对象模型模式进行可维护的测试。所有页面对象都扩展 基础页面 其提供：

  • 导航方式
  • 常见交互（点击、填写、键入）
  • 断言助手
  • 定位器实用程序

创建新页面对象

import { BasePage } from './BasePage';
import { Page } from '@playwright/test';

export class HomePage extends BasePage {
  constructor(page: Page) {
    super(page);
  }

  async clickLoginButton() {
    await this.click('#login-button');
  }

  async verifyTitle() {
    await this.expectToHaveTitle(/pmiloc/i);
  }
}

测试配置

测试配置有：

  • 多个浏览器：Chromium、Firefox、WebKit、移动Chrome、移动Safari
  • 截图：失败时捕获
  • 视频：失败后保留
  • 痕迹：首次重试时生成
  • 并行执行：已启用
  • HTML报告：每次运行后生成

CI/CD

该框架已做好CI准备，包括：

  • 为CI环境配置的检索
  • 用于集成的JSON报告
  • 优化了工作人员配置

故障排除

未安装浏览器

npm run install:browsers

MCP服务器未连接

确保 .mcp.json 配置正确，Claude Code启用了MCP支持。

测试失败

使用Healer Agent或在调试模式下运行测试：

npm run test:debug

最佳实践

  1. 使用代理：让Planner创建场景，Generator编写测试，Healer修复问题
  2. 页面对象：使页面对象专注于单个页面/组件
  3. 选择器：更喜欢基于角色和数据testid选择器
  4. 等待：使用内置的自动等待，尽可能避免显式等待
  5. 独立测试：每个测试都应该能够独立运行

后续步骤

现在框架已经准备就绪：

  1. 调用 规划师代理 附有探索pmiloc.org和创建测试场景的说明
  2. 审查生成的测试计划
  3. 使用 发电机代理 创建测试代码
  4. 运行测试并使用 治疗师代理 如有需要

Planner Agent的提示示例：

Create a comprehensive test plan for pmiloc.org including:
- Homepage functionality
- Navigation flows
- Form validations
- Responsive design tests

许可证

国际学生委员会

相关 MCP