摘要

当前前端自测耗时偏高，无需 QA 介入场景下，前端开发需投入大量时间造数据、写用例、调场景，严重影响交付效率。本文提出基于 MCP 协议与 AI 知识库的智能 Mock 系统，通过积累团队测试经验、AI 生成用例、一键 Mock 接口数据，解决前端自测痛点，同时提升交付质量。文中详细阐述系统架构、核心实现、技术选型及落地效果，为前端自测提效提供可复用方案。

一、背景与核心目标

1.1 前端自测核心痛点（需求背景）

随着前端业务复杂度提升，无需 QA 介入的需求日益增多，前端开发需独立承担自测工作。但当前自测流程存在明显痛点：测试数据构造繁琐、自测用例手动编写耗时久、场景覆盖不全面，导致自测占用大量研发时间，交付质量难以保障，成为研发效率瓶颈。

1.2 系统核心目标

针对上述痛点，本文旨在构建一套智能 Mock 系统，核心目标如下：

• 依托团队测试经验，AI 智能生成用例，降低手动编写成本；
• 一键生成 Mock 接口数据，全面覆盖各类业务场景；
• 优化调试体验，解决传统 Mock 工具痛点，提升自测效率；
• 建立标准化自测流程，保障前端交付质量，降低线上 Bug 率。

1.3 竞品分析与方案差异化定位

为明确本方案的核心优势，对业界主流测试方案及内部现有方案进行对比分析，聚焦前端自测场景的差异化需求。

1.3.1 业界及内部方案对比

类别	方案	方案描述	面向角色	侧重点	分析
业界	Testin XAgent	全 DevOps 流程质量管理平台，支持 AI 自动生成测试用例，涵盖用例管理、终端自动化测试等	QA	垂直行业 AI 测试方案，整合行业专业经验	面向 QA 与特定行业，不聚焦前端自测
业界	腾讯优测云服务	提供压测、云真机、接口监控等全面测试工具套件	QA	测试工具全面性	面向 QA，与前端自测需求匹配度低
业界	MeterSphere	开源测试工具，支持测试管理、接口测试等通用场景	通用	通用测试场景覆盖	需大量定制开发，才能适配前端自测需求
业界	Jest + AI	扩展 Jest 工具套件，支持大模型调用，辅助单元测试	FE	前端单元测试	仅聚焦单测，无法解决 UI 交互、多场景联调等核心痛点
业界	Chromatic	通过图片扫描比对，解决 UI 视觉一致性问题	FE	UI 视觉还原度测试	仅解决视觉问题，不涉及接口 Mock、场景测试等核心需求
内部	AI 接口测试	基于历史用例和线上流量生成自动化用例，侧重接口测试与 Mock	QA、BE	接口测试、接口 Mock	可复用，可作为 Mock 数据输入来源，需补充交互用例支持
内部	AI 测试用例助手	结合业务知识库生成用例，支持多轮对话补全	QA	QA 用例生成与分析	思路一致，但面向 QA，需调整产品形态适配前端需求
内部	AI 单测和 CR	基于 Cursor 的单测编写和 CR 实践，提供 Prompt 参考	FE	特定业务单测与 CR	面向特定场景，需结合自身业务定制调整

1.3.2 本方案核心差异化优势

与上述方案相比，本方案核心差异化优势聚焦 3 点，精准适配前端自测场景：

1. 聚焦前端自测环节，精准解决前端开发在自测过程中的造数据、写用例、调场景等核心痛点；
2. 测试用例与业务场景深度绑定，专注特定业务场景下的 AI 物料建设和标准化，生成的用例更贴合前端实际开发需求；
3. 工具层开发成本低，可复用现有工具能力，重点投入知识库建设和 AI 匹配逻辑，性价比更高。

二、核心术语与缩略语定义

为便于理解本文内容，明确核心术语与缩略语定义如下：

名称	全称	描述
MCP	Model Context Protocol	AI 模型上下文协议，用于 Cursor IDE 与 AI 服务器通信，实现 AI 能力无缝集成
Mock-Utils	-	自研调试工具库，解决「MockJS 拦截请求后，Network 面板不显示该请求」的问题，优化调试体验
团队测试知识库	-	团队验证测试经验，为 AI 生成用例和 Mock 数据提供核心支撑，支持智能推荐
MDC	Multi-Document Context	特殊格式 Markdown 文件，为 Cursor AI 助手提供项目上下文，确保生成内容贴合项目实际

