# 平台自动化测试可视化系统 执行计划文档

> **文档版本**: v1.0
> **创建日期**: 2026-07-09
> **关联 PRD**: _PRD_平台自动化测试可视化系统需求文档.md v1.1
> **负责人**: czj

---

## 一、执行概述

### 1.1 项目背景

本项目旨在构建一个 **Web 可视化自动化测试平台**，核心创新点在于 **用例录制器** 功能——用户通过在目标网站上进行实际操作，系统自动捕获行为并转换为测试步骤，无需手动编写测试代码。

### 1.2 执行目标

| 目标 | 描述 | 验收标准 |
|------|------|---------|
| 用例录制生成 | 通过实际操作网站自动录制生成测试用例 | 录制功能可用，步骤自动生成 |
| 模块化管理 | 测试用例按模块分类组织 | 支持模块 CRUD，至少 5 个模块 |
| 一键执行 | 点击即可执行单个或批量测试 | 执行响应时间 < 5秒 |
| 实时可视化 | 执行过程实时展示状态和进度 | WebSocket 推送延迟 < 1秒 |
| 步骤追溯 | 每个测试步骤可查看详情 | 支持截图、日志、耗时展示 |
| 历史追踪 | 保留历史执行记录和趋势 | 至少保留 30 天历史数据 |

### 1.3 技术选型

| 层级 | 技术 | 版本 |
|------|------|------|
| 后端框架 | FastAPI | ^0.110.x |
| 前端框架 | Vue 3 + Element Plus | ^3.4.x / ^2.5.x |
| 数据库 | SQLite | 3.x |
| ORM | SQLAlchemy | ^2.0.x |
| 浏览器自动化 | Playwright | ^1.40.x |
| 图表库 | ECharts | ^5.5.x |

### 1.4 预计工期

| 阶段 | 内容 | 预计时间 |
|------|------|---------|
| Phase 1 | 基础框架搭建 | 2-3 天 |
| Phase 2 | 核心功能开发 | 4-5 天 |
| Phase 3 | 执行与可视化 | 3-4 天 |
| Phase 4 | 分析与报告 | 2-3 天 |
| Phase 5 | 扩展与优化 | 2-3 天 |
| **总计** | | **13-18 天** |

---

## 二、任务分解与实施计划

### 2.1 Phase 1: 基础框架搭建（预计 2-3 天）

#### 2.1.1 任务清单

| 任务ID | 任务名称 | 说明 | 优先级 | 预计工时 |
|--------|---------|------|--------|---------|
| P1-001 | 创建项目目录结构 | 按规范创建 backend/、frontend/ 等目录 | P0 | 0.5 天 |
| P1-002 | 后端框架搭建 | FastAPI 项目初始化、依赖安装、配置文件 | P0 | 0.5 天 |
| P1-003 | 数据库初始化 | SQLite 数据库、表结构创建、ORM 模型 | P0 | 0.5 天 |
| P1-004 | 模块 CRUD API | 模块管理的增删改查接口 | P0 | 0.5 天 |
| P1-005 | 前端框架搭建 | Vue3 项目初始化、Element Plus 配置 | P0 | 0.5 天 |
| P1-006 | 前端路由配置 | Vue Router 路由配置、页面布局 | P0 | 0.5 天 |

#### 2.1.2 代码文件规划

