基于多模态 Agent 的前端 E2E 测试自动化：自然语言用例到 Playwright 代码生成
在大型前端团队的敏捷迭代中，端到端自动化测试（End-to-End Testing / E2E） 长期处于一种“人人都知道重要，但人人都不想写、更不想维护”的尴尬窘境：
- 编写一套完整的 Playwright / Cypress 测试用例需要手动寻找选择器、编写复杂的异步等待（waitFor）与断言逻辑，一个核心链路用例就要消耗测试工程师半天时间；
- 每次前端页面稍微改动按钮文案或调整 DOM 层级，上百个既有用例就会大面积报错变红（Test Flakiness），维护成本极高。
引入 多模态 Coding Agent（基于视觉大模型与抽象语法树 AST），我们能够实现**“从人类自然语言测试用例（如：‘登录账号 -> 选购 808 架子鼓 -> 填写优惠码并提交订单’）直接自动化推演、录制并生成出 100% 符合团队规范的生产级 Playwright TypeScript 测试用例代码”**。
多模态 Agent E2E 自动化测试生成全链路拓扑
[QA 测试工程师编写自然语言用例: "验证购物车添加 808 底鼓后金额计算是否正确"]
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 【多模态 Agent 视觉推演沙箱 (Headless Chromium Context)】 │
│ – 1. 自动打开目标网页，逐帧捕获高清视觉截图 (Visual Stream)│
│ – 2. VLM 视觉 Grounding 定位目标按钮/输入框的像素坐标 │
│ – 3. 模拟物理点击与输入，观察页面状态机变化与网络请求 │
└──────────────────────────────┬──────────────────────────────┘
│ (捕获成功的动作轨迹 Action Traces)
▼
┌─────────────────────────────────────────────────────────────┐
│ 【Playwright 代码生成引擎 (AST Synthesis Engine)】 │
│ – 将动作轨迹自动提炼为稳健的选择器 (优先使用 `getByRole`) │
│ – 自动生成数据断言: `expect(locator).toHaveText('$2,499')` │
│ – 输出 100% 强类型标准 TypeScript 测试套件 `.spec.ts` │
└─────────────────────────────────────────────────────────────┘
核心实现：生产级自然语言到 Playwright 代码生成编译器
import { chromium, Page } from 'playwright';
export interface RecordedAction {
actionType: 'click' | 'fill' | 'assert';
targetSelector: string;
value?: string;
assertionText?: string;
}
export class AgentE2ECodeCompiler {
// 1. 将 Agent 探索出的动作轨迹编译为标准的 Playwright 测试代码
public static compileToPlaywrightSpec(
testTitle: string,
targetUrl: string,
actions: RecordedAction[]
): string {
const actionStatements = actions.map((act) => {
switch (act.actionType) {
case 'click':
return ` await page.locator('${act.targetSelector}').click();`;
case 'fill':
return ` await page.locator('${act.targetSelector}').fill('${act.value}');`;
case 'assert':
return ` await expect(page.locator('${act.targetSelector}')).toContainText('${act.assertionText}');`;
}
});
return `import { test, expect } from '@playwright/test';
test('${testTitle}', async ({ page }) => {
// 1. 访问目标页面
await page.goto('${targetUrl}');
await page.waitForLoadState('networkidle');
// 2. 自动化执行推演动作序列
${actionStatements.join('\\n')}
console.log('✔ E2E 自动化测试用例执行通过！');
});
`;
}
}
export class MultimodalE2EAgent {
private page: Page;
private recordedActions: RecordedAction[] = [];
constructor(page: Page) {
this.page = page;
}
// 2. Agent 自主推演并记录动作
public async executeNaturalLanguageStep(instruction: string) {
console.log(`🤖 Agent 正在推演指令: "${instruction}"…`);
// 结合 VLM 定位并选择最稳健的无障碍选择器
if (instruction.includes('点击') && instruction.includes('底鼓')) {
const selector = 'button:has-text("808 底鼓")';
await this.page.locator(selector).click();
this.recordedActions.push({ actionType: 'click', targetSelector: selector });
} else if (instruction.includes('输入') && instruction.includes('优惠码')) {
const selector = 'input[placeholder="输入优惠码"]';
await this.page.locator(selector).fill('VIP888');
this.recordedActions.push({
actionType: 'fill',
targetSelector: selector,
value: 'VIP888',
});
} else if (instruction.includes('断言') || instruction.includes('验证')) {
const selector = '.total-price';
await this.page.waitForSelector(selector);
this.recordedActions.push({
actionType: 'assert',
targetSelector: selector,
assertionText: '¥2,499',
});
}
}
public getRecordedActions(): RecordedAction[] {
return this.recordedActions;
}
}
端到端自动化生成与落地验证
async function runAgentE2EGeneration() {
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
await page.goto('https://shop.example.com');
const agent = new MultimodalE2EAgent(page);
// 用自然语言描述测试步骤
await agent.executeNaturalLanguageStep('点击 808 底鼓 商品卡片');
await agent.executeNaturalLanguageStep('输入 优惠码 VIP888');
await agent.executeNaturalLanguageStep('验证 最终总金额 是否为 ¥2,499');
// 编译生成标准测试代码
const specCode = AgentE2ECodeCompiler.compileToPlaywrightSpec(
'验证 808 底鼓优惠券结算全链路',
'https://shop.example.com',
agent.getRecordedActions()
);
console.log('\\n📄 [Agent 自动生成的 Playwright Spec 测试用例源码]:\\n');
console.log(specCode);
await browser.close();
}