三、系统架构设计

3.1 现有 Mock 方案痛点剖析

3.1.1 现有方案现状

当前前端 Mock 方案零散，未形成标准化体系，主要依赖手动编写 Mock 配置或简单转发工具，存在灵活性不足、调试体验不一致、无经验复用机制等问题，具体表现如下：

• 手动编写 Mock 配置文件，或使用简单的期望 + 转发工具；
• 仅实现基础的接口拦截和固定数据返回，缺乏灵活性；
• 无统一的调试和管理工具，开发体验不一致；
• 各开发人员 Mock 方案独立，无经验复用机制。

3.1.2 核心痛点汇总

问题类别	具体表现
调试体验差	MockJS 拦截请求后，Network 面板无法显示请求详情，排查问题困难
重复工作多	开发需在本地重复编写 Mock 配置，无经验复用机制
场景覆盖少	Mock 数据仅关注正常流程，错误、边界等异常场景易缺失，自测不全面
质量不稳定	不同开发者的 Mock 配置质量差异大，部分数据不符合业务规范
团队协作弱	缺乏测试经验积累与共享机制，个人经验无法转化为团队能力

3.2 新方案核心解决策略

针对上述核心问题，结合 AI 与知识库能力，制定「痛点-方案-效果」精准对应策略，具体如下：

核心问题	解决方案	解决效果
调试体验差	自研 Mock-Utils 工具库，优化 Network 面板显示，提供多模式调试	可正常查看 Mock 请求详情，调试效率提升 50%+
重复工作多	搭建团队知识库，实现测试经验复用，AI 自动匹配相似场景	减少 80%+ 重复 Mock 配置工作
场景覆盖少	AI 智能生成测试用例，覆盖正常、异常、边界等多类场景	场景覆盖率从 60%+ 提升至 90%+
质量不稳定	制定标准化 Mock 流程和模板，AI 生成内容经团队规范校验	Mock 数据准确率提升至 80%+，质量一致性显著提升

3.3 系统逻辑架构设计与核心模块解析

系统采用 AI 智能层、生成层、应用层、用户层的分层架构，各层职责清晰、协同联动，且与四大核心模块精准对应，确保架构设计与模块实现高度统一，形成智能 Mock 全流程闭环。

3.3.1 架构分层及核心职责

• AI 智能层（核心驱动层）：负责业务需求解析、AI 经验匹配及数据支撑；
• 生成层（功能实现层）：负责 Mock 数据生成、调试优化及场景识别；
• 应用层与用户层（功能承接层）：不包含核心业务模块，负责补充新场景、使用统计及前端自测落地，承接四大模块功能输出，保障系统易用性。

3.3.2 四大核心模块功能详解

四大核心模块分别对应 AI 智能层与生成层，协同实现智能 Mock 全流程，各模块核心功能如下：

1. 团队测试知识库（AI 智能层）

积累上百条团队验证测试经验，支持按组件、技术栈、业务场景智能匹配，为 AI 生成提供数据支撑，可根据反馈持续迭代优化。

2. MCP 智能生成引擎（AI 智能层）

集成 Cursor IDE AI 能力，通过 MCP 协议通信，解析业务需求、匹配知识库经验，生成符合标准的 Mock 配置、测试用例及集成代码。

3. 智能场景检测器（生成层）

基于请求参数自动识别测试场景，覆盖错误、数据、性能等多维度场景，联动 MockJS 生成对应 Mock 数据，提升自测全面性。

3. Mock-Utils 工具库（生成层）

解决 MockJS 调试痛点，优化 Network 面板显示，支持多模式调试，提供请求日志记录与统计分析，支撑调试面板功能落地。

3.4 核心技术选型（兼顾效率与稳定性）

结合系统需求，优先选用成熟、高效、易集成的技术栈，兼顾开发效率与稳定性，具体选型：