```
platform-auto-test/
├── backend/                           # 后端目录
│   ├── app/
│   │   ├── __init__.py
│   │   ├── main.py                     # FastAPI 入口
│   │   ├── config.py                   # 配置文件
│   │   ├── database.py                 # 数据库连接
│   │   ├── models/                     # 数据模型
│   │   │   ├── __init__.py
│   │   │   ├── module.py               # 模块模型
│   │   │   ├── test_case.py            # 用例模型
│   │   │   ├── execution.py            # 执行记录模型
│   │   │   └── case_result.py          # 用例结果模型
│   │   ├── schemas/                    # Pydantic 模式
│   │   │   ├── __init__.py
│   │   │   ├── module.py
│   │   │   └── test_case.py
│   │   ├── routers/                    # API 路由
│   │   │   ├── __init__.py
│   │   │   └── modules.py              # 模块 API
│   │   ├── services/                   # 业务服务
│   │   │   ├── __init__.py
│   │   │   └── module_service.py
│   │   └── utils/                      # 工具函数
│   │       ├── __init__.py
│   │       └── id_generator.py
│   └── requirements.txt                # Python 依赖
├── frontend/                          # 前端目录
│   ├── src/
│   │   ├── main.ts                     # 入口文件
│   │   ├── App.vue                     # 根组件
│   │   ├── router/                     # 路由配置
│   │   │   └── index.ts
│   │   ├── views/                      # 页面组件
│   │   │   ├── Dashboard.vue          # 总览页面
│   │   │   ├── Modules.vue            # 模块管理
│   │   │   └── Cases.vue              # 用例管理
│   │   ├── components/                 # 公共组件
│   │   ├── api/                        # API 调用
│   │   │   └── modules.ts
│   │   └── types/                      # TypeScript 类型
│   │       └── module.ts
│   └── package.json
└── data/                              # 数据目录
    └── test_platform.db               # SQLite 数据库文件
```

#### 2.1.3 实施步骤

**P1-001: 创建项目目录结构**

```bash
# 创建后端目录
mkdir -p backend/app/{models,schemas,routers,services,utils}

# 创建前端目录
npm create vue@latest frontend -- --typescript --router --pinia

# 创建数据目录
mkdir -p data
```

**P1-002: 后端框架搭建**

创建 `backend/requirements.txt`:

```txt
fastapi==0.110.0
uvicorn[standard]==0.27.0
sqlalchemy==2.0.25
aiosqlite==0.19.0
pydantic==2.5.3
python-multipart==0.0.6
playwright==1.40.0
websockets==12.0
```

创建 `backend/app/main.py`:

```python
#!/usr/bin/env python
# -*- coding: utf-8 -*-
"""
模块名称：main.py
模块描述：FastAPI 应用入口，负责启动 Web 服务和注册路由

作者：czj
创建日期：2026-07-09
最后修改：2026-07-09
"""

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

from app.routers import modules

# 创建 FastAPI 应用实例
app = FastAPI(
    title="平台自动化测试系统",
    description="Web 可视化自动化测试平台 API",
    version="1.0.0"
)

# 配置 CORS 中间件
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 生产环境应限制来源
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 注册路由
app.include_router(modules.router, prefix="/api/modules", tags=["模块管理"])


@app.get("/")
async def root():
    """
    根路径健康检查
    
    Returns:
        dict: 服务状态信息
    """
    return {
        "status": "ok",
        "message": "平台自动化测试系统 API 服务运行中"
    }
```

**P1-003: 数据库初始化**

创建 `backend/app/database.py`:

```python
#!/usr/bin/env python
# -*- coding: utf-8 -*-
"""
模块名称：database.py
模块描述：数据库连接配置和会话管理

作者：czj
创建日期：2026-07-09
"""

from sqlalchemy.ext.asyncio import AsyncSession, create_async_engine, async_sessionmaker
from sqlalchemy.orm import DeclarativeBase

# 数据库连接 URL（SQLite 异步）
DATABASE_URL = "sqlite+aiosqlite:///../data/test_platform.db"

# 创建异步引擎
engine = create_async_engine(DATABASE_URL, echo=True)

# 创建异步会话工厂
async_session_maker = async_sessionmaker(
    engine,
    class_=AsyncSession,
    expire_on_commit=False
)


class Base(DeclarativeBase):
    """数据库模型基类"""
    pass


async def get_db():
    """
    获取数据库会话（依赖注入）
    
    Yields:
        AsyncSession: 数据库会话对象
    
    Example:
        >>> @app.get("/items")
        >>> async def get_items(db: AsyncSession = Depends(get_db)):
        >>>     ...
    """
    async with async_session_maker() as session:
        try:
            yield session
        finally:
            await session.close()


async def init_db():
    """
    初始化数据库
    
    创建所有表结构
    """
    async with engine.begin() as conn:
        await conn.run_sync(Base.metadata.create_all)
```

创建 `backend/app/models/module.py`:

