🤖 代理AI剧作家MCP演示
一个完整的端到端概念证明，展示了Agent AI（GitHub Copilot）如何自主读取工作项、查询数据库、探索浏览器、生成Excel测试用例和编写Playwright测试脚本——所有这些都没有人为干预。
______________________________________________________________________
🎯 这个POC展示了什么？
传统的测试自动化要求人类：
- 阅读要求
- 手动编写测试用例
- 在数据库中查找测试数据
- 浏览UI以查找选择器
- 编写自动化脚本
通过Agent AI+MCP，AI可以自主完成所有这些工作：
AI reads work item (Azure DevOps MCP)
↓
AI explores the browser (Playwright MCP)
↓
AI queries the database (MySQL MCP)
↓
AI generates Excel test cases (Excel MCP)
↓
AI writes complete Playwright TypeScript test scripts______________________________________________________________________
🏗️ 技术栈
| 工具 | 目的 |
|---|---|
| GitHub副本（代理模式） | AI编排器——驱动所有MCP工具 |
| MCP剧作家 | 实时浏览器控制——AI可以导航、点击、读取选择器 |
| MCP Azure DevOps | AI直接读取用户故事和接受标准 |
| MCP MySQL | AI查询真实数据库获取动态测试数据 |
| MCP Excel | AI生成格式化的测试用例电子表格 |
| 剧作家测试（TypeScript） | 运行生成的规范的测试框架 |
| 页面对象模型 | 干净、可维护的测试结构 |
______________________________________________________________________
📁 项目结构
agentic-ai-playwright-mcp-demo/
├── .vscode/
│ ├── mcp.json ← MCP server configuration
│ └── Templates/
│ └── ManualTestCasesTemplate.xlsx
├── ManualTestCases/ ← AI-generated Excel test case files
├── Prompts/
│ └── SearchActiveOrders ← Plain text prompt → AI generates test
├── tests/
│ ├── TC_P001_login_happy_path.spec.ts
│ ├── TC_N001_login_empty_password.spec.ts
│ └── SearchActiveOrders.spec.ts ← DB-driven E2E test
├── .env.example ← Safe template (no secrets)
├── playwright.config.ts
└── POC-Setup-Guide.md ← Complete step-by-step setup guide______________________________________________________________________
🚀 快速开始
1.克隆并安装
git clone https://github.com/YOUR_USERNAME/agentic-ai-playwright-mcp-demo.git
cd agentic-ai-playwright-mcp-demo
npm install
npx playwright install chromium2.配置环境
cp .env.example .env
# Edit .env with your values (the demo app is public — no changes needed for basic tests)3.运行测试
# Login tests (no DB needed — uses public SauceDemo site)
npx playwright test tests/TC_P001_login_happy_path.spec.ts --project=chromium --reporter=list
npx playwright test tests/TC_N001_login_empty_password.spec.ts --project=chromium --reporter=list
# DB-driven test (uses fallback data if no MySQL configured)
npx playwright test tests/SearchActiveOrders.spec.ts --project=chromium --reporter=list
# All tests + HTML report
npm test && npm run report______________________________________________________________________
🤖 如何使用代理AI生成测试
步骤1--在代理模式下打开Copilot
- 打开VS代码
- 打开Copilot聊天(
Ctrl+Shift+I) - 切换 代理 模式
步骤2——分析工作项
Do the analysis of work item 12345 from my Azure DevOps project
[PROJECT_NAME] and give me positive, negative, and edge case test scenarios步骤3——生成Excel测试用例
Create a new Excel file in the ManualTestCases folder named 12345_ManualTestCases.xlsx
using the template in .vscode/Templates/ManualTestCasesTemplate.xlsx
and populate it with all the test scenarios步骤4——根据提示生成剧作家脚本
Read the file Prompts/SearchActiveOrders and generate a complete Playwright
TypeScript test script. Use MCP browser automation to explore the app
interactively and MCP MySQL to query the DB for real test data.______________________________________________________________________
📋 涵盖的测试场景
阳性检测
| ID | 场景 |
|---|---|
| TC_P001 | 使用有效凭据登录→ 重定向到产品页面 |
负面测试
| ID | 场景 |
|---|---|
| TC_N001 | 使用空密码登录→ 显示错误消息，停留在登录页面 |
端到端（DB驱动）
| ID | 场景 |
|---|---|
| SearchActiveOrders | 查询数据库→ 登录→ 加入购物车→ 使用DB客户数据结账→ 确认订单 |
______________________________________________________________________
🔧 MCP服务器设置
在中配置MCP服务器 .vscode/mcp.json:
{
"servers": {
"playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] },
"azure-devops": { "command": "npx", "args": ["@azure-devops/mcp@latest", "YOUR_ORG"] },
"mysql": { "command": "node", "args": ["path/to/mysql-mcp/index.js"], "env": { ... } },
"excel-mcp": { "command": "path/to/excel-mcp.exe" }
}
}👉 看 POC-设置指南.md 获取完整的分步说明。
______________________________________________________________________
📖 完整设置指南
文件 POC-设置指南.md 盖子：
- 所有先决条件和安装命令
- MySQL Northwind示例数据库设置
- MCP服务器安装和连接
- 如何编写有效的AI提示
- 如何运行和解释测试报告
- 如何安全地推送到GitHub（没有秘密！）
______________________________________________________________________
🛡️ 安全须知
- ✅ 所有凭据都从加载
.env（未硬编码） - ✅
.env在...里.gitignore--秘密从不泄露 - ✅
.env.example仅显示带有占位符值的结构 - ✅ 演示应用程序是 公共 网站(https://www.saucedemo.com)--没有专有URL
- ✅ 数据库查询使用参数化结构——没有SQL注入风险
______________________________________________________________________
📄 许可证
MIT-免费使用、修改和共享。
______________________________________________________________________
*建于❤️ 使用GitHub Copilot代理、MCP服务器和Playwright*