技术	用途	选型理由
MCP 协议	Cursor IDE 与 AI 服务集成	标准化协议，与 Cursor 原生兼容，通信高效稳定
MockJS	API 拦截与基础 Mock 数据生成	成熟前端 Mock 库，API 简洁，社区活跃，支持多类型数据生成
Node.js	MCP 服务器运行环境	轻量高效，支持异步操作，与前端技术栈一致，开发成本低
fs-extra	文件系统操作	扩展原生 fs 模块，支持递归操作，简化文件处理逻辑

四、系统详细设计

4.1 核心流程可视化：时序图设计

4.1.1 智能 Mock 生成完整时序图

描述前端开发发起 Mock 生成需求至获取 Mock 方案的完整流程：

4.1.2 MCP 知识匹配时序图（核心子流程）

4.2 核心组件详细设计

聚焦系统核心组件关键逻辑，重点如下：

4.2.1 MCP 智能生成引擎

核心职责：接收 Cursor IDE 请求，加载知识库、匹配测试经验并生成 Mock 配置，关键代码如下：

// MCP 服务器核心组件：接收 IDE 请求，匹配知识库并生成 Mock 配置
class SimpleTeamTestMCP {
  constructor() {
    this.server = new Server(/* MCP 通信配置 */); // 初始化 MCP 服务器
    this.kbPath = './knowledge-base.json'; // 团队知识库路径
    this.fs = require('fs-extra'); // 引入文件操作工具
  }

    // 加载团队知识库
  async loadKB() {
    if (!await this.fs.pathExists(this.kbPath)) {
      throw new Error('知识库文件不存在，请检查路径');
    }
    const content = await this.fs.readJson(this.kbPath);
    return content.knowledge || [];
  }
  // 按业务上下文筛选经验
  filterExp(knowledge, { compType, techStack, bizCtx }) {
    return knowledge.filter(item => {
      if (compType && !item.tags.includes(compType)) return false;
      if (techStack && !techStack.some(tech => item.tags.includes(tech))) return false;
      if (bizCtx && !item.description.includes(bizCtx)) return false;
      return true;
    });
  }

  // 核心方法：处理 Mock 配置生成请求
  async handleGenMock(args) {
    try {
      const knowledge = await this.loadKB(); // 加载知识库
      // 筛选匹配的测试经验
      const matchedExp = this.filterExp(knowledge, args);
      // 结合经验生成 Mock 配置
      return this.genMockWithExp(matchedExp, args);
    } catch (err) {
      console.error('MCP 请求处理失败：', err);
      return this.getDefaultMock(args); // 降级返回默认模板
    }
  }
}

4.2.2 Mock-Utils 工具库

核心职责：解决 MockJS 调试痛点，提供多模式调试支持，关键代码如下：

// Mock 调试控制器：解决 MockJS 调试痛点，支持多模式调试
export class MockDebugCtrl {
  constructor() {
    this.logger = null;
    this.config = {
      mode: 'console', // 调试模式：console / panel / network / off
      verbose: true,
      simDelay: true,
      showBadge: true
    };
  }
  // 启用调试
  enable(customConfig = {}) {
    this.config = { ...this.config, ...customConfig };
    this.logger = new MockRequestLogger(this.config); // 初始化日志器
    this.simulateNetwork(); // 模拟 Network 面板显示
  }
  // 关闭调试
  disable() {
    this.config.mode = 'off';
    this.logger?.clearRequests();
    this.logger = null;
  }
  // 核心：重写 XHR，解决 Mock 请求 Network 不显示问题
  simulateNetwork() {
    const originalXHR = window.XMLHttpRequest;
    window.XMLHttpRequest = function() {
      const xhr = new originalXHR();
      // 拦截 open，记录请求基本信息
      const originalOpen = xhr.open;
      xhr.open = function(method, url) {
        this._mockReq = { method, url, time: Date.now() };
        return originalOpen.apply(this, arguments);
      };
      // 拦截 send，模拟延迟并记录日志
      const originalSend = xhr.send;
      xhr.send = function(body) {
        this._mockReq.body = body;
        // 模拟延迟（调整延迟范围：200 - 700 ms，原 500 ms 内）
        this.config.simDelay 
          ? setTimeout(() => originalSend.apply(this, arguments), 200 + Math.random() * 500)
          : originalSend.apply(this, arguments);
        this.logger?.logRequest(this._mockReq);
      };
      return xhr;
    };
  }
}

