Playwright MCP Qa

剧作家MCP QA自动化

一个完整的Playwright QA自动化环境，集成了模型上下文协议（MCP），针对GitHub Codespace和GitHub Copilot进行了优化。

✨ 特性

• 🎭 支持多浏览器的Playwright测试框架
• 🎙️ 自动视频旁白 测试结果（Azure语音+ffmpeg）
• ♿ 使用斧头芯进行可达性测试
• 📊 带有屏幕截图和视频的HTML报告
• 🔄 GitHub操作CI/CD管道
• 🐳 具有所有依赖项的开发容器
• 🤖 GitHub Copilot集成

🚀 快速开始

GitHub代码空间

1. 点击“代码”按钮，选择“在主界面上创建代码空间”
2. devcontainer将自动执行以下操作：

- 设置Node.js 20 - 安装依赖项 - 安装Playwright浏览器

1. 开始测试： npm test

本地开发

# Install dependencies
npm install

# Install Playwright browsers
npx playwright install

# Run tests
npm test

# Run tests in UI mode
npx playwright test --ui

# Run tests in headed mode
npx playwright test --headed

# Run specific test file
npx playwright test tests/example.spec.ts

# Generate test report
npx playwright show-report

📁 项目结构

.
├── .devcontainer/
│   └── devcontainer.json       # Dev container configuration
├── .github/
│   └── workflows/
│       └── playwright.yml      # CI/CD pipeline
├── tests/
│   ├── example.spec.ts         # Homepage tests
│   ├── login.spec.ts           # Login flow tests
│   ├── conair-login.spec.ts    # Conair staging tests
│   └── USCuisinart-login.spec.ts # Cuisinart staging tests
├── utils/
│   └── add-narration.js        # Video narration utility
├── playwright.config.ts        # Playwright configuration
├── mcp.config.json            # MCP integration config
├── .env.example               # Environment variables template
├── README-NARRATION.md        # Video narration documentation
└── package.json               # Project dependencies

🎙️ 视频旁白（自动）

视频是 自动叙述 测试执行后！配置Azure Speech凭据后，自定义报告器将为所有测试录制生成旁白视频。

设置（可选-启用自动旁白）：

# Set up Azure Speech credentials
export SPEECH_KEY=your_azure_key
export SPEECH_REGION=eastus  # e.g., eastus, westus2, etc.

# Run tests - narration happens automatically
npm test

手动叙述：

如果您需要重新叙述现有视频或单独运行叙述：

npm run narrate

它是如何工作的：

1. 测试运行并记录故障视频
2. 自定义剧作家记者检测视频记录
3. 如果 SPEECH_KEY 已设置，测试后自动运行旁白
4. 旁白MP4文件保存到 narrated-videos/
5. 原版 .webm 文件仍保留在 test-results/

看 README-NARRATION.md 详细文档。

⚙️ 配置

MCP集成

在中配置MCP服务器设置 mcp.config.json:

{
  "mcpServers": {
    "playwright-mcp": {
      "serverUrl": "https://your-mcp-server-url.com",
      "authToken": "your-auth-token-here",
      "enabled": true
    }
  }
}

编剧设置

中的关键配置 playwright.config.ts:

• 测试目录: ./tests
• 记者：HTML和列表
• 重试：失败时重试1次
• 截图：失败时捕获
• 视频：记录故障
• 模式：无头
• 浏览器：Chromium、Firefox、WebKit

🤖 GitHub复制集成

此项目针对GitHub Copilot帮助进行了优化：

写作测试

• 打开一个测试文件，并在注释中描述您的测试场景
• Copilot将建议完整的测试实施
• 例子： // test that user can login with valid credentials

生成选择器

• 类型 await page. 并让Copilot建议合适的选择器
• Copilot了解剧作家的定位策略

调试

• 问Copilot Chat：“为什么这个测试失败了？”
• 请求：“为此测试添加更好的错误处理”
• 获取建议：“如何使此测试更可靠？”

最佳实践

