# testWeb

**Repository Path**: yanxinwu/test-web

## Basic Information

- **Project Name**: testWeb
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-03
- **Last Updated**: 2026-08-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# AI Web 自动化测试平台

基于 AI 大模型的 Web 自动化测试工具，支持自然语言描述测试用例，自动解析并执行。

## 功能特性

- **智能测试执行**：基于自然语言描述，自动解析为 Playwright 可执行步骤
- **多模型支持**：内置规则引擎 + 可选 AI 大模型（通义千问 / DeepSeek / OpenAI）
- **详细测试报告**：记录每个步骤的执行结果、耗时和截图
- **数据库存储**：MySQL 存储测试用例和执行记录
- **批量执行**：支持批量执行多个测试用例
- **实时监控**：WebSocket 实时推送测试执行状态
- **统计图表**：ECharts 可视化测试趋势和通过率
- **测试用例管理**：CRUD + 批量删除 + 标签管理

## 技术栈

| 层级 | 技术 |
|------|------|
| 前端 | Vue 3 + Element Plus + ECharts + Vue Router |
| 后端 | Node.js + Express + Socket.io |
| 数据库 | MySQL 8.0 |
| 自动化 | Playwright (Chromium) |
| AI | 通义千问 / DeepSeek / OpenAI 兼容 / 内置规则引擎 |

## 快速启动

### 1. 环境准备

- Node.js >= 18
- MySQL 8.0 (localhost:3306, root/123456)
- 推荐：AI API Key (可选，无 API Key 时使用内置规则引擎)

### 2. 安装依赖

```bash
# 安装所有依赖
cd backend && npm install
cd ../frontend && npm install
```

### 3. 初始化数据库

```bash
cd backend
node src/models/init.js
```

### 4. 配置 AI（可选）

编辑 `backend/.env`：

```env
# 选择大模型提供商：qwen / deepseek / openai
AI_PROVIDER=qwen

# 配置 API Key（为空则使用内置规则引擎）
AI_API_KEY=your-api-key-here

# 模型名称
AI_MODEL=qwen-plus
```

### 5. 安装 Playwright 浏览器

```bash
cd backend
npx playwright install chromium

# 如果下载失败（网络问题），设置镜像：
set PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright/
npx playwright install chromium
```

### 6. 启动服务

```bash
# 终端1 - 启动后端
cd backend
npm run dev

# 终端2 - 启动前端
cd frontend
npm run dev
```

访问 http://localhost:5173

## 项目结构

```
test-web/
├── backend/                  # 后端服务
│   ├── src/
│   │   ├── index.js          # Express 服务器入口
│   │   ├── config/database.js # MySQL 连接配置
│   │   ├── models/init.js    # 数据库初始化
│   │   ├── routes/
│   │   │   ├── testCases.js  # 测试用例 CRUD
│   │   │   ├── executions.js # 测试执行管理
│   │   │   ├── stats.js      # 统计数据
│   │   │   └── ai.js         # AI 解析接口
│   │   ├── services/
│   │   │   ├── aiService.js  # AI + 规则引擎
│   │   │   └── testRunner.js # Playwright 执行引擎
│   │   └── utils/logger.js
│   ├── screenshots/          # 截图存储
│   └── package.json
├── frontend/                 # Vue 前端
│   ├── src/
│   │   ├── App.vue           # 主布局
│   │   ├── router/index.js   # Vue Router
│   │   ├── api/index.js      # API 封装
│   │   ├── views/
│   │   │   ├── Dashboard.vue  # 仪表盘
│   │   │   ├── TestCases.vue  # 测试用例管理
│   │   │   ├── Execution.vue  # 执行测试
│   │   │   ├── Monitor.vue    # 实时监控
│   │   │   └── Reports.vue    # 测试报告
│   │   └── styles/global.css
│   └── package.json
└── package.json              # 根配置
```

## 使用指南

### 创建测试用例

在「测试用例」页面点击「创建用例」，用自然语言描述测试步骤：

```
打开 www.baidu.com
在搜索框中输入 AI测试
点击百度一下按钮
验证结果包含 AI
点击搜索结果第一项
截图
```

系统会自动将描述解析为结构化步骤，创建时即时预览。

### 执行测试

- **单个执行**：在用例列表或执行页面选择单个用例执行
- **批量执行**：勾选多个用例，点击批量执行

### 实时监控

在「实时监控」页面可以：
- 查看正在运行的测试执行状态
- 实时日志推送
- 步骤级别的进度展示
- 支持中途停止执行

### 查看报告

在「测试报告」页面可以：
- 按用例筛选执行记录
- 查看详细的步骤执行结果
- 查看失败步骤的截图和错误信息

## 数据库表结构

| 表名 | 说明 |
|------|------|
| test_cases | 测试用例（含 AI 解析后的步骤） |
| test_executions | 执行记录 |
| test_step_results | 步骤执行结果（含截图路径） |
| execution_batches | 批次执行记录 |

## AI 模型配置

### 通义千问

```env
AI_PROVIDER=qwen
AI_API_KEY=sk-xxx
AI_MODEL=qwen-plus
```

### DeepSeek

```env
AI_PROVIDER=deepseek
AI_API_KEY=sk-xxx
AI_MODEL=deepseek-chat
```

### OpenAI 兼容

```env
AI_PROVIDER=openai
AI_API_URL=https://your-api-endpoint/v1
AI_API_KEY=sk-xxx
AI_MODEL=gpt-4o-mini
```

## License

MIT