```python
#!/usr/bin/env python
# -*- coding: utf-8 -*-
"""
模块名称：module.py
模块描述：测试模块数据库模型定义

作者：czj
创建日期：2026-07-09
"""

from datetime import datetime
from sqlalchemy import String, Text, Integer
from sqlalchemy.orm import Mapped, mapped_column

from app.database import Base


class Module(Base):
    """
    测试模块数据库模型
    
    Attributes:
        id (str): 模块唯一标识
        name (str): 模块名称
        description (str): 模块描述
        icon (str): 模块图标标识
        order (int): 排序序号
        created_at (datetime): 创建时间
        updated_at (datetime): 更新时间
    """
    
    __tablename__ = "modules"
    
    id: Mapped[str] = mapped_column(String(32), primary_key=True)
    name: Mapped[str] = mapped_column(String(100), nullable=False)
    description: Mapped[str] = mapped_column(Text, default="")
    icon: Mapped[str] = mapped_column(String(50), default="folder")
    order: Mapped[int] = mapped_column(Integer, default=0)
    created_at: Mapped[datetime] = mapped_column(default=datetime.utcnow)
    updated_at: Mapped[datetime] = mapped_column(
        default=datetime.utcnow,
        onupdate=datetime.utcnow
    )
```

#### 2.1.4 验收标准

| 验收项 | 验收标准 | 验收方法 |
|--------|---------|---------|
| 目录结构 | 所有目录按规划创建 | 检查目录是否存在 |
| 后端启动 | `uvicorn app.main:app --reload` 可启动 | 访问 http://localhost:8000/docs |
| 数据库初始化 | SQLite 文件创建成功 | 检查 data/test_platform.db 存在 |
| 模块 API | GET/POST /api/modules 可用 | Postman 测试接口 |

---

### 2.2 Phase 2: 核心功能开发（预计 4-5 天）

#### 2.2.1 任务清单

| 任务ID | 任务名称 | 说明 | 优先级 | 预计工时 |
|--------|---------|------|--------|---------|
| P2-001 | 用例数据模型 | 用例表、步骤 JSON 结构设计 | P0 | 0.5 天 |
| P2-002 | 用例 CRUD API | 用例的增删改查接口 | P0 | 0.5 天 |
| P2-003 | 录制器核心实现 | Playwright 浏览器录制功能 | P0 | 1.5 天 |
| P2-004 | 录制器 API | 启动录制、获取步骤、保存用例 | P0 | 0.5 天 |
| P2-005 | 前端模块页面 | 模块卡片展示、创建/编辑弹窗 | P0 | 0.5 天 |
| P2-006 | 前端用例列表 | 用例表格、筛选、搜索 | P0 | 0.5 天 |
| P2-007 | 前端录制器页面 | 录制窗口、步骤列表、保存 | P0 | 1 天 |

#### 2.2.2 代码文件规划

```
backend/app/
├── models/
│   └── test_case.py                   # 用例模型（新增）
├── routers/
│   ├── cases.py                       # 用例 API（新增）
│   └── recorder.py                    # 录制器 API（新增）
├── services/
│   ├── case_service.py                # 用例服务（新增）
│   └── recorder_service.py            # 录制器服务（新增）
└── executors/
    ├── __init__.py
    ├── base_executor.py               # 执行器基类
    └── playwright_executor.py         # Playwright 执行器

frontend/src/
├── views/
│   ├── Cases.vue                      # 用例列表（修改）
│   └── Recorder.vue                   # 录制器页面（新增）
├── components/
│   ├── ModuleCard.vue                 # 模块卡片组件
│   ├── CaseTable.vue                  # 用例表格组件
│   └── RecorderPanel.vue              # 录制面板组件
└── api/
    ├── cases.ts                       # 用例 API
    └── recorder.ts                    # 录制器 API
```

#### 2.2.3 核心代码示例

**用例模型 `backend/app/models/test_case.py`**:

```python
#!/usr/bin/env python
# -*- coding: utf-8 -*-
"""
模块名称：test_case.py
模块描述：测试用例数据库模型定义

作者：czj
创建日期：2026-07-09
"""

from datetime import datetime
from sqlalchemy import String, Text, JSON, ForeignKey
from sqlalchemy.orm import Mapped, mapped_column, relationship

from app.database import Base


class TestCase(Base):
    """
    测试用例数据库模型
    
    Attributes:
        id (str): 用例唯一标识
        module_id (str): 所属模块ID
        name (str): 用例名称
        description (str): 用例描述
        status (str): 状态 (active/disabled)
        priority (str): 优先级 (high/medium/low)
        tags (list): 标签列表
        steps (list): 测试步骤定义
        config (dict): 执行配置
        created_at (datetime): 创建时间
        updated_at (datetime): 更新时间
    """
    
    __tablename__ = "test_cases"
    
    id: Mapped[str] = mapped_column(String(32), primary_key=True)
    module_id: Mapped[str] = mapped_column(
        String(32),
        ForeignKey("modules.id"),
        nullable=False
    )
    name: Mapped[str] = mapped_column(String(200), nullable=False)
    description: Mapped[str] = mapped_column(Text, default="")
    status: Mapped[str] = mapped_column(String(20), default="active")
    priority: Mapped[str] = mapped_column(String(20), default="medium")
    tags: Mapped[list] = mapped_column(JSON, default=list)
    steps: Mapped[list] = mapped_column(JSON, default=list)
    config: Mapped[dict] = mapped_column(JSON, default=dict)
    created_at: Mapped[datetime] = mapped_column(default=datetime.utcnow)
    updated_at: Mapped[datetime] = mapped_column(
        default=datetime.utcnow,
        onupdate=datetime.utcnow
    )
    
    # 关联模块
    module = relationship("Module", backref="cases")
```

**录制器服务 `backend/app/services/recorder_service.py`**:

```python
#!/usr/bin/env python
# -*- coding: utf-8 -*-
"""
模块名称：recorder_service.py
模块描述：用例录制器服务，负责启动浏览器录制和捕获用户操作

作者：czj
创建日期：2026-07-09
"""

import asyncio
from typing import Optional, Callable
from dataclasses import dataclass, field

from playwright.async_api import async_playwright, Browser, Page


@dataclass
class RecordedStep:
    """
    录制的测试步骤
    
    Attributes:
        order (int): 步骤顺序
        name (str): 步骤名称
        action (str): 动作类型
        selector (str): 元素选择器
        value (str): 输入值（如有）
        timestamp (float): 时间戳
    """
    order: int
    name: str
    action: str
    selector: str
    value: Optional[str] = None
    timestamp: float = 0.0


class RecorderService:
    """
    用例录制器服务
    
    功能：
    - 启动浏览器录制会话
    - 监听用户交互事件
    - 自动生成测试步骤
    - 支持步骤编辑和保存
    
    Example:
        >>> recorder = RecorderService()
        >>> await recorder.start("https://example.com")
        >>> # 用户在浏览器中操作...
        >>> steps = recorder.get_steps()
        >>> await recorder.stop()
    """
    
    def __init__(self):
        """初始化录制器"""
        self.browser: Optional[Browser] = None
        self.page: Optional[Page] = None
        self.steps: list[RecordedStep] = []
        self.is_recording: bool = False
        self._step_counter: int = 0
    
    async def start(self, url: str, headless: bool = False) -> bool:
        """
        启动录制会话
        
        Args:
            url (str): 目标网站 URL
            headless (bool): 是否无头模式，默认 False（显示浏览器）
        
        Returns:
            bool: 启动是否成功
        
        Raises:
            Exception: 启动失败时抛出
        """
        try:
            # 启动 Playwright
            playwright = await async_playwright().start()
            self.browser = await playwright.chromium.launch(headless=headless)
            self.page = await self.browser.new_page()
            
            # 导航到目标 URL
            await self.page.goto(url)
            
            # 注册事件监听器
            await self._register_handlers()
            
            self.is_recording = True
            return True
            
        except Exception as e:
            raise Exception(f"录制会话启动失败: {str(e)}")
    
    async def _register_handlers(self):
        """
        注册浏览器事件监听器
        
        监听事件：
        - click: 点击事件
        - input: 输入事件
        - change: 选择/勾选事件
        """
        # 点击事件
        self.page.on("click", lambda: self._handle_click)
        
        # 输入事件（需要注入脚本）
        await self.page.evaluate("""
            document.addEventListener('input', (e) => {
                window.__recordAction({
                    type: 'input',
                    selector: e.target.id || e.target.className,
                    value: e.target.value
                });
            });
        """)
    
    def _handle_click(self, selector: str):
        """
        处理点击事件
        
        Args:
            selector (str): 被点击元素的选择器
        """
        step = RecordedStep(
            order=self._step_counter + 1,
            name=f"点击 {selector}",
            action="click",
            selector=selector
        )
        self.steps.append(step)
        self._step_counter += 1
    
    def get_steps(self) -> list[dict]:
        """
        获取已录制的步骤列表
        
        Returns:
            list[dict]: 步骤字典列表
        """
        return [
            {
                "order": step.order,
                "name": step.name,
                "action": step.action,
                "selector": step.selector,
                "value": step.value
            }
            for step in self.steps
        ]
    
    async def stop(self):
        """
        停止录制会话
        
        关闭浏览器并清理资源
        """
        if self.browser:
            await self.browser.close()
        self.is_recording = False
        self.browser = None
        self.page = None
```

