Agentic AI Playwright MCP Demo

🤖 代理AI剧作家MCP演示

一个完整的端到端概念证明，展示了Agent AI（GitHub Copilot）如何自主读取工作项、查询数据库、探索浏览器、生成Excel测试用例和编写Playwright测试脚本——所有这些都没有人为干预。

______________________________________________________________________

🎯 这个POC展示了什么？

传统的测试自动化要求人类：

1. 阅读要求
2. 手动编写测试用例
3. 在数据库中查找测试数据
4. 浏览UI以查找选择器
5. 编写自动化脚本

通过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

______________________________________________________________________

🏗️ 技术栈

______________________________________________________________________

📁 项目结构

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 chromium

2.配置环境

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

1. 打开VS代码
2. 打开Copilot聊天(Ctrl+Shift+I)
3. 切换 代理 模式

步骤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.

______________________________________________________________________

📋 涵盖的测试场景

阳性检测

负面测试

端到端（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*