4.2.3 智能场景检测器

核心职责：基于请求参数自动识别测试场景，为 Mock 数据生成提供依据，关键代码如下：

/**
 * 智能场景检测：根据请求参数识别测试场景
 * @param {Object} opts - 请求参数（url、请求类型、请求体）
 * @returns {Object} 匹配的场景信息
 */
const detectScenario = (opts) => {
  const { url, type, body } = opts;
  const params = new URLSearchParams(url.split('?')[1] || '');
  // 场景匹配规则
  const scenarios = {
    netErr: params.get('errType') === 'network', // 网络错误
    authErr: params.get('errType') === 'auth', // 权限错误
    emptyData: params.get('scene') === 'empty', // 空数据
    largeData: params.get('scene') === 'large', // 大数据量
    validateErr: type === 'POST' && body?.noValidate // 表单验证错误（调整判断条件）
  };
  // 查找匹配场景，返回分类信息
  return findMatched(scenarios);
};
// 辅助方法：筛选匹配场景
const findMatched = (scenarios) => {
  for (const [key, isMatched] of Object.entries(scenarios)) {
    if (isMatched) {
      // 场景分类映射
      const typeMap = { netErr: 'error', authErr: 'error', emptyData: 'data', largeData: 'data', validateErr: 'error' };
      return {
        type: typeMap[key],
        scenario: key,
        params: getSceneParams(key)
      };
    }
  }
  // 默认返回正常场景
  return { type: 'normal', scenario: 'normal', params: {} };
};

4.3 存储方案设计

系统存储聚焦团队知识库与 Mock 配置文件，采用文件存储方式，便于维护和版本管理，具体设计如下：

4.3.1 团队知识库存储

采用 JSON 格式存储，结构清晰，便于 AI 解析和经验匹配，示例如下：

{
  "knowledge": [
    {
      "id": "test-case-001",
      "title": "ProTable 列表页面完整测试",
      "type": "test_case",
      "description": "基于 ProTable 组件的列表页面测试方案，覆盖正常、空数据、错误、大数据量等场景",
      "tags": ["ProTable", "列表页面", "React", "前端组件"],
      "success_rate": 95, // 该经验的使用成功率
      "usage_count": 15, // 该经验的使用次数
      "test_scenarios": ["normal", "empty", "error", "large"], // 支持的测试场景
      "mock_patterns": {
        "error_handling": "网络错误、权限错误、验证错误",
        "data_variations": "空数据、单条数据、大数据量",
        "performance": "慢速响应、快速响应"
      }
    }
    // 更多测试经验...
  ]
}

4.3.2 Mock 配置存储（规范化路径）

采用规范化文件路径存储，便于项目集成与团队协作，具体规范如下：

• Mock 文件路径规范：[业务模块]/_MOCK_/xxx-mock.js，示例：src/pages/user-management/_MOCK_/user-management-mock.js；
• Setup 文件路径：项目根目录 /mockSetup.js，用于初始化 Mock 配置；
• 集成方式：在项目入口文件（如 main.ts）中条件导入，仅在开发环境生效，避免影响生产环境。

4.4 异常处理方案（稳定性保障）

针对 MCP 服务与 Mock 运行时的异常场景，制定完善的异常捕获、处理及降级策略，保障系统稳定性：

4.4.1 MCP 服务异常处理（降级策略）

针对知识库加载、AI 生成等异常，捕获并返回降级方案，关键代码如下：

// MCP 服务异常处理：捕获错误并降级
try {
  const mockResult = await this.handleGenMock(args); // 调用核心生成方法
  return { success: true, data: mockResult };
} catch (err) {
  console.error('❌ Mock 生成失败:', err);
  // 降级返回默认模板
  return {
    success: false,
    errMsg: err.message,
    fallback: '使用默认模板降级',
    data: this.getDefaultMock(args)
  };
}

4.4.2 Mock 运行时异常处理（不中断自测）

针对场景识别、Mock 数据生成等异常，降级至默认成功响应，确保自测流程不中断，关键代码如下：

// Mock 运行时异常处理：场景识别失败时降级
const createSmartMockRes = () => {
  return function(opts) {
    try {
      const scene = detectScenario(opts); // 识别场景
      return getSceneResponse(scene); // 生成对应 Mock 响应
    } catch (err) {
      console.error('Mock 场景识别失败:', err);
      return getDefaultSuccessRes(); // 降级返回默认成功响应
    }
  };
};

