Playwright MCP 测试自动化概念验证（POC）
🎯 概述
这个概念验证（POC）展示了结合（多种技术/方法）的强大能力 剧作家 （与）……一起，带着 模型上下文协议（MCP） 实现UI测试生成的自动化。该项目展示了如何利用AI辅助测试自动化将全面的测试计划转化为可执行、可维护的测试套件。
待测应用程序： 自动化练习 - 一个为QA自动化测试设计的、功能齐全的电子商务实践网站。
🏗️ 建筑与流程
下图展示了Playwright MCP如何自动化测试生成过程：
graph TB
subgraph "Input Layer"
A[Test Plan Document
test-plan-automation-exercise.md]
B[Seed Test
tests/seed.spec.ts]
end
subgraph "MCP Layer - AI-Powered Test Generation"
C[Model Context Protocol
MCP Server]
D[Playwright MCP Tools]
E[AI Assistant
GitHub Copilot]
end
subgraph "Generation Process"
F[Parse Test Scenarios]
G[Generate Locators]
H[Create Test Steps]
I[Add Assertions]
J[Validate Syntax]
end
subgraph "Output Layer - Generated Tests"
K[register-new-user-valid-details.spec.ts]
L[login-invalid-credentials.spec.ts]
M[search-products-valid.spec.ts]
N[view-all-products.spec.ts]
O[view-product-details.spec.ts]
P[+ More Test Files...]
end
subgraph "Execution & Reporting"
Q[Playwright Test Runner]
R[Test Results
HTML/JSON/JUnit]
S[CI/CD Pipeline Integration]
end
A --> C
B --> C
C --> D
D --> E
E --> F
F --> G
G --> H
H --> I
I --> J
J --> K
J --> L
J --> M
J --> N
J --> O
J --> P
K --> Q
L --> Q
M --> Q
N --> Q
O --> Q
P --> Q
Q --> R
R --> S
style A fill:#e1f5ff
style B fill:#e1f5ff
style C fill:#fff3cd
style D fill:#fff3cd
style E fill:#fff3cd
style K fill:#d4edda
style L fill:#d4edda
style M fill:#d4edda
style N fill:#d4edda
style O fill:#d4edda
style P fill:#d4edda
style Q fill:#f8d7da
style R fill:#f8d7da🔄 工作原理
1. 输入阶段 📝（笔记或记录的图标，无实际文字含义，可理解为“记录”或“笔记”）
- 测试计划一份全面的测试计划文档（
test-plan-automation-exercise.md) 包含100多个测试场景，涵盖：
- 用户注册与认证 - 产品浏览与搜索 - 购物车功能 - 表单验证 - 安全测试 - 无障碍性测试 - 还有更多。。。
- 种子测试一个基础模板（
seed.spec.ts) 为测试生成提供初始结构
2. MCP处理阶段 🤖 表示机器人或机器人形象。
该 模型上下文协议（MCP） 作为人工智能（AI）与Playwright之间的桥梁：
┌─────────────────────────────────────────────────────────────┐
│ MCP Server │
│ │
│ ┌────────────────────────────────────────────────────┐ │
│ │ Playwright MCP Tools │ │
│ │ • browser_navigate: Navigate to URLs │ │
│ │ • browser_snapshot: Capture page accessibility │ │
│ │ • browser_click: Interact with elements │ │
│ │ • browser_type: Fill form fields │ │
│ │ • browser_verify_*: Add assertions │ │
│ │ • generator_setup_page: Setup test environment │ │
│ │ • generator_write_test: Generate test files │ │
│ └────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘关键MCP（可能指“主控处理器”或具体上下文中的某个关键系统/模块）能力：
- 智能定位生成器利用可访问性树生成健壮的选择器（角色、名称、文本）
- 情境感知理解页面结构和用户意图
- 内置验证自动添加适当的断言
- 代码生成生成干净、可维护的TypeScript代码
3. 测试生成过程 ⚙️ 通常表示“齿轮”或“机械装置”的图标，在中文中可以简单翻译为“齿轮”或根据上下文意译为“机械部件”等。
Test Scenario → MCP Analysis → Browser Interaction → Code Generation
│ │ │ │
│ │ │ │
▼ ▼ ▼ ▼
┌─────────┐ ┌───────────┐ ┌──────────────┐ ┌────────────────────┐
│ "User │ │ Parse │ │ Navigate & │ │ Generate │
│ should │→ │ intent & │→ │ capture page │→ │ TypeScript test │
│ login" │ │ steps │ │ snapshot │ │ with assertions │
└─────────┘ └───────────┘ └──────────────┘ └────────────────────┘示例转换：
输入 （来自测试计划）：
Test: Login - Valid Credentials
Steps:
1. Navigate to https://automationexercise.com/
2. Click on "Signup / Login" link
3. Enter valid email address
4. Enter correct password
5. Click "Login" button
Expected: User is successfully logged in输出 （生成的测试）：
test('Login - Valid Credentials', async ({ page }) => {
await page.goto('https://automationexercise.com/');
await page.getByRole('link', { name: ' Signup / Login' }).click();
await page.locator('form').filter({ hasText: 'Login' })
.getByPlaceholder('Email Address').fill('user@example.com');
await page.getByPlaceholder('Password').fill('password123');
await page.getByRole('button', { name: 'Login' }).click();
await expect(page.getByText('Logged in as')).toBeVisible();
});4. 执行阶段 ▶️
生成的测试使用 Playwright 的测试运行程序来执行，具体方式为：
- 支持多种浏览器（Chromium、Firefox、WebKit）
- 并行执行
- 自动重试
- 故障截图与视频
- 多种报告格式
📂 项目结构
playwrite-mcp-poc/
├── README.md # This file
├── package.json # Dependencies & scripts
├── playwright.config.ts # Playwright configuration
├── test-plan-automation-exercise.md # Comprehensive test plan (100+ scenarios)
├── tests/
│ ├── seed.spec.ts # Base template
│ ├── register-new-user-valid-details.spec.ts # Generated test
│ ├── register-new-user-duplicate-email.spec.ts
│ ├── login-invalid-credentials.spec.ts
│ ├── search-products-valid.spec.ts
│ ├── search-products-no-results.spec.ts
│ ├── view-all-products.spec.ts
│ └── view-product-details.spec.ts
└── test-results/
├── junit.xml # JUnit report
├── test-results.json # JSON report
└── html-report/
└── index.html # HTML report🚀 开始使用
先决条件
- Node.js（v18或更高版本）
- npm 或 yarn
- 带有GitHub Copilot的VS Code（用于MCP功能）
安装
# Clone the repository
git clone
cd playwrite-mcp-poc
# Install dependencies
npm install
# Install Playwright browsers
npx playwright install运行测试
# Run all tests
npm test
# Run tests in headed mode (see browser)
npm run test:headed
# Run tests in UI mode (interactive)
npm run test:ui
# Run tests in specific browser
npm run test:chrome
npm run test:firefox
npm run test:safari
# Run all tests across all browsers
npm run test:all-browsers
# View test report
npm run test:report
# Debug tests
npm run test:debug📊 测试覆盖率
这个概念验证（POC）包含了为以下内容生成的测试：
| 类别 | 场景 | 状态 |
|---|---|---|
| 用户注册与认证 | 8 | ✅ |
| 产品浏览与搜索 | 11 | ✅ |
| 购物车功能 | 11 | 🚧 |
| 表单验证 | 5 | ✅ |
| 安全测试 | 4 | 🚧 |
| 可访问性 | 5 | 🚧 |
| 响应式设计 | 4 | 🚧 |
| 总计 | 四十八加 | 进行中 |
图例：✅ 已完成 | 🚧 进行中 | ⏳ 计划中
🎯 Playwright MCP的主要优势
1. 速度 ⚡（闪电符号，无特定中文含义，可保留原样或根据上下文解释为“闪电”）
- 几分钟内生成测试，而非数小时
- 从测试计划到可执行代码的自动化过程
- 减少80%以上的手动测试编写工作
2. 质量 ✨（这个符号在中文中通常被用作表示闪耀、点赞或庆祝等意思，但没有直接对应的中文翻译，可保持原样或根据上下文意译）
- 基于人工智能的定位策略（以无障碍性为首要考量）
- 在所有场景中保持一致的测试结构
- 内置最佳实践（等待、断言、错误处理）
3. 可维护性 🔧 修理工具或螺丝刀的象征
- 简洁易读的TypeScript代码
- 与测试计划相匹配的描述性测试名称
- 易于更新和扩展
4. 可靠性 🛡️ 代表“盾牌”的符号，可翻译为“盾”或根据上下文意译为“防护”、“保护”等。
- 使用基于角色的定位器实现的健壮选择器
- 自动等待元素出现
- 智能重试机制
5. 全面的 📋（清单、事项列表的符号，无具体文字含义，可理解为“清单”或“事项列表”）
- 涵盖正面和负面场景
- 安全性和可访问性测试
- 跨浏览器兼容性
🔍 示例：生成的测试
以下是一个根据测试计划自动生成的测试示例：
// spec: test-plan-automation-exercise.md
// seed: tests/seed.spec.ts
import { test, expect } from '@playwright/test';
test.describe('User Registration and Authentication', () => {
test('Register New User - Valid Details', async ({ page }) => {
// 1. Navigate to https://automationexercise.com/
await page.goto('https://automationexercise.com/');
// 2. Click on "Signup / Login" link in the navigation menu
await page.getByRole('link', { name: ' Signup / Login' }).click();
// 3. Verify "New User Signup!" heading is visible
await expect(page.getByRole('heading', { name: 'New User Signup!' }))
.toBeVisible();
// 4. Enter name in the "Name" field
await page.getByRole('textbox', { name: 'Name' }).fill('John Doe');
// 5. Enter valid email address in the "Email Address" field
await page.locator('form')
.filter({ hasText: 'Signup' })
.getByPlaceholder('Email Address')
.fill('johndoe_12345678@example.com');
// 6. Click "Signup" button
await page.getByRole('button', { name: 'Signup' }).click();
// Verify user is redirected to the registration details page
await expect(page.getByRole('heading', {
name: 'Enter Account Information'
})).toBeVisible();
});
});通知：
- ✅ 测试计划中的清晰、分步说明
- ✅ 以无障碍性为先的定位器（
getByRole，getByPlaceholder) - ✅ 正确的断言与
expect() - ✅ 无硬编码CSS选择器
- ✅ 遵循Playwright的最佳实践
🛠️ 配置
剧作家配置
关键设置在 playwright.config.ts：
{
testDir: './tests',
fullyParallel: true,
retries: process.env.CI ? 2 : 0,
reporter: ['html', 'json', 'list', 'junit'],
use: {
baseURL: 'http://localhost:3000',
trace: 'on-first-retry',
screenshot: 'only-on-failure',
video: 'retain-on-failure',
},
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } },
]
}📈 持续集成/持续交付（CI/CD）集成
测试可以轻松集成到CI/CD流水线中：
# Example GitHub Actions workflow
name: Playwright Tests
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- run: npm ci
- run: npx playwright install --with-deps
- run: npm test
- uses: actions/upload-artifact@v3
if: always()
with:
name: playwright-report
path: test-results/🎓 学习资源
剧作家
模型上下文协议（MCP）
🤝 贡献
这是一个概念验证（POC）项目。如需扩展或修改：
- 更新测试场景于
test-plan-automation-exercise.md - 使用MCP工具生成新的测试用例
- 审查并优化生成的代码
- 运行测试以验证功能
- 更新文档
📝 测试计划结构
综合测试计划包括：
- 用户注册与认证 （8种场景）
- 有效/无效注册 - 登录/登出流程 - 会话管理
- 产品浏览与搜索 （11种场景）
- 查看产品 - 搜索功能 - 类别/品牌筛选
- 购物车 （11种情景）
- 添加/移除项目 - 更新数量 - 结账流程
- 表单验证 （多种场景）
- 联系表单 - 电子邮件订阅 - 输入验证
- 安全测试 (4种场景)
- 防止SQL注入 - XSS 保护 - HTTPS 强制实施
- 无障碍性 （5种场景）
- 键盘导航 - 屏幕阅读器支持 - ARIA 属性
🐛 故障排除
常见问题
浏览器未安装：
npx playwright install chromium端口已被使用：
# Check and kill process on port 3000
lsof -ti:3000 | xargs kill -9测试失败：
- 检查
test-results/html-report/index.html详情请见 - 查看截图中的评论
test-results/ - 启用跟踪：
npm run test:trace
📊 性能指标
这个概念验证（POC）展示了：
- 测试生成时间每次测试约2-5分钟（对比手动操作的30-60分钟）
- 代码质量90%+ 的可访问性定位器使用率
- 测试可靠性\<5%的片状剥落率
- 覆盖范围计划了100多个场景，已实施30多个
🎉 成功标准
✅（对号，表示正确、确认或完成） 测试计划已创建全面的100+场景测试计划\ ✅ MCP 集成成功集成了Playwright MCP\ ✅ 测试生成从计划自动生成测试用例\ ✅ 代码质量简洁、可维护的TypeScript测试\ ✅ 执行跨浏览器测试成功运行\ ✅ 报告生成了多格式的测试报告
📞 联系与支持
对于问题或疑虑：
- 审查测试计划：
test-plan-automation-exercise.md - 查看 Playwright 文档：https://playwright.dev/
- 查阅MCP（模型上下文协议）文档：https://modelcontextprotocol.io/
📄 许可证
这是一个概念验证项目，用于演示目的。
______________________________________________________________________
使用 Playwright、TypeScript 和 Model Context Protocol 构建，充满爱意
*最后更新时间：2025年10月*