# webauto

**Repository Path**: flex-gitee/webauto

## Basic Information

- **Project Name**: webauto
- **Description**: WebAuto - AI Web Automation Testing Platform
- **Primary Language**: Unknown
- **License**: AFL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-18
- **Last Updated**: 2026-04-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
  <h1 align="center">⚡ WebAuto</h1>
  <p align="center">
    <strong>AI 驱动的 Web 自动化测试平台</strong>
  </p>
  <p align="center">
    <a href="#功能特性">功能特性</a> · <a href="#技术栈">技术栈</a> · <a href="#快速开始">快速开始</a> · <a href="#项目结构">项目结构</a>
  </p>
</p>

---

## ✨ 功能特性

WebAuto 是一个集成了 **Midscene.js AI** 和 **Playwright** 的 Web 自动化测试平台，提供可视化的测试用例管理与执行能力。

### 🔧 核心功能

| 功能 | 描述 |
|------|------|
| **项目管理** | 多项目隔离，独立配置环境与元素库 |
| **页面与元素库** | 按 URL 维度管理页面元素，支持 CSS/XPath 选择器，步骤可直接引用元素库 |
| **测试用例** | 可视化拖拽编排测试步骤，支持关键字驱动与参数化 |
| **前置用例链** | 用例间依赖管理，支持递归执行前置用例链 |
| **测试计划** | 多用例组合执行，计划级执行汇总与统计 |
| **AI 智能执行** | 集成 Midscene.js CLI + 豆包 AI 模型，支持自然语言驱动的元素定位 |
| **执行报告** | 详细的步骤级执行报告，含截图、AI 交互记录与错误诊断 |
| **通过率趋势** | 7 / 30 / 90 天通过率趋势折线图，项目与用例级别均支持 |
| **环境管理** | 多环境配置（开发/测试/预发），变量注入与动态替换 |

### 🎯 执行引擎

- **混合执行引擎（Hybrid Executor）**：自动生成 Midscene YAML 测试文件，调用 CLI 执行
- **XPath 精确定位**：元素库选择器自动转换为 XPath，支持 Midscene 精确定位参数
- **截图与报告**：每步执行自动截图，生成 Midscene HTML 报告
- **AI 请求日志**：记录 Midscene AI 的请求与响应，便于调试与审计

---

## 🛠 技术栈

### 前端（Web）
- **Vue 3** + `<script setup>` 组合式 API
- **Vite** 构建工具
- **Vue Router** 路由管理
- **VueUse** 实用工具库
- **Vuedraggable** 拖拽排序
- **Axios** HTTP 请求

### 后端（Server）
- **Fastify** 高性能 Web 框架
- **better-sqlite3** 轻量级 SQLite 数据库
- **Playwright** 浏览器自动化
- **Midscene.js CLI** AI 驱动的 UI 自动化
- **dotenv** 环境变量管理

---

## 🚀 快速开始

### 环境要求

- **Node.js** >= 18
- **Playwright** 浏览器（Chromium）

### 安装

```bash
# 1. 克隆仓库
git clone https://gitee.com/flex-gitee/webauto.git
cd webauto

# 2. 安装后端依赖
cd server
npm install
npx playwright install chromium

# 3. 配置环境变量
cp .env.example .env
# 编辑 .env，填入你的 AI 模型配置

# 4. 初始化数据库
npm run migrate
npm run seed

# 5. 安装前端依赖
cd ../web
npm install
```

### 启动

```bash
# 启动后端（默认端口 3000）
cd server
npm run dev

# 启动前端（默认端口 5173）
cd web
npm run dev
```

访问 `http://localhost:5173` 即可使用。

---

## 📁 项目结构

```
webauto/
├── server/                    # 后端服务
│   ├── src/
│   │   ├── index.js           # 入口文件
│   │   ├── db.js              # SQLite 数据库连接
│   │   ├── migrate.js         # 数据库迁移（v1 ~ v17）
│   │   ├── seed.js            # 初始数据填充
│   │   ├── router.js          # API 路由注册
│   │   ├── handlers/
│   │   │   └── api.js         # 全部 API 处理器
│   │   └── engine/
│   │       ├── hybrid-executor.js   # 混合执行引擎（核心）
│   │       ├── midscene-executor.js # Midscene CLI 执行器
│   │       ├── executor.js          # 直接执行器
│   │       └── logger.js            # 执行日志记录
│   ├── midscene_run/           # Midscene 运行目录
│   │   ├── yaml/               # 生成的 YAML 测试文件
│   │   ├── output/             # CLI 输出结果
│   │   └── report/             # HTML 测试报告
│   ├── screenshots/            # 执行截图
│   ├── logs/                   # 应用日志
│   ├── .env.example            # 环境变量模板
│   └── package.json
│
├── web/                       # 前端应用
│   ├── src/
│   │   ├── views/              # 页面视图
│   │   │   ├── Projects.vue         # 项目列表
│   │   │   ├── ProjectDetail.vue    # 项目详情
│   │   │   ├── Cases.vue            # 用例列表
│   │   │   ├── CaseEditor.vue       # 用例编辑器
│   │   │   ├── Plans.vue            # 计划列表
│   │   │   ├── PlanDetail.vue       # 计划详情
│   │   │   ├── Executions.vue       # 执行历史
│   │   │   └── ExecutionReport.vue  # 执行报告
│   │   ├── App.vue            # 根组件
│   │   ├── router.js          # 路由配置
│   │   ├── api.js             # API 请求封装
│   │   └── style.css          # 全局样式（暗色主题）
│   └── package.json
│
├── data/                      # 数据库文件目录
│   └── webauto.db
│
└── README.md
```

---

## 🎨 界面风格

采用**赛博朋克深色主题**设计，使用 CSS 变量统一管理配色：

| 变量 | 色值 | 用途 |
|------|------|------|
| `--bg-primary` | `#0a0e17` | 主背景 |
| `--accent` | `#38bdf8` | 主色调（天蓝） |
| `--success` | `#4ade80` | 通过/成功 |
| `--danger` | `#f87171` | 失败/危险 |
| `--warning` | `#fbbf24` | 警告 |

---

## 📡 API 概览

### 项目管理
- `GET /api/projects` - 项目列表
- `POST /api/projects` - 创建项目
- `PUT /api/projects/:id` - 更新项目
- `DELETE /api/projects/:id` - 删除项目

### 元素库
- `GET /api/projects/:projectId/elements` - 项目元素列表
- `POST /api/pages/:pageId/elements` - 创建元素
- `PUT /api/elements/:id` - 更新元素
- `DELETE /api/elements/:id` - 删除元素

### 测试用例
- `GET /api/cases` - 全部用例
- `POST /api/projects/:projectId/cases` - 创建用例
- `POST /api/cases/:id/run` - 执行用例

### 测试计划
- `GET /api/plans` - 全部计划
- `POST /api/plans/:id/run` - 执行计划

### 执行与报告
- `GET /api/executions` - 执行历史
- `GET /api/executions/:id` - 执行详情
- `GET /api/executions/:id/report` - Midscene 报告

### 统计与趋势
- `GET /api/projects/:projectId/stats` - 项目统计
- `GET /api/projects/:projectId/trend` - 项目通过率趋势
- `GET /api/cases/:caseId/trend` - 用例通过率趋势

---

## 📄 License

MIT

---

<p align="center">
  Built with ❤️ using Vue 3 + Fastify + Midscene.js
</p>