81 lines
4.1 KiB
Markdown
81 lines
4.1 KiB
Markdown
## 1. 项目背景与战略目标
|
||
在大型项目（如字节跳动内部项目）中，测试用例的管理需要兼顾**灵活性**与**规范性**。本项目致力于实现：
|
||
- **测试管理与创建**：支持多场景（Web、移动端、API等）测试用例的创建与维护，确保全链路覆盖。
|
||
- **场景规范化**：通过模板化和标准化流程，统一不同研发、测试人员对业务场景的定义，减少沟通误差。
|
||
- **报告数据化**：全量采集执行结果，自动生成多维报表，驱动效率优化与质量分析。
|
||
|
||
## 2. 核心功能设计
|
||
|
||
### 2.1 脑图与表格双向联动
|
||
- **思维导图视图**：用于梳理测试逻辑、功能模块和边界情况。支持快捷键（Enter 新增兄弟节点，Tab 新增子节点）。
|
||
- **表格视图**：用于录入详细的“操作步骤”、“预期结果”和“优先级”。
|
||
- **实时同步**：在脑图中修改节点名称，表格自动更新；在表格中增删行，脑图结构随之变化。
|
||
|
||
### 2.2 测试计划管理 (Test Plan)
|
||
- **多类型支持**：支持创建不同类型的测试计划，包括**需求测试**、**回归测试**、**开发自测**、**冒烟测试**等。
|
||
- **独立上下文**：每个测试计划可以关联不同的用例集，记录独立的执行状态和评审进度。
|
||
- **一键拉群关联**：飞书拉群功能将直接关联到特定的测试计划，群内实时推送该计划的执行进度。
|
||
|
||
### 2.3 用例详情与属性 (Property Panel)
|
||
- **步骤管理**：右侧面板支持录入详细的“操作步骤”与“预期结果”，支持动态增删。
|
||
- **优先级标记**：支持 P0-P3 快速切换。
|
||
- **评审记录**：支持记录节点的状态变化。
|
||
|
||
### 2.4 用例分级 (Priority Management)
|
||
- **等级定义**：
|
||
- **P0**：冒烟测试核心用例，阻塞性故障。
|
||
- **P1**：主要功能路径。
|
||
- **P2**：次要功能及边界。
|
||
- **P3**：视觉、文案等细微问题。
|
||
- **视觉呈现**：脑图节点支持标记 P0-P3 图标，表格支持按优先级过滤。
|
||
|
||
### 2.3 飞书（Feishu/Lark）一键拉群
|
||
- **场景**：针对某个“测试计划”或“高优用例集”，点击按钮直接调起飞书 API 创建群聊。
|
||
- **功能点**：
|
||
- 自动邀请相关测试人员与开发人员。
|
||
- 群名自动生成（例如：`【测试专项】XX项目_20240428`）。
|
||
- 群内自动推送测试报告概览卡片。
|
||
|
||
### 2.4 用例评审与执行
|
||
- **评审流**：支持节点标记“已通过”、“待修改”。
|
||
- **执行模式**：进入执行态后，点击节点可快速标记 Pass/Fail，并自动记录执行人。
|
||
|
||
## 3. 技术架构方案
|
||
|
||
### 3.1 前端技术栈
|
||
- **框架**：React + TypeScript (提供强类型支持，适配复杂逻辑)。
|
||
- **样式**：Vanilla CSS + CSS Variables (打造极致的响应式与动态主题，如深色模式)。
|
||
- **脑图引擎**：基于 `React Flow` 或自研 SVG 引擎，实现平滑的缩放与拖拽。
|
||
- **状态管理**：`Zustand` (轻量级，适配频繁同步的脑图数据)。
|
||
|
||
### 3.2 数据结构设计
|
||
用例以**树状结构**存储，每个节点包含：
|
||
```json
|
||
{
|
||
"id": "uuid",
|
||
"text": "登录功能",
|
||
"priority": "P0",
|
||
"children": [...],
|
||
"steps": [
|
||
{"action": "输入账号", "expected": "账号回显正确"}
|
||
],
|
||
"status": "pass" | "fail" | "blocked"
|
||
}
|
||
```
|
||
|
||
## 4. 界面交互设计 (Premium Aesthetics)
|
||
- **配色**：采用字节跳动风格的“极客蓝”配合深色/亮色毛玻璃效果。
|
||
- **动画**：使用 `Framer Motion` 实现视图切换时的平滑过渡。
|
||
- **布局**：
|
||
- 左侧：项目/目录树。
|
||
- 顶部：工具栏（视图切换、飞书拉群、全局搜索）。
|
||
- 中央：核心编辑器（脑图/表格）。
|
||
- 右侧：属性面板（选中节点的详细信息、评审记录）。
|
||
|
||
## 5. 开发路线图
|
||
1. **Phase 1**: 基础框架搭建，实现脑图与表格的渲染。
|
||
2. **Phase 2**: 实现数据的本地/持久化存储及双向同步逻辑。
|
||
3. **Phase 3**: 集成用例标级功能与右侧属性面板。
|
||
4. **Phase 4**: 模拟飞书 API 集成与一键拉群交互。
|
||
5. **Phase 5**: 整体视觉打磨与性能优化。
|