#### 2.2.4 验收标准

| 验收项 | 验收标准 | 验收方法 |
|--------|---------|---------|
| 用例模型 | 用例表创建成功，字段完整 | 检查数据库表结构 |
| 用例 API | CRUD 接口全部可用 | Postman 测试 |
| 录制器启动 | 可启动浏览器打开目标网站 | 手动测试 |
| 步骤捕获 | 点击、输入操作可被捕获 | 检查步骤列表 |
| 前端模块页面 | 模块卡片展示、创建弹窗可用 | 手动测试 |
| 前端录制器 | 录制窗口、步骤列表展示 | 手动测试 |

---

### 2.3 Phase 3: 执行与可视化（预计 3-4 天）

#### 2.3.1 任务清单

| 任务ID | 任务名称 | 说明 | 优先级 | 预计工时 |
|--------|---------|------|--------|---------|
| P3-001 | 执行记录模型 | 执行记录表、用例结果表 | P0 | 0.5 天 |
| P3-002 | 执行调度器 | 任务队列、并发控制 | P0 | 0.5 天 |
| P3-003 | Playwright 执行器 | 步骤执行、截图、日志 | P0 | 1 天 |
| P3-004 | WebSocket 推送 | 实时状态推送服务 | P0 | 0.5 天 |
| P3-005 | 执行 API | 创建执行、取消执行、获取结果 | P0 | 0.5 天 |
| P3-006 | 前端执行页面 | 执行进度、实时状态展示 | P0 | 1 天 |
| P3-007 | 步骤详情组件 | 步骤列表、截图展示、日志查看 | P0 | 0.5 天 |

#### 2.3.2 代码文件规划

```
backend/app/
├── models/
│   ├── execution.py                   # 执行记录模型（新增）
│   └── case_result.py                 # 用例结果模型（新增）
├── routers/
│   └── executions.py                  # 执行 API（新增）
├── services/
│   └── execution_service.py           # 执行服务（新增）
├── executors/
│   └── playwright_executor.py         # Playwright 执行器（完善）
└── websocket/
    ├── __init__.py
    └── manager.py                     # WebSocket 连接管理

frontend/src/
├── views/
│   └── Execution.vue                  # 执行中心页面（新增）
├── components/
│   ├── ExecutionProgress.vue          # 执行进度组件
│   ├── StepDetail.vue                 # 步骤详情组件
│   └── ScreenshotViewer.vue           # 截图查看器
└── utils/
    └── websocket.ts                   # WebSocket 客户端
```

#### 2.3.3 核心代码示例

**执行器 `backend/app/executors/playwright_executor.py`**:

```python
#!/usr/bin/env python
# -*- coding: utf-8 -*-
"""
模块名称：playwright_executor.py
模块描述：Playwright 测试执行器，负责执行测试步骤

作者：czj
创建日期：2026-07-09
"""

import asyncio
from typing import Optional, Callable
from datetime import datetime
from dataclasses import dataclass

from playwright.async_api import async_playwright, Page


@dataclass
class StepResult:
    """
    步骤执行结果
    
    Attributes:
        order (int): 步骤顺序
        name (str): 步骤名称
        status (str): 状态 (passed/failed/skipped)
        duration (float): 耗时（秒）
        screenshot (str): 截图路径
        log (str): 执行日志
        error (str): 错误信息
    """
    order: int
    name: str
    status: str = "pending"
    duration: float = 0.0
    screenshot: Optional[str] = None
    log: str = ""
    error: Optional[str] = None


class PlaywrightExecutor:
    """
    Playwright 测试执行器
    
    功能：
    - 执行测试步骤
    - 截图记录
    - 断言验证
    - 实时状态回调
    
    Example:
        >>> executor = PlaywrightExecutor()
        >>> await executor.start()
        >>> result = await executor.execute_step(step)
        >>> print(result.status)
        'passed'
    """
    
    def __init__(self, config: dict = None):
        """
        初始化执行器
        
        Args:
            config (dict): 执行配置
                - timeout (int): 超时时间（毫秒）
                - screenshot (bool): 是否截图
                - headless (bool): 是否无头模式
        """
        self.config = config or {}
        self.timeout = self.config.get("timeout", 30000)
        self.screenshot = self.config.get("screenshot", True)
        self.headless = self.config.get("headless", True)
        
        self.browser = None
        self.page: Optional[Page] = None
        self.is_running = False
    
    async def start(self):
        """
        启动执行器
        
        初始化浏览器实例
        """
        self.playwright = await async_playwright().start()
        self.browser = await self.playwright.chromium.launch(
            headless=self.headless
        )
        self.page = await self.browser.new_page()
        self.is_running = True
    
    async def execute_step(
        self,
        step: dict,
        on_complete: Optional[Callable[[StepResult], None]] = None
    ) -> StepResult:
        """
        执行单个测试步骤
        
        Args:
            step (dict): 步骤定义
            on_complete (Callable): 步骤完成回调
        
        Returns:
            StepResult: 执行结果
        """
        result = StepResult(
            order=step.get("order", 0),
            name=step.get("name", "")
        )
        
        start_time = datetime.now()
        
        try:
            # 根据动作类型执行
            action = step.get("action")
            params = step.get("params", {})
            
            if action == "navigate":
                await self.page.goto(params.get("url"))
                
            elif action == "click":
                await self.page.click(params.get("selector"))
                
            elif action == "fill":
                await self.page.fill(
                    params.get("selector"),
                    params.get("value")
                )
                
            elif action == "assert":
                await self._do_assert(params)
            
            # 截图
            if self.screenshot:
                screenshot_path = f"screenshots/step_{step['order']}.png"
                await self.page.screenshot(path=screenshot_path)
                result.screenshot = screenshot_path
            
            result.status = "passed"
            result.log = f"步骤执行成功: {step['name']}"
            
        except Exception as e:
            result.status = "failed"
            result.error = str(e)
            result.log = f"步骤执行失败: {str(e)}"
        
        finally:
            result.duration = (datetime.now() - start_time).total_seconds()
            
            # 回调通知
            if on_complete:
                on_complete(result)
        
        return result
    
    async def _do_assert(self, params: dict):
        """
        执行断言
        
        Args:
            params (dict): 断言参数
        
        Raises:
            AssertionError: 断言失败时抛出
        """
        selector = params.get("selector")
        expected = params.get("expected")
        assert_type = params.get("type", "visible")
        
        if assert_type == "visible":
            element = await self.page.wait_for_selector(selector)
            if not element:
                raise AssertionError(f"元素 {selector} 不可见")
        
        # 其他断言类型...
    
    async def stop(self):
        """停止执行器"""
        if self.browser:
            await self.browser.close()
        self.is_running = False
```

#### 2.3.4 验收标准

