剧作家MCP QA自动化
一个完整的Playwright QA自动化环境，集成了模型上下文协议（MCP），针对GitHub Codespace和GitHub Copilot进行了优化。
✨ 特性
- 🎭 支持多浏览器的Playwright测试框架
- 🎙️ 自动视频旁白 测试结果（Azure语音+ffmpeg）
- ♿ 使用斧头芯进行可达性测试
- 📊 带有屏幕截图和视频的HTML报告
- 🔄 GitHub操作CI/CD管道
- 🐳 具有所有依赖项的开发容器
- 🤖 GitHub Copilot集成
🚀 快速开始
GitHub代码空间
- 点击“代码”按钮，选择“在主界面上创建代码空间”
- devcontainer将自动执行以下操作：
- 设置Node.js 20 - 安装依赖项 - 安装Playwright浏览器
- 开始测试：
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它是如何工作的：
- 测试运行并记录故障视频
- 自定义剧作家记者检测视频记录
- 如果
SPEECH_KEY已设置，测试后自动运行旁白 - 旁白MP4文件保存到
narrated-videos/ - 原版
.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最新测试
- 安装依赖项和浏览器
- 执行所有测试
- 上传测试报告和工件
在存储库的“操作”选项卡中查看结果。
📝 编写新测试
- 在中创建新文件
tests/目录：
touch tests/my-feature.spec.ts- 导入Playwright测试工具：
import { test, expect } from '@playwright/test';- 写你的测试：
test('my test description', async ({ page }) => {
await page.goto('https://example.com');
await expect(page).toHaveTitle(/Expected Title/);
});- 运行新测试：
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.zipVS代码调试
- 安装Playwright测试扩展
- 在测试文件中设置断点
- 点击边栏中的“运行测试”或“调试测试”
🔍 故障排除
机器人检测和验证码问题
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📚 资源
🤝 贡献
- 为您的功能创建新分支
- 为新功能编写测试
- 确保所有测试通过：
npm test - 提交拉取请求
📄 许可证
国际协调委员会
______________________________________________________________________
使用Playwright、MCP和GitHub Copilot进行愉快的测试！ 🎭