4.5 平台兼容性方案

适配不同开发环境、项目框架及浏览器，制定全面兼容性方案，确保系统可落地性：

4.5.1 开发环境兼容

环境	兼容性说明
Cursor IDE	MCP 协议原生集成，核心功能完整，体验最佳
VS Code	支持 MCP 扩展插件，可正常调用服务，核心功能无差异
WebStorm	命令行调用 MCP 服务，支持基础 Mock 功能，调试体验略有差异

4.5.2 项目框架兼容

框架	支持情况
React 项目	完整支持，适配 React 16+，包含 ProTable 等组件测试场景
Vue 项目	支持 Composition / Options API，适配 Vue 2、Vue 3
原生 JS 项目	支持基础 Mock 功能，可正常拦截接口并返回数据

4.5.3 浏览器兼容

浏览器	支持情况
现代浏览器（Chrome / Edge / Firefox 最新版）	完整功能支持，调试体验最佳
Chrome DevTools	优化 Network 面板显示，可正常查看 Mock 请求详情
Safari / Firefox	基础 Mock 功能正常，panel 调试模式支持有限

五、架构取舍

5.1 技术选择权衡

5.1.1 优势

• MCP 协议标准化集成：与 Cursor IDE 原生适配、无缝打通，带来极致使用体验
• 知识库驱动智能化：依托团队沉淀测试经验，大幅提升 AI 生成内容质量
• 调试体验专项优化：针对性解决 MockJS 固有调试痛点，显著提升前端自测效率

5.1.2 限制

• IDE 生态依赖性：深度适配 Cursor IDE，其他编辑器需依赖插件扩展
• 团队上手学习成本：需熟悉 MCP 协议概念与全新 Mock 工作流程

5.2 场景覆盖权衡

5.2.1 充分覆盖场景

• 常见业务组件测试（ProTable、表单、列表等）
• 标准 HTTP 错误响应模拟（401、403、404、500）
• 性能测试场景（慢速、快速响应模拟）

5.2.2 有限支持场景

• 复杂业务逻辑的深度定制化测试
• 跨域及复杂网络环境模拟
• 大型数据集的内存优化处理

六、接口协议设计

6.1 MCP 工具接口

6.1.1 搜索团队知识

用于检索团队测试知识库，支持按类型筛选结果

// 搜索团队测试知识库接口（支持按类型筛选）
interface SearchKnowledgeParams {
  query: string; // 搜索关键词
  type?: 'test_case' | 'bug_scenario' | 'mock_data' | 'pattern' | 'all'; // 检索类型，可选
}
// 搜索结果返回格式
interface SearchRes {
  id: string;         // 条目 ID
  title: string;      // 条目标题
  type: string;       // 条目类型
  desc: string;       // 条目描述
  tags: string[];     // 标签
  successRate: number;// 成功率
  useCount: number;   // 使用次数
}

6.1.2 生成业务测试用例

根据业务上下文及接口定义，生成 Mock 文件、集成代码及测试文档

// 生成业务测试用例接口（关联 Mock 文件与集成代码）
interface GenTestCasesParams {
  businessCtx: string;    // 业务上下文
  apiDef: string;         // API 接口定义
  compType: string;       // 组件类型
  techStack?: string[];   // 技术栈，可选
  includeEdge?: boolean;  // 是否包含边缘场景，可选
}
// 生成结果返回格式
interface GenRes {
  mockJs: string;         // Mock JS 文件内容
  setupFile?: string;     // Setup 文件，可选
  integrationCode: string;// 集成代码
  testDoc: string;        // 测试文档
}

6.2 Mock-Utils 工具接口

6.2.1 调试控制器接口

用于控制 Mock 调试模式、查看请求日志及统计信息

