AI 驱动的全栈与微信小程序自动化开发测试方案

一、方案概述与目标

在以 WSL Ubuntu 作为主要开发环境、依托 AI Agent 进行全栈开发与自测的场景下，本方案旨在建立一套覆盖 微信小程序（App / MerchantApp）、Web 后台（AdminWeb / MerchantWeb） 以及 后端 API（Api） 的全自动化测试与质量保障体系。

核心测试目标

功能准确性：业务逻辑链路畅通，按钮交互、表单提交、流程跳转 100% 符合预期。
数据准确性：组件状态、页面 data、接口入参/出参与本地存储数据准确一致。
界面 UI 规范：元素排版对齐、色彩对比度、字体层级、适配无溢出/截断。
交互体验 UX：Loading 加载态、空数据提示（Empty State）、网络异常/报错反馈（Toast/Dialog）友好完整。

二、测试体系全景与技术选型

模块 / 平台	测试类型	核心工具库	运行环境	验证方式
微信小程序 `App/` `MerchantApp/`	端到端 (E2E) UI / UX 审查功能与数据断言	`miniprogram-automator` + `Jest`	WSL（测试脚本） + Windows（开发者工具内核）	驱动模拟器交互 + `page.screenshot()` 截图交由 AI 多模态视觉审查
Web 管理端 `AdminWeb/` `MerchantWeb/`	UI/E2E 自动化测试视觉回归	`Playwright` (Headless Chromium)	WSL 原生运行	无头浏览器运行 + 自动截屏 + 视觉与 DOM 断言
后端接口 `Api/`	单元/集成测试接口数据校验	`JUnit 5` + `MockMvc` / `REST-assured`	WSL 原生运行	内存/测试库数据校验、HTTP 状态码及 JSON Payload 断言
云端流水线 `CI/CD`	持续集成上传多机型真机兼容	`miniprogram-ci` + 微信云测 (MiniTest)	Linux / WSL / 流水线	无头编译上传 + 云端真机兼容性/Monkey 自动跑测

三、微信小程序：AI 自动化测试闭环（核心方案）

1. 架构原理