// Copilot understands Playwright patterns:
// 1. Use meaningful test descriptions
test('user can complete checkout process', async ({ page }) => {
  // 2. Add clear comments for complex logic
  // Navigate to checkout and verify cart items
  
  // 3. Use proper assertions
  await expect(page.locator('.cart-item')).toHaveCount(3);
});

🧪 测试示例

示例测试（测试/Example.spec.ts）

测试主页的基本功能和导航。

登录流测试（tests/Login.spec.ts）

演示使用todo管理的完整用户交互流程。

📊 报告

运行测试后：

# View HTML report
npx playwright show-report

# Report location: playwright-report/index.html

报告包括：

• 测试结果总结
• 故障截图
• 试运行失败视频
• 调试跟踪文件

🔧 CI/CD

GitHub操作工作流自动执行：

• 每次推都跑
• Ubuntu最新测试
• 安装依赖项和浏览器
• 执行所有测试
• 上传测试报告和工件

在存储库的“操作”选项卡中查看结果。

📝 编写新测试

1. 在中创建新文件 tests/ 目录：

   touch tests/my-feature.spec.ts

1. 导入Playwright测试工具：

   import { test, expect } from '@playwright/test';

1. 写你的测试：

   test('my test description', async ({ page }) => {
     await page.goto('https://example.com');
     await expect(page).toHaveTitle(/Expected Title/);
   });

1. 运行新测试：

   npx playwright test tests/my-feature.spec.ts

🐛 调试

调试模式

# Run with Playwright Inspector
npx playwright test --debug

# Debug specific test
npx playwright test tests/example.spec.ts --debug

跟踪查看器

# Generate trace on failure (default)
npx playwright test

# View trace
npx playwright show-trace trace.zip

VS代码调试

1. 安装Playwright测试扩展
2. 在测试文件中设置断点
3. 点击边栏中的“运行测试”或“调试测试”

🔍 故障排除

机器人检测和验证码问题

Conair舞台现场(stage.conair.com)

• 问题：PerimeterX机器人检测阻止自动浏览器
• 错误：“已拒绝访问此页面”，并重定向到 /PX-Show
• 解决方案:

- 联系QA团队将测试IP地址列入白名单 - 请求一个没有PerimeterX的测试环境 - 实现隐形模式插件（剧作家额外） - 使用基于API的测试而不是UI自动化

Cuisinart舞台现场(stage.cuisinart.com)

• 状态: ✅ 网站可访问，登录流程可导航
• 问题：登录表单上的reCAPTCHA v2/v3保护
• 登录流程正在运行:

- ✅ 主页加载成功 - ✅ 帐户链接已找到并可点击 - ✅ 登录模式打开 - ✅ 表单字段可填写 - ✅ 登录按钮可点击

• 封闭因子:

- 需要reCAPTCHA验证 - 可能需要有效的暂存凭据 - 潜在的基于IP的速率限制

• 解决方案:

- 请求QA证书 vladjimir_henry@conair.com - 在暂存环境中禁用reCAPTCHA - 实现reCAPTCHA令牌绕过（需要API密钥） - 使用没有验证码的专用QA环境

测试凭证

当前正在使用的测试凭据：

HTTP Basic Auth: storefront / conair1
User Login: vladjimir_henry@conair.com / conair1

备注：在运行测试之前，请与QA团队核实这些凭据。

在代码空间中运行测试

代码空间是一个无头环境。始终在无头模式下运行测试：

# Correct - headless mode (default)
npm test

# Will fail - requires display server
npx playwright test --headed
npx playwright codegen

对于调试，请改用跟踪查看器：

npx playwright test --trace on
npx playwright show-trace test-results/.../trace.zip

📚 资源

• 剧作家文档
• 剧作家最佳实践
• MCP文件

🤝 贡献

1. 为您的功能创建新分支
2. 为新功能编写测试
3. 确保所有测试通过： npm test
4. 提交拉取请求

📄 许可证

国际协调委员会

______________________________________________________________________

使用Playwright、MCP和GitHub Copilot进行愉快的测试！ 🎭