// Mock 调试控制器配置（控制调试模式与日志）
interface MockDebugConf {
  debugMode: 'console' | 'panel' | 'network' | 'off'; // 调试模式
  verbose: boolean;                                   // 是否显示详细日志
  simDelay: boolean;                                  // 是否模拟响应延迟
  showMockTag: boolean;                               // 是否显示 Mock 标识
}
// Mock 调试控制器（核心方法封装）
class MockDebugCtrl {
  // 启用调试（支持部分配置）
  enable(config?: Partial<MockDebugConf>): void;
  // 禁用调试
  disable(): void;
  // 核心：重写 XHR，解决 Mock 请求 Network 不显示问题
  simulateNetwork(): originalXHR;
  // 获取所有 Mock 请求记录
  getReqList(): MockRequest[];
  // 清空请求日志
  clearReq(): void;
  // 显示使用统计
  showStats(): void;
}

6.2.2 场景检测接口

根据 Mock 配置，自动识别测试场景类型

// 测试场景定义（区分错误/数据/性能场景）
interface TestScene {
  type: 'error' | 'data' | 'performance'; // 场景类型
  sceneDesc: string;                      // 场景描述
  params: Record<string, string>;        // 场景参数
}
// 场景检测方法（根据 Mock 配置自动识别场景）
function detectTestScene(options: MockOptions): TestScene;

七、监控与统计

7.1 Mock 使用统计

统计类型	说明	用途
使用统计	触发 MCP 调用时上报工具，同步调用成功/失败数据	统计 MCP 服务调用成功率
变更次数	观测测试用例文件变更次数	侧面反映测试用例准确度（变更越多，准确度越低）

7.2 核心统计维度

• 生成成功率：监控 MCP 服务调用成功率
• 场景覆盖率：统计各类测试场景的使用频率
• 团队采用度：分析知识库查询及使用情况

八、外部依赖与限制

8.1 核心依赖

依赖项	用途	风险评估
Cursor IDE	提供 MCP 协议支持，实现 AI 与 IDE 无缝联动	中等：IDE 升级可能影响兼容性
Node.js	MCP 服务器运行环境，支撑工具运行	低：版本稳定，向后兼容
MockJS	Mock 数据生成核心，支持生成多种随机数据、无侵入拦截 Ajax 请求，支撑前后端分离开发	低：成熟库，版本稳定
fs-extra	文件系统操作，简化文件处理逻辑	低：标准扩展库，依赖稳定

8.2 配合事项

• 团队培训：开展 MCP 工具使用及新工作流程培训
• 知识库维护：定期整理、更新团队测试经验
• 版本管理：做好 MCP 服务器版本升级及兼容性维护

九、数据指标

9.1 指标定义

指标	统计方式	说明
交付效果	提效天数 / 总研发周期天数	原自测联调占比 20%，预计提效 5%
自测&联调周期占比	(自测+联调天数) / 总研发周期天数	目标从 20% 降至 15%
质量效果	Bug 密度（千行代码）	衡量代码质量
AI 测试用例采纳率	实际采纳用例数 / AI 首次生成用例数	目标＞80%
AI 测试用例覆盖率	AI 首次生成用例 / QA 提供测试用例	目标＞80%
AI Mock 数据准确率	1 - 人工调整数据 / AI 首次生成数据	目标＞80%

十、总结

10.1 核心价值

价值点	说明
效率提升	减少前端自测耗时，交付提速 5%+
质量保障	AI 测试用例覆盖率 80%+，AI Mock 数据准确率 80%+
经验沉淀	以团队知识库为核心，实现测试经验积累与复用
标准化	统一 Mock 方案，保障输出质量一致性

10.2 技术亮点

技术点	说明
MCP 协议集成	作为 AI 与外部系统的标准化连接协议（类似 AI 的 USB-C 端口），与 Cursor IDE 无缝集成，用户体验最优
智能场景检测	基于 URL 参数自动识别测试场景，提升覆盖效率
调试体验优化	解决 MockJS Network 面板显示问题，降低调试成本
知识库驱动	基于团队经验智能匹配，生成贴合业务的 Mock 配置

10.3 后续规划

• 扩充团队测试知识库，丰富经验储备
• 优化 AI 测试用例生成逻辑，提升准确率
• 扩展 IDE 与框架支持范围，降低使用限制
• 完善监控统计体系，强化数据驱动迭代

十一、参考资料

• MockJS 官方文档（可生成随机数据、拦截 Ajax 请求，支持前后端分离开发）
• Model Context Protocol 规范
• Cursor MCP 集成指南
• 前端测试最佳实践