Testing Automation System

测试自动化系统

通过聊天界面自动执行Azure DevOps测试用例。将Azure DevOps测试计划与浏览器自动化集成，以实现自动化测试执行。

架构概述

┌─────────────────────────────────────────────────────────────┐
│                    Testing Automation System                │
├─────────────────┬───────────────────┬───────────────────────┤
│    Frontend     │      Backend      │    Official MCPs      │
│  React/Next.js  │   Node.js/TS     │                       │
│                 │                  │                       │
│ • Chat Interface│ • Orchestrator   │ • Azure MCP           │
│ • Dashboard     │ • MCP Clients    │ • ChromeDevTools MCP  │
│ • WebSocket     │ • WebSocket      │                       │
└─────────────────┴───────────────────┴───────────────────────┘
                  │                  │
                  ├─────────────────┬┘
                  │                 │
┌─────────────────┴──────────────────┴───────────────────────┐
│                 Azure DevOps                                │
│              Test Plans & Suites                           │
└─────────────────────────────────────────────────────────────┘

特性/特点

• 💬（表示对话或评论的表情符号，无具体含义，可理解为“对话”或“评论”的意思，但在此处不直接翻译，保持原样） 聊天界面使用自然语言命令执行测试
• 📊（图表/数据） 实时仪表盘实时监控测试执行情况并更新
• 🔄 翻译为中文是：🔄（此符号本身无直接对应中文含义，可理解为“循环”或“重复”的概念，但在此仅作为符号展示） Azure DevOps 集成自动获取并执行测试计划
• 🌐 代表“地球/网络/互联网”的符号。 浏览器自动化使用ChromeDevTools进行自动化浏览器测试
• 📸（相机图标，通常表示拍照或照片） 截图与视频捕获测试执行媒体
• 📝 翻译成中文是：📝（这个符号本身没有直接的中文翻译，它通常表示“待办事项”或“笔记”的意思，可以理解为“待办事项清单”或“笔记记录”。在具体语境中，可以根据需要选择合适的翻译。） 详细日志实时日志记录和错误追踪

快速入门

先决条件

• Node.js 20多个版本（或：Node.js 20+版本）
• Azure CLI（Azure 命令行界面）az login）
• Git
• 谷歌Chrome

设置

# Clone repository
git clone https://github.com/Af8520/testing-automation-system.git
cd testing-automation-system

# Authenticate with Azure
az login

# Create .env file
cat > .env << EOF
ADO_ORGANIZATION=https://dev.azure.com/your_org
ADO_PROJECT=your_project
BACKEND_PORT=3021
FRONTEND_URL=http://localhost:3005
NEXT_PUBLIC_BACKEND_URL=http://localhost:3021
NEXT_PUBLIC_WS_URL=ws://localhost:3021
LOG_LEVEL=debug
EOF

# Install and run
npm install
npm run dev

访问

• 前端http://localhost:3005（本地主机，端口3005）
• 后端http://localhost:3021/health 翻译为中文是：“http://本地主机:3021/健康（状态）”。不过，在实际语境中，我们通常不会直接翻译URL的路径部分，而是理解为指向本地主机上的某个特定服务或接口的健康检查端点。因此，也可以简化为“本地主机3021端口的健康检查URL”

使用方法

只需在聊天界面中输入：

Run test suite ID 4 from plan ID 1

系统将自动：

1. 从Azure DevOps获取测试用例
2. 执行浏览器自动化
3. 截取屏幕截图
4. 实时显示结果

项目结构

testing-automation-system/
├── packages/
│   ├── backend/           # Node.js backend server
│   │   └── src/
│   │       ├── controllers/
│   │       ├── services/  # Azure MCP & ChromeDevTools MCP clients
│   │       └── utils/
│   └── frontend/          # Next.js frontend
│       └── src/
│           ├── components/
│           ├── pages/
│           └── lib/
├── .env                   # Configuration
└── package.json           # Root dependencies

发展

# Start backend only
npm run dev:backend

# Start frontend only
npm run dev:frontend

# Build for production
npm run build

# Run tests
npm test

许可证

麻省理工学院许可证（MIT License）