🧠 1. 输入信息收集（Prompt Design）

AI 生成测试用例的前提是了解你系统的以下信息：

• 用户故事/业务流程：例如，“用户可以登录、搜索产品并加入购物车”。
• 页面结构或 UI 元素信息：可以是 HTML、组件树或页面截图。
• 可用的测试框架：如 Playwright、Cypress、Puppeteer、Selenium 等。
• 测试语言偏好：JavaScript/TypeScript、Python、Java 等。
• API 文档/接口规范（如 Swagger）：用于后端集成测试。

⚙️ 2. 大模型生成测试用例的方式

大模型主要扮演 自然语言转代码 的角色，以下是具体流程：

✅ 示例 Prompt（面向 ChatGPT 或 API）

1
2
3
4
5
6
7
8
9
10
11
12
13
14

你是一个经验丰富的测试工程师。请根据以下用户流程生成一份基于 Playwright 的 E2E 测试脚本，使用 TypeScript：

用户流程：
1. 用户访问首页 https://myshop.com
2. 点击“登录”
3. 输入邮箱和密码（email: test@example.com, password: 123456）
4. 登录成功后，搜索“iPhone 15”
5. 在搜索结果中点击第一个商品
6. 点击“加入购物车”
7. 验证购物车中包含此商品

要求：
- 使用 async/await
- 包含断言检查

🧪 模型输出示例（Playwright）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { test, expect } from '@playwright/test';

test('用户登录并添加商品到购物车', async ({ page }) => {
  await page.goto('https://myshop.com');

  await page.click('text=登录');
  await page.fill('input[name="email"]', 'test@example.com');
  await page.fill('input[name="password"]', '123456');
  await page.click('button:has-text("登录")');

  await expect(page).toHaveURL(/dashboard/);

  await page.fill('input[placeholder="搜索"]', 'iPhone 15');
  await page.click('button:has-text("搜索")');

  await page.click('.product-list .product-item:first-child');

  await page.click('button:has-text("加入购物车")');

  await page.click('a:has-text("购物车")');
  await expect(page.locator('.cart-items')).toContainText('iPhone 15');
});

🤖 3. AI 自动化集成的方式

✅ 可嵌入工作流的方式有：

• CI/CD 流程中自动生成回归测试脚本
• 结合低代码工具（如 Retool、Internal.io）可视化测试步骤
• 结合页面爬虫 + GPT 自动构造页面交互路径
• AI agent（如 AutoGPT）逐页探索 UI 并生成测试用例

🧩 4. 与其他工具的集成建议

🛠️ 5. 最佳实践建议

• 优先从**常见用户流程（happy path）**生成测试
• 用 mock 数据或 test account 避免破坏生产环境
• 每次部署后用 GPT 自动对比 UI 改动并生成差异测试
• 若产品设计采用 Figma，可通过 Figma plugin 提取页面结构生成测试脚本

在比较 React 组件测试 和 E2E 自动化测试 的自动生成难度时，有以下几个关键维度可以帮助你理解：

✅ 总体结论：

🔍 原因详解：

一、React 单元/集成测试（通常使用 Jest + Testing Library）

✔️ 更容易自动化的原因：

• 输入输出明确（props、state）
• 通常只涉及一个组件，不依赖后端或完整页面流程
• DOM结构清晰、可预测（模型能通过 JSX 推理测试）
• 更容易 mock 外部依赖（如 API、context）

🧠 示例：

1
2
3
4

// Button.tsx
export function Button({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

GPT 很容易生成测试：

1
2
3
4
5
6
7
8
9

import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from './Button';

test('点击按钮触发事件', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick} />);
  fireEvent.click(screen.getByText('Click me'));
  expect(handleClick).toHaveBeenCalled();
});

二、E2E 测试（使用 Playwright / Cypress 等）

🚫 更复杂的原因：

• 需要理解多个页面之间的业务流程
• 涉及异步网络请求、认证、环境配置
• 页面元素可能是动态加载、难以定位
• UI 样式或布局变化可能导致测试失败
• 更依赖完整的运行系统或 mock 服务

📊 总结对比

✨ 实战建议：

• 先用 AI 自动生成 React 测试（快速提升覆盖率）
• 然后手动 + AI 辅助生成核心的 E2E 流程测试（如登录、下单等）
• E2E 生成可结合低代码 UI 抽象或页面爬虫辅助结构分析