┌──────────────────────────────────────────────────────────────────────────┐
│                             WSL Ubuntu 环境                              │
│                                                                          │
│  [ AI Agent (开发与测试执行大脑) ]                                          │
│         │                                                                │
│         ├─ 1. 编写业务代码与测试用例 (Jest + miniprogram-automator)          │
│         ├─ 2. 执行自动化测试脚本 (WebSocket 连接 Windows 端口)              │
│         ├─ 3. 收集测试产物：页面 data、网络日志、高清渲染截图                  │
│         └─ 4. 多模态视觉分析截图 (审查排版、颜色、溢出、UX 状态)              │
│                     │ (发现缺陷自主修复代码)                               │
└─────────────────────┼────────────────────────────────────────────────────┘
                      │ WebSocket 通信 (ws://127.0.0.1:9420)
┌─────────────────────▼────────────────────────────────────────────────────┐
│                             Windows 宿主机                               │
│                                                                          │
│  [ 微信开发者工具 (无头/模拟器渲染引擎) ]                                     │
│         └─ 启动命令: cli auto --project "<Windows路径>" --auto-port 9420 │
└──────────────────────────────────────────────────────────────────────────┘

2. 环境配置步骤

(1) Windows 宿主机配置（一次性）

打开微信开发者工具 $\rightarrow$ 设置 $\rightarrow$ 安全设置 $\rightarrow$ 打开 服务端口。
启动自动化服务（可通过终端脚本或快捷方式）：
cmd
```
cli auto --project "D:\projects\xiedao\App" --auto-port 9420
```

(2) WSL Ubuntu 端配置

在对应的小程序目录（如 App/ 或 MerchantApp/）安装测试依赖：

bash

npm install miniprogram-automator jest --save-dev

3. 测试用例编写规范（全维度验证）

在项目 tests/ 目录下创建测试用例（例如 tests/goods_detail.spec.js）：

javascript

const automator = require('miniprogram-automator');
const path = require('path');
const fs = require('fs');

describe('商品详情页全维度自动化测试', () => {
  let miniProgram;
  let page;
  const artifactDir = path.join(__dirname, '../artifacts/screenshots');

  beforeAll(async () => {
    if (!fs.existsSync(artifactDir)) {
      fs.mkdirSync(artifactDir, { recursive: true });
    }
    // 连接宿主机自动化端口
    miniProgram = await automator.connect({
      wsEndpoint: 'ws://127.0.0.1:9420',
    });
  }, 30000);

  test('1. 页面初次加载与正常态 UI/数据校验', async () => {
    page = await miniProgram.reLaunch('/pages/goods/detail?id=1001');
    await page.waitFor(800);

    // [数据准确性校验]
    const data = await page.data();
    expect(data.goodsInfo).toBeDefined();
    expect(data.goodsInfo.title).toBeTruthy();
    expect(data.goodsInfo.price).toBeGreaterThan(0);

    // [UI/UX 截图 1: 正常加载完成态]
    await miniProgram.screenshot({
      path: path.join(artifactDir, 'goods_detail_normal.png'),
    });
  });

  test('2. 交互功能与规格弹窗校验', async () => {
    // 模拟点击“选择规格”
    const specBtn = await page.$('.spec-select-bar');
    await specBtn.tap();
    await page.waitFor(300);

    // [UI/UX 截图 2: 规格弹窗弹出态]
    await miniProgram.screenshot({
      path: path.join(artifactDir, 'goods_spec_popup.png'),
    });

    // 选中某个规格项
    const skuItem = await page.$('.sku-item:not(.disabled)');
    await skuItem.tap();

    // 点击确定购买
    const confirmBtn = await page.$('.popup-confirm-btn');
    await confirmBtn.tap();
    await page.waitFor(500);

    // [断言路由跳转与订单确认页]
    const currentPage = await miniProgram.currentPage();
    expect(currentPage.path).toBe('pages/order/confirm');
  });

  test('3. 边界与异常状态（空数据/加载态）校验', async () => {
    // 访问不存在的商品 ID
    page = await miniProgram.reLaunch('/pages/goods/detail?id=999999');
    await page.waitFor(500);

    // [UI/UX 截图 3: 缺省与错误反馈态]
    await miniProgram.screenshot({
      path: path.join(artifactDir, 'goods_detail_empty_state.png'),
    });

    const data = await page.data();
    expect(data.isEmpty || data.isError).toBe(true);
  });

  afterAll(async () => {
    await miniProgram.disconnect();
  });
});

四、Web 管理端自动化方案（Playwright）

针对 AdminWeb/ 和 MerchantWeb/，在 WSL 内直接运行无头 Chromium 浏览器，具备毫秒级响应和像素级截图能力。

1. 依赖安装（WSL 端）

bash

cd AdminWeb
npm install -D @playwright/test
npx playwright install chromium --with-deps

2. 测试与视觉审查脚本示例 (`e2e/login_and_dashboard.spec.js`)

javascript

const { test, expect } = require('@playwright/test');

test('管理员登录与数据看板加载测试', async ({ page }) => {
  await page.goto('http://localhost:8081/#/login');

  // 输入账号密码
  await page.fill('input[type="text"]', 'admin');
  await page.fill('input[type="password"]', 'admin123');
  await page.click('button[type="submit"]');

  // 等待进入控制台
  await page.waitForURL('**/index');
  await expect(page.locator('.dashboard-container')).toBeVisible();

  // 截取全屏图供 AI 审查
  await page.screenshot({ path: 'artifacts/admin_dashboard.png', fullPage: true });
});

五、后端 API 自动化验证方案（Api）

在 WSL 内运行 Spring Boot 集成测试，验证业务规则与数据库操作一致性：

bash

cd Api
mvn test -Dtest=*ControllerTest

接口入参校验（Validation）
数据库事务一致性（MyBatis 读写断言）
权限校验（Security / Role DataScope）

六、CI/CD 自动化部署与微信云测

当本地自测全部通过后，通过脚本无缝对接到持续部署流水线：

1. 代码打包与免登上传 (`miniprogram-ci`)

bash

npx miniprogram-ci upload \
  --pp ./App \
  --pkp ./private.key \
  --appid <APPID> \
  --uv 1.0.0 \
  --ud "CI 自动化测试通过后自动发布"

2. 微信云测平台（多机型兼容性真机测试）

每周享有微信官方赠送的免费真机测试时长。
在发布前触发自动化 Monkey 兼容性测试和性能分析报告（冷启动时间、内存泄漏、白屏检测）。

七、AI 自动化“开发-测试-审查-修复”指令操作手册

开发完新功能后，可直接对 AI 发出以下标准化指令：

📝 指令模板 1：全功能自动化开发与自测闭环

markdown

我已完成【功能/页面名称】的开发。请执行以下自测流程：
1. 编写或运行 tests 目录下的自动化测试脚本。
2. 捕获关键状态（正常态、弹窗交互态、空数据态、报错提示态）的渲染截图。
3. 请使用多模态视觉能力检查截图：
   - 是否存在文字折行、组件溢出、层级遮挡问题？
   - 间距与色彩视觉层级是否协调优雅？
4. 验证测试用例中的所有功能断言与数据准确性。
5. 若发现任何问题，请自主修改代码直至测试全部通过。

📝 指令模板 2：发版前全量回归测试

markdown

请对【小程序端 / Web 管理端】执行全量回归测试套件：
1. 运行所有 spec 测试用例并生成测试摘要。
2. 输出测试覆盖率与截图清单。
3. 测试全部通过后，生成上线发布说明。

AI 驱动的全栈与微信小程序自动化开发测试方案 ​

一、方案概述与目标 ​

核心测试目标 ​

二、测试体系全景与技术选型 ​

三、微信小程序：AI 自动化测试闭环（核心方案） ​

1. 架构原理 ​

2. 环境配置步骤 ​

(1) Windows 宿主机配置（一次性） ​

(2) WSL Ubuntu 端配置 ​

3. 测试用例编写规范（全维度验证） ​

四、Web 管理端自动化方案（Playwright） ​

1. 依赖安装（WSL 端） ​

2. 测试与视觉审查脚本示例 (e2e/login_and_dashboard.spec.js) ​

五、后端 API 自动化验证方案（Api） ​

六、CI/CD 自动化部署与微信云测 ​

1. 代码打包与免登上传 (miniprogram-ci) ​

2. 微信云测平台（多机型兼容性真机测试） ​

七、AI 自动化“开发-测试-审查-修复”指令操作手册 ​

📝 指令模板 1：全功能自动化开发与自测闭环 ​

📝 指令模板 2：发版前全量回归测试 ​

AI 驱动的全栈与微信小程序自动化开发测试方案

一、方案概述与目标

核心测试目标

二、测试体系全景与技术选型

三、微信小程序：AI 自动化测试闭环（核心方案）

1. 架构原理

2. 环境配置步骤

(1) Windows 宿主机配置（一次性）

(2) WSL Ubuntu 端配置

3. 测试用例编写规范（全维度验证）

四、Web 管理端自动化方案（Playwright）

1. 依赖安装（WSL 端）

2. 测试与视觉审查脚本示例 (`e2e/login_and_dashboard.spec.js`)

五、后端 API 自动化验证方案（Api）

六、CI/CD 自动化部署与微信云测

1. 代码打包与免登上传 (`miniprogram-ci`)

2. 微信云测平台（多机型兼容性真机测试）

七、AI 自动化“开发-测试-审查-修复”指令操作手册

📝 指令模板 1：全功能自动化开发与自测闭环

📝 指令模板 2：发版前全量回归测试