Playwright MCP Agents Demo

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

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

建筑

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

代理

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

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

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

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

1. 治疗师代理 (.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

许可证

国际学生委员会