15分钟上手AI驱动的E2E测试
学会用自然语言编写E2E测试，通过AI智能体自动操作页面验证功能。掌握agent.act/assert与Playwright断言混合编写模式，大幅降低UI测试维护成本，让回归测试接近零成本运行。
15分钟上手AI驱动的E2E测试
写E2E（端到端）测试最折磨人的是什么？不是写业务逻辑，而是维护那些用一堆定位器拼出来的UI测试——只要前端改个class名或者挪个按钮，测试就红了，你得花半天去修定位器。
有一种新思路：用自然语言描述测试目标，让AI agent自己去操作页面、验证结果。 这篇教程带你用 tester-army/e2e 这个框架，从零配置到跑通第一个完整测试用例。
一、前置条件
动手前确认环境满足以下要求：
- Node.js >= 18（推荐LTS版本）
- npm 或 pnpm（任选包管理器）
- 一个 大模型 API Key（支持OpenAI、Anthropic等，也可用本地模型）
- 基本的 TypeScript 语法基础
- 能访问目标Web应用（本地localhost或线上地址均可）
不需要任何Playwright经验，框架底层已封装好，专注测试逻辑即可。
二、初始化项目
打开终端，进入项目目录执行：
bash
npx e2e init这条命令会交互式引导完成三项配置：
- 选择引擎：
web（基于Playwright的浏览器测试）或mobile（iOS/Android模拟器） - 配置模型provider：填入API Key
- 生成配置文件和示例测试
初始化完成后，项目会出现以下结构：
└── tests/
└── example.e2e.ts ← 自动生成的示例测试根目录同时生成 e2e.config 配置文件，保存引擎和模型设置。
三、理解测试用例结构
打开生成的示例文件：
typescript
// tests/checkout.e2e.ts
import { test, expect } from 'e2e';
test('a member upgrades to Pro', async ({ app, agent, screen }) => {
await app.open('/settings/billing');
// agent 用自然语言描述操作
await agent.act('upgrade the workspace to the Pro plan');
await agent.assert('the invoice preview shows a prorated amount');
// 传统定位器断言作为验证兜底
await expect(screen.getByRole('status')).toContainText('Pro');
});三个核心对象各司其职：
| 对象 | 职责 | 说明 |
|---|---|---|
app |
页面导航 | app.open() 打开指定URL |
agent |
AI智能体 | agent.act() 用自然语言描述操作；agent.assert() 描述期望结果 |
screen |
元素查询 | 标准定位器API，与Playwright兼容，用于精确断言 |
缓存机制是关键：首次运行测试时，agent.act() 会调用大模型理解自然语言指令，生成具体操作步骤并缓存。页面结构不变时，后续运行直接回放缓存的操作序列，完全不调用大模型。只有前端更新导致缓存失效，才会重新调用模型。这既保留智能性，又控制成本。
四、实战：编写真实业务测试
测试场景：用户登录后创建一条工单。
步骤1：创建测试文件
在 tests/ 目录下新建 create-ticket.e2e.ts：
typescript
import { test, expect } from 'e2e';
test('用户登录后创建工单', async ({ app, agent, screen }) => {
// 1. 打开登录页
await app.open('http://localhost:3000/login');
// 2. 让agent执行登录操作
await agent.act('输入用户名 admin@example.com 和密码 123456，然后点击登录按钮');
// 3. 等待登录后跳转到首页
await expect(screen.getByRole('heading', { name: '工作台' })).toBeVisible();
// 4. 让agent导航到工单页面并创建工单
await agent.act('点击侧边栏的工单管理，然后点击新建工单');
await agent.act('填写标题为测试工单、描述为这是AI自动生成的工单，选择优先级为中，然后提交');
// 5. 验证工单是否创建成功
await agent.assert('页面上显示一条标题为测试工单的工单记录');
await expect(screen.getByText('测试工单')).toBeVisible();
});agent用法技巧：把复杂操作拆解成多个 agent.act() 调用，而不是塞进一句话。出错时能快速定位是哪一步出了问题，调试更友好。
步骤2：运行测试
bash
## 运行单个测试文件
npx e2e run tests/create-ticket.e2e.ts
## 运行所有测试
npx e2e run tests/首次运行会调用大模型生成操作序列，后续运行直接回放。页面没有变化时，测试跑得飞快。
五、常见问题与解决
agent操作失败怎么处理？
按顺序排查：
- 页面是否已加载完成？在
agent.act()前用await expect(screen.getByRole(...)).toBeVisible()等待目标元素出现 - 自然语言描述是否具体？避免模糊表达，明确写出元素名称、按钮文案
- 页面变化导致缓存失效？删除缓存目录（通常在
.e2e/cache/），让agent重新学习
API费用会不会很高？
日常回归测试阶段接近零成本。页面结构不变，后续运行不产生任何模型调用费用。只有UI更新导致缓存失效时，才会重新调用模型。
如何关闭遥测数据上报？
框架默认匿名收集命令行执行情况，不需要可关闭：
bash
npx e2e telemetry disable
## 或设置环境变量
export E2E_TELEMETRY_DISABLED=1版本兼容性提醒
框架仍在活跃开发中，小版本的API和配置可能发生变化。建议在 package.json 中锁定版本号，升级前先跑一遍现有测试确认兼容性。
六、总结
今天完成的步骤：
- 初始化项目：
npx e2e init交互式配置 - 理解核心对象：
app导航、agent智能操作、screen精确断言 - 编写测试：把业务场景拆成
agent.act()+expect()组合 - 运行测试：
npx e2e run，首次学习后续回放 - 控制成本：利用缓存机制，日常回归零调用
下一步：多项目有E2E需求时，可以把 e2e 接入CI/CD流水线，在PR合并前自动跑测试。框架还提供 @e2e-dev/github 包，能把测试结果作为PR评论直接展示，适合团队协作。
完整文档：e2e.tester.army/docs 或初始化后查看 node_modules/e2e/docs 离线版。遇到问题可以到他们的Discord社区交流。
项目地址：tester-army/e2e