# auto-test-admin

**Repository Path**: lycodeing/auto-test-admin

## Basic Information

- **Project Name**: auto-test-admin
- **Description**: 面向自动化测试团队的任务管理与执行控制台
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-08
- **Last Updated**: 2026-11-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!-- cspell:words antv lefthook commitlint codeql corepack cspell rolldown vitepress vuejs -->

<div align="center">

<code>AUTOMATION TESTING · CONTROL PLANE</code>

# Auto Test Admin

### 从测试资产到执行报告，一套面向团队的自动化测试管理控制台

统一管理 **用例、任务、计划、应用、设备、执行与报告**，让 Web 与移动端自动化测试拥有清晰、可追踪的交付链路。

[![License](https://img.shields.io/github/license/lycodeing/auto-test-admin?style=flat-square&color=22c55e)](./LICENSE)
[![Vue](https://img.shields.io/badge/Vue-3.x-42b883?style=flat-square&logo=vuedotjs&logoColor=white)](https://vuejs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178c6?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![Vite](https://img.shields.io/badge/Vite-8.x-646cff?style=flat-square&logo=vite&logoColor=white)](https://vite.dev/)
[![pnpm](https://img.shields.io/badge/pnpm-11.x-f69220?style=flat-square&logo=pnpm&logoColor=white)](https://pnpm.io/)

[快速开始](#-快速开始) · [能力地图](#-能力地图) · [工程结构](#-工程结构) · [参与贡献](#-参与贡献)

</div>

---

## 为什么是 Auto Test Admin？

自动化测试往往分散在脚本仓库、设备平台、定时任务和报告系统中。Auto Test Admin 将这些环节收拢为一个统一控制面：测试人员维护资产，平台编排执行，团队从实时日志和报告中获得反馈。

```text
定义用例  ──▶  编排计划  ──▶  选择资源  ──▶  执行与观测  ──▶  生成报告
  Cases          Plans          Workers         Runtime          Reports
                                  Devices
```

> [!NOTE]
> 本仓库是管理端前端。认证、业务数据、APK 解析、设备控制和任务执行由配套后端通过 `/api` 提供。

## ✦ 能力地图

<table>
  <tr>
    <td width="50%" valign="top">
      <strong>🧩 测试资产</strong><br><br>
      维护测试用例、目录、YAML 步骤、数据集和版本历史；支持版本抽屉与差异对比。
    </td>
    <td width="50%" valign="top">
      <strong>⌘ 任务定义</strong><br><br>
      支持 Web、Android、iOS 与微信小程序任务，统一配置目标、重试、超时、调度和资源需求。
    </td>
  </tr>
  <tr>
    <td width="50%" valign="top">
      <strong>◇ DAG 计划编排</strong><br><br>
      通过图形化画布组织测试节点，配置节点属性、候选资源、计划参数与运行记录。
    </td>
    <td width="50%" valign="top">
      <strong>◉ 执行观测</strong><br><br>
      查看执行实例、运行状态和详情，通过实时日志抽屉跟踪任务执行过程。
    </td>
  </tr>
  <tr>
    <td width="50%" valign="top">
      <strong>▣ 应用与设备</strong><br><br>
      上传并解析 APK，管理应用版本、图标和包信息；向目标设备安装、启动或卸载应用。
    </td>
    <td width="50%" valign="top">
      <strong>↗ 报告中心</strong><br><br>
      集中查看测试报告、执行摘要、失败信息与完整报告，为问题回溯提供上下文。
    </td>
  </tr>
</table>

### 移动端版本策略

| 策略 | 行为 | 适用场景 |
| --- | --- | --- |
| 跟随最新 | 执行时解析应用的最新版本 | CI 持续验证、日常冒烟 |
| 固定版本 | 始终使用指定版本 ID | 基线回归、版本间对比 |

### 资源与协作

- **Worker 与设备池**：查看节点状态、资源占用、心跳和当前任务。
- **公共步骤与共享 Flow**：沉淀可复用测试流程，减少重复维护。
- **租户与成员**：管理团队资源边界和成员信息。
- **任务触发**：从任务定义发起运行，组合运行参数和目标环境。

## ◫ 界面模块

| 模块 | 路径 | 主要内容 |
| --- | --- | --- |
| 工作台 | `views/dashboard/` | 平台概览与首页数据 |
| 测试任务 | `views/task/` | 任务定义、测试用例、计划编排与运行记录 |
| 执行中心 | `views/execution/` | 执行实例、详情和实时日志 |
| 报告中心 | `views/report/` | 报告列表、详情与完整报告 |
| 资源中心 | `views/resource/` | APK 资产、设备、Worker、共享 Flow 与租户 |

## ◈ 技术栈

<div align="center">

| 基础框架 | UI 与交互 | 工程与质量 |
| :---: | :---: | :---: |
| Vue 3 | Vben Admin 5.7 | TypeScript |
| Vite 8 | Ant Design Vue | pnpm Workspace |
| Vue Router | Tailwind CSS | Turbo |
| Pinia | AntV X6 | Oxlint / Oxfmt |

</div>

其他质量与测试能力包括 ESLint、Stylelint、Vue TypeScript、Vitest、Happy DOM、Playwright 和 Lefthook。

## ⌁ 工程结构

```text
auto-test-admin/
├── apps/
│   └── web-antd/                 # 当前主应用
│       ├── src/api/              # API 封装与业务类型
│       ├── src/router/           # 路由、权限与守卫
│       ├── src/views/            # 页面与业务组件
│       ├── .env.development      # 开发环境变量
│       └── vite.config.ts        # Vite 与代理配置
├── packages/                     # Vben monorepo 公共包
├── .dev-docs/                    # 原型、技术设计与操作记录
├── .github/                      # 协作规范与 Actions
├── pnpm-workspace.yaml
└── package.json
```

页面统一通过 `src/api/` 访问后端，视图组件不直接维护请求协议。应用、版本、任务和执行实例以明确的业务 ID 关联。

## ▶ 快速开始

### 1. 准备环境

| 依赖 | 版本 |
| --- | --- |
| Node.js | `^22.18.0` 或 `^24.12.0` |
| pnpm | `>=11.0.0`，推荐 `11.16.0` |
| 浏览器 | 最新版 Chrome、Edge、Firefox 或 Safari |

```bash
corepack enable
corepack prepare pnpm@11.16.0 --activate
```

### 2. 获取项目

```bash
git clone https://github.com/lycodeing/auto-test-admin.git
cd auto-test-admin
pnpm install
```

### 3. 准备后端

开发环境默认配置：

```dotenv
# apps/web-antd/.env.development
VITE_PORT=5666
VITE_BASE=/
VITE_GLOB_API_URL=/api
VITE_NITRO_MOCK=false
```

`apps/web-antd/vite.config.ts` 会将 `/api` 代理到：

```text
http://localhost:18080
```

后端地址不同时，请修改代理目标。项目当前未启用前端 Mock，登录和业务页面需要真实后端服务。

### 4. 启动管理端

```bash
pnpm dev:antd
```

浏览器访问 **<http://localhost:5666/>**。

也可以进入应用目录启动：

```bash
cd apps/web-antd
pnpm dev
```

> [!WARNING]
> 不要在仓库根目录直接运行 `pnpm vite`。该命令会绕过应用级环境变量和代理配置，通常会启动错误的 `5173` 服务。

## ⌘ 常用命令

### 在仓库根目录执行

| 命令 | 用途 |
| --- | --- |
| `pnpm dev:antd` | 启动 Ant Design Vue 管理端 |
| `pnpm build:antd` | 构建管理端生产包 |
| `pnpm check:type` | 执行 workspace 类型检查 |
| `pnpm lint` | 执行代码规范检查 |
| `pnpm format` | 按项目规则格式化代码 |
| `pnpm check` | 检查依赖、循环引用、类型和拼写 |
| `pnpm test:unit` | 运行单元测试 |
| `pnpm test:e2e` | 运行端到端测试 |

### 在 `apps/web-antd` 执行

```bash
pnpm dev          # 开发服务
pnpm typecheck    # Vue TypeScript 检查
pnpm build        # 生产构建
pnpm preview      # 预览构建产物
```

生产产物位于 `apps/web-antd/dist/`。部署静态文件时，需要将 `/api` 转发到对应后端。

## ✓ 质量门禁

仓库通过 Lefthook 在提交时自动执行：

```text
Oxlint  ·  Oxfmt  ·  ESLint  ·  Stylelint  ·  Type Check  ·  Commitlint
```

提交前建议至少运行：

```bash
pnpm check:type
pnpm lint
pnpm build:antd
```

> [!IMPORTANT]
> 当前部分 GitHub Actions 仍保留上游 Vben 仓库条件，因此可能显示为 `Skipped`。请以本地 Lefthook、类型检查和生产构建结果作为当前质量依据。

## ⚑ 参与贡献

欢迎提交 Issue、Pull Request、文档改进和可复现的问题报告。

```bash
git switch main
git pull --ff-only origin main
git switch -c feat/short-description
```

开发完成后：

1. 同步更新受影响的文档和原型。
2. 执行类型检查、Lint 和生产构建。
3. 使用 Conventional Commits 创建中文提交。
4. 推送功能分支，并创建目标为 `main` 的 Pull Request。
5. 在 PR 中说明背景、改动范围、验证结果与兼容性影响。

### 提交规范

```text
<type>(<scope>): <subject>
```

```text
feat(resource): 完善应用资产上传结果
fix(task): 修复任务版本选择状态
docs: 优化项目说明文档
```

常用类型包括 `feat`、`fix`、`docs`、`refactor`、`perf`、`test`、`chore`、`ci` 和 `types`。详细规则参见 [提交约定](.github/commit-convention.md) 与 [贡献指南](.github/contributing.md)。

## ? 常见问题

<details>
<summary><strong>为什么访问 5173 不是应用页面？</strong></summary>
<br>
当前应用端口是 <code>5666</code>。请执行 <code>pnpm dev:antd</code>，并访问 <code>http://localhost:5666/</code>。
</details>

<details>
<summary><strong>页面打开后接口返回 502 怎么办？</strong></summary>
<br>
确认后端监听 <code>18080</code>、请求使用 <code>/api</code> 前缀，并检查 <code>apps/web-antd/vite.config.ts</code> 中的代理目标。
</details>

<details>
<summary><strong>上传 APK 后为什么没有应用图标？</strong></summary>
<br>
图标来自后端 APK 解析结果中的 <code>iconUrl</code>。后端未返回图标时，前端会展示默认占位图标。
</details>

<details>
<summary><strong>登录账号从哪里获取？</strong></summary>
<br>
账号、租户和权限由后端环境管理，本仓库不内置固定演示账号。
</details>

## ▤ 路线方向

- 持续完善任务编排与执行可观测性。
- 补齐应用资料维护和移动端资产闭环。
- 建立适用于当前仓库的持续集成与部署流程。
- 增强接口契约测试和关键业务端到端测试。

## License

本项目基于 [MIT License](./LICENSE) 开源。

项目基于 [Vue Vben Admin](https://github.com/vbenjs/vue-vben-admin) 构建，感谢 Vue、Vite、Vben Admin、Ant Design Vue、AntV X6、pnpm 与 Turbo 等开源项目。

---

<div align="center">

**Auto Test Admin** · Build confidence into every release.

</div>