UI自动化测试系统是一个基于多模态大模型与多智能体协作的现代化自动化测试平台,支持图片分析和网页分析,自动生成MidScene.js格式的YAML测试脚本和Playwright测试脚本。
- 多模态AI分析: 支持图片上传和网页URL分析
- 智能测试生成: 自动识别UI元素,生成测试用例
- 多格式脚本输出: 生成MidScene.js兼容的YAML脚本和Playwright脚本
- 实时协作: 多智能体协同工作,实时反馈
- 现代化界面: React + Ant Design + 3D效果
- 框架: React 18 + TypeScript
- UI库: Ant Design 5.x
- 状态管理: Zustand
- 路由: React Router v6
- 动画: Framer Motion + GSAP
- 3D渲染: Three.js + React Three Fiber
- 图表: ECharts + D3.js
- 构建工具: Vite
frontend/src/
├── components/ # 通用组件
│ ├── Layout/ # 布局组件
│ ├── Dashboard/ # 仪表盘组件
│ └── Common/ # 公共组件
├── pages/ # 页面组件
│ ├── Dashboard/ # 仪表盘页面
│ ├── Web/ # Web测试模块
│ │ ├── TestCreation/ # 测试创建
│ │ ├── TestExecution/ # 测试执行
│ │ └── TestResults/ # 测试结果
│ └── Settings/ # 系统设置
├── services/ # API服务
│ ├── api.ts # 通用API客户端
│ └── unifiedScriptApi.ts # 脚本执行API
└── styles/ # 样式文件
- 框架: FastAPI + Python 3.9+
- 异步: asyncio + aiofiles + httpx
- 智能体: AutoGen Framework
- 数据库: SQLAlchemy + Alembic
- 缓存: Redis + aioredis
- 日志: Loguru
- 监控: Prometheus
├── 🌐 API层 (FastAPI)
│ ├── Web图像分析接口
│ ├── 脚本管理接口
│ ├── 脚本执行接口
│ └── 测试报告接口
│
├── 🔧 服务层 (Business Logic)
│ ├── 图像分析服务
│ ├── 脚本管理服务
│ ├── 执行编排服务
│ └── 测试报告服务
│
├── 🤖 智能体层 (AI Agents)
│ ├── Web图像分析智能体
│ ├── YAML生成智能体
│ ├── Playwright生成智能体
│ └── 脚本执行智能体
│
├── 💾 数据层 (Database)
│ ├── MySQL (主数据库)
│ ├── Neo4j (图数据库)
│ └── Milvus (向量数据库)
│
└── 🔌 集成层 (External Services)
├── MidScene.js
├── Playwright
└── 多模态AI模型
backend/app/
├── api/ # API路由层
│ └── v1/endpoints/ # API端点
│ ├── web/ # Web模块API
│ ├── sessions.py # 会话管理
│ └── system.py # 系统管理
├── agents/ # 智能体层
│ ├── factory.py # 智能体工厂
│ └── web/ # Web平台智能体
├── services/ # 业务服务层
│ └── web/ # Web服务
├── database/ # 数据库层
│ └── models/ # 数据模型
├── core/ # 核心模块
│ ├── config.py # 配置管理
│ ├── llms.py # AI模型客户端
│ └── types.py # 类型定义
└── utils/ # 工具模块
- projects: 项目管理
- sessions: 分析会话
- test_scripts: 测试脚本
- script_executions: 执行记录
- test_reports: 测试报告
- page_analysis: 页面分析结果
- scheduled_tasks: 定时任务
- 统一工厂管理: 集中管理所有智能体的创建和注册
- 多种模型客户端: 支持DeepSeek、UI-TARS等多种AI模型
- 标准化初始化: 提供统一的智能体初始化流程
- 功能: 多模态图像分析,UI元素识别
- 输入: 图片数据 + 测试描述
- 输出: 页面分析结果 + UI元素列表
- AI模型: UI-TARS(专业GUI分析)、Qwen-VL(通用视觉理解)
- 功能: 基于分析结果生成MidScene.js YAML脚本
- 输入: 页面分析结果
- 输出: 标准YAML测试脚本
- AI模型: DeepSeek(文本生成和逻辑推理)
- 功能: 生成Playwright TypeScript脚本
- 输入: 页面分析结果
- 输出: Playwright测试脚本
- AI模型: DeepSeek(代码生成)
- 功能: 执行YAML脚本,管理测试流程
- 输入: YAML脚本 + 执行配置
- 输出: 执行结果 + 测试报告
- 集成: MidScene.js + Playwright
- 功能: 将生成的脚本保存到数据库
- 输入: 脚本内容 + 元数据
- 输出: 保存确认 + 脚本ID
- UI-TARS: 专业GUI分析和坐标定位
- Qwen-VL: 通用视觉理解和多模态推理
- DeepSeek: 文本生成和逻辑推理
智能选择策略: 系统根据任务类型自动选择最适合的AI模型
- GUI任务优先使用UI-TARS
- 通用视觉任务使用Qwen-VL
- 文本生成任务使用DeepSeek
flowchart TD
A[用户输入] --> B[前端验证]
B --> C[API网关]
C --> D[业务服务层]
D --> E[智能体编排]
E --> F[图像分析智能体]
E --> G[YAML生成智能体]
E --> H[脚本执行智能体]
F --> I[多模态AI模型]
G --> J[文本生成模型]
H --> K[MidScene.js引擎]
I --> L[分析结果]
J --> M[YAML脚本]
K --> N[执行报告]
L --> O[数据库存储]
M --> O
N --> O
O --> P[结果返回]
P --> Q[前端展示]
sequenceDiagram
participant U as 用户
participant F as 前端
participant A as API网关
participant O as 编排服务
participant IA as 图像分析智能体
participant YG as YAML生成智能体
participant DS as 数据库保存智能体
U->>F: 上传图片 + 测试描述
F->>A: POST /web/create/analyze/image
A->>O: 创建分析会话
O->>IA: 发送图片分析请求
IA->>IA: 多模态AI分析
IA->>IA: UI元素识别
IA->>IA: 交互流程分析
IA->>O: 返回分析结果
O->>YG: 发送脚本生成请求
YG->>YG: 生成YAML脚本
YG->>DS: 保存脚本到数据库
YG->>O: 返回生成结果
O->>A: 返回完整结果
A->>F: SSE实时推送
F->>U: 显示分析结果和脚本
sequenceDiagram
participant U as 用户
participant F as 前端
participant A as API网关
participant ES as 执行服务
participant YE as YAML执行智能体
participant M as MidScene.js
participant P as Playwright
U->>F: 选择脚本执行
F->>A: POST /web/execution/execute-by-id
A->>ES: 创建执行会话
ES->>YE: 发送执行请求
YE->>M: 调用MidScene.js执行
M->>P: 启动浏览器自动化
P->>P: 执行测试步骤
P->>M: 返回执行结果
M->>YE: 返回测试报告
YE->>ES: 更新执行状态
ES->>A: 返回执行结果
A->>F: SSE实时推送状态
F->>U: 显示执行进度和结果
POST /api/v1/web/create/analyze/image # 图像分析
GET /api/v1/web/scripts # 脚本列表
POST /api/v1/web/execution/execute # 执行脚本
GET /api/v1/web/reports # 测试报告
- 页面分析API: 页面截图智能分析
- 脚本管理API: 测试脚本CRUD操作
- 脚本执行API: 脚本执行和状态监控
- 文本生成脚本API: 基于文本描述生成脚本
- 图片描述生成API: 图片到文本描述转换
- 测试用例解析API: 测试用例元素解析
- 定时任务API: 定时任务管理
- SSE (Server-Sent Events): 实时状态推送
- WebSocket: 双向实时通信
- 事件驱动架构: 异步消息处理
- 脚本管理路由:
/web/scripts/* - 脚本执行路由:
/web/execution/* - SSE端点:
/web/execution/stream/{session_id}
DATABASE_URL=mysql+aiomysql://root:mysql@localhost:3306/ai_automation MYSQL_HOST=localhost MYSQL_PORT=3306 MYSQL_USER=root MYSQL_PASSWORD=mysql MYSQL_DATABASE=ai_automation
# DeepSeek配置 DEEPSEEK_API_KEY="你申请的deepseek密钥" DEEPSEEK_BASE_URL="https://api.deepseek.com/v1" DEEPSEEK_MODEL="deepseek-chat" # UI-TARS配置 UI_TARS_API_KEY="你申请的ui-tars密钥" UI_TARS_BASE_URL="https://ark.cn-beijing.volces.com/api/v3" UI_TARS_MODEL="doubao-1-5-ui-tars-250428"
- API响应时间: 接口性能监控
- 智能体执行时间: AI处理性能
- 数据库查询性能: SQL优化监控
- 资源使用率: CPU、内存、磁盘监控
- 结构化日志: JSON格式日志
- 分级日志: DEBUG/INFO/WARN/ERROR
- 日志轮转: 按时间和大小轮转
- 日志聚合: 集中式日志管理
- 异常捕获: 全局异常处理
- 错误重试: 智能重试机制
- 降级策略: 服务降级保护
- 告警通知: 实时错误告警
- 前端层: React + TypeScript + Ant Design
- API层: FastAPI + RESTful设计
- 服务层: 业务逻辑封装
- 智能体层: AI多智能体协作
- 数据层: MySQL + Neo4j + Milvus混合存储
- 工厂模式: 统一智能体创建和管理
- 消息驱动: 基于AutoGen的消息传递
- 流式处理: 实时状态反馈
- 任务编排: 复杂工作流管理
- 模型选择策略: 根据任务类型智能选择AI模型
- 专业化分工: GUI分析、文本生成、代码生成分别优化
- 结果融合: 多模态分析结果整合
- SSE推送: 服务端主动推送状态更新
- WebSocket: 双向实时通信
- 事件驱动: 异步消息处理架构
- 模块化架构: 功能模块独立可扩展
- 插件机制: 支持新智能体类型扩展
- 配置驱动: 动态配置管理
- 微服务就绪: 支持服务拆分和独立部署
# 1. 安装依赖 install.bat # 2. 配置环境变量(编辑 backend/.env 文件) # 3. 启动系统 start.bat
# 1. 安装依赖 ./install.sh # 2. 配置环境变量(编辑 backend/.env 文件) # 3. 启动系统 ./start.sh
- Node.js 18+
- Python 3.9+
- MySQL 8.0+
- Redis 6.0+(可选)
- 克隆项目
git clone <repository-url> cd ui-automation
- 后端设置
cd backend pip install -r requirements.txt cp .env.example .env # 编辑 .env 文件配置数据库和AI模型 python main.py
- 前端设置
cd frontend
npm install
npm run dev- 访问应用
- 前端: http://localhost:3000
- 后端API: http://localhost:8000
- API文档: http://localhost:8000/docs
- install.bat / install.sh - 自动化安装脚本
- start.bat / start.sh - 系统启动脚本
如果遇到问题:
- 首先查看 故障排除指南
- 检查系统日志:
backend/logs/app.log - 查看浏览器控制台错误信息
- 确认环境配置是否正确
欢迎贡献代码和建议!请遵循以下步骤:
- Fork 项目
- 创建功能分支
- 提交更改
- 发起 Pull Request
本文档基于UI自动化测试系统的实际架构分析整理,展现了现代AI驱动应用的典型架构模式。