| 验收项 | 验收标准 | 验收方法 |
|--------|---------|---------|
| 执行器启动 | 可启动浏览器执行测试 | 手动测试 |
| 步骤执行 | 导航、点击、输入步骤可执行 | 单元测试 |
| 截图功能 | 失败时自动截图 | 检查截图文件 |
| WebSocket 推送 | 执行状态实时推送 | 前端控制台查看 |
| 前端执行页面 | 进度条、状态更新实时展示 | 手动测试 |

---

### 2.4 Phase 4: 分析与报告（预计 2-3 天）

#### 2.4.1 任务清单

| 任务ID | 任务名称 | 说明 | 优先级 | 预计工时 |
|--------|---------|------|--------|---------|
| P4-001 | 统计分析 API | 总览、趋势、模块对比 API | P0 | 0.5 天 |
| P4-002 | 报告生成服务 | HTML 报告生成 | P1 | 0.5 天 |
| P4-003 | 前端总览页面 | 统计卡片、趋势图表 | P0 | 0.5 天 |
| P4-004 | 前端报告页面 | 报告列表、详情展示 | P1 | 0.5 天 |
| P4-005 | 用例导入功能 | JSON 格式导入 | P1 | 0.5 天 |

#### 2.4.2 代码文件规划

```
backend/app/
├── routers/
│   ├── stats.py                       # 统计 API（新增）
│   └── reports.py                     # 报告 API（新增）
├── services/
│   ├── stats_service.py               # 统计服务（新增）
│   └── report_service.py              # 报告服务（新增）

frontend/src/
├── views/
│   ├── Dashboard.vue                  # 总览页面（完善）
│   └── Reports.vue                    # 报告页面（新增）
├── components/
│   ├── StatsCard.vue                  # 统计卡片
│   └── TrendChart.vue                 # 趋势图表
```

#### 2.4.3 验收标准

| 验收项 | 验收标准 | 验收方法 |
|--------|---------|---------|
| 统计 API | 总览、趋势接口返回正确数据 | Postman 测试 |
| 报告生成 | HTML 报告可生成和导出 | 手动测试 |
| 前端图表 | 趋势图、柱状图正确展示 | 手动测试 |
| 用例导入 | JSON 文件可导入 | 手动测试 |

---

### 2.5 Phase 5: 扩展与优化（预计 2-3 天）

#### 2.5.1 任务清单

| 任务ID | 任务名称 | 说明 | 优先级 | 预计工时 |
|--------|---------|------|--------|---------|
| P5-001 | 定时任务服务 | Celery 定时执行配置 | P1 | 0.5 天 |
| P5-002 | 系统配置页面 | 执行引擎、环境配置 | P1 | 0.5 天 |
| P5-003 | 脚本执行器 | 对接 PowerShell 脚本 | P2 | 1 天 |
| P5-004 | Docker 部署 | Docker Compose 配置 | P1 | 0.5 天 |
| P5-005 | 代码审查 | 按规范检查所有代码 | P0 | 0.5 天 |

#### 2.5.2 代码文件规划

```
backend/app/
├── executors/
│   └── script_executor.py             # 脚本执行器（新增）
├── tasks/
│   ├── __init__.py
│   └── scheduled_tasks.py             # 定时任务

frontend/src/
├── views/
│   └── Settings.vue                   # 系统配置页面（新增）

docker/
├── Dockerfile.backend                 # 后端 Dockerfile
├── Dockerfile.frontend                # 前端 Dockerfile
└── docker-compose.yml                 # 编排配置
```

#### 2.5.3 验收标准

| 验收项 | 验收标准 | 验收方法 |
|--------|---------|---------|
| 定时任务 | 可创建和执行定时任务 | 手动测试 |
| 系统配置 | 配置可保存和生效 | 手动测试 |
| Docker 部署 | docker-compose up 可启动 | 命令测试 |
| 代码审查 | 所有文件符合规范 | 代码审查清单 |

---

## 三、验收标准

### 3.1 功能验收

| 模块 | 功能 | 验收标准 | 优先级 |
|------|------|---------|--------|
| 用例录制 | 启动录制 | 可启动浏览器打开目标网站 | P0 |
| 用例录制 | 步骤捕获 | 点击、输入操作自动生成步骤 | P0 |
| 用例录制 | 保存用例 | 录制的步骤可保存为用例 | P0 |
| 模块管理 | CRUD | 模块增删改查功能完整 | P0 |
| 用例管理 | CRUD | 用例增删改查功能完整 | P0 |
| 用例导入 | JSON导入 | JSON 格式用例可导入 | P1 |
| 执行中心 | 单次执行 | 点击可执行单个用例 | P0 |
| 执行中心 | 批量执行 | 可选择多个用例批量执行 | P0 |
| 执行中心 | 实时状态 | 执行过程实时显示进度 | P0 |
| 结果分析 | 统计图表 | 通过率趋势图正确展示 | P1 |
| 步骤详情 | 截图查看 | 点击可查看步骤截图 | P0 |
| 代码规范 | 注释完整 | 所有公开 API 有文档注释 | P0 |

### 3.2 性能验收

| 指标 | 目标值 | 测试方法 |
|------|--------|---------|
| 页面加载时间 | < 2秒 | Chrome DevTools |
| API 响应时间 | < 500ms | Postman |
| 执行启动延迟 | < 5秒 | 手动计时 |
| WebSocket 推送延迟 | < 1秒 | 前端控制台 |

### 3.3 兼容性验收

| 类型 | 要求 | 测试方法 |
|------|------|---------|
| 浏览器 | Chrome 90+, Edge 90+ | 多浏览器测试 |
| 分辨率 | 1280x720 及以上 | 响应式测试 |

---

## 四、风险评估

### 4.1 技术风险

| 风险 | 影响 | 概率 | 应对措施 |
|------|------|------|---------|
| Playwright 版本兼容 | 执行不稳定 | 中 | 使用稳定版本，锁定版本号 |
| WebSocket 断连 | 实时推送中断 | 低 | 实现断线重连机制 |
| SQLite 性能瓶颈 | 大数据量慢 | 低 | 后续升级 PostgreSQL |

### 4.2 业务风险

| 风险 | 影响 | 概率 | 应对措施 |
|------|------|------|---------|
| 录制器选择器不稳定 | 用例执行失败 | 中 | 优先使用 test-id 属性 |
| 被测系统不稳定 | 测试结果不可靠 | 中 | 设置重试机制 |

---

## 五、实施记录

### 5.1 进度跟踪表

| 阶段 | 任务 | 计划开始 | 实际开始 | 计划结束 | 实际结束 | 状态 |
|------|------|---------|---------|---------|---------|------|
| P1 | 基础框架搭建 | | | | | 待开始 |
| P2 | 核心功能开发 | | | | | 待开始 |
| P3 | 执行与可视化 | | | | | 待开始 |
| P4 | 分析与报告 | | | | | 待开始 |
| P5 | 扩展与优化 | | | | | 待开始 |

### 5.2 问题记录

| 日期 | 问题描述 | 影响范围 | 解决方案 | 状态 |
|------|---------|---------|---------|------|
| | | | | |

---

## 六、后续工作

### 6.1 近期计划

1. 完成用例导入功能（YAML 格式）
2. 添加用例预览功能
3. 支持更多浏览器录制

### 6.2 远期规划

1. 升级数据库为 PostgreSQL
2. 添加用户权限管理
3. 支持分布式执行
4. 对接 CI/CD 系统

---

## 七、附录

### 7.1 开发环境要求

| 环境 | 版本要求 |
|------|---------|
| Python | ^3.10 |
| Node.js | ^18.0 |
| SQLite | ^3.0 |

### 7.2 命令速查

```bash
# 启动后端
cd backend
uvicorn app.main:app --reload --port 8000

# 启动前端
cd frontend
npm run dev

# 初始化数据库
python -c "from app.database import init_db; import asyncio; asyncio.run(init_db())"

# 安装 Playwright 浏览器
playwright install chromium
```

### 7.3 相关文档

| 文档 | 位置 |
|------|------|
| PRD 需求文档 | Docs/PRD/自动化测试平台/_PRD_平台自动化测试可视化系统需求文档.md |
| API 文档 | http://localhost:8000/docs |
| 前端组件文档 | frontend/src/components/ |

---

**文档结束**

*本执行计划基于 PRD v1.1 生成，待评审后开始实施。*