跳到正文

自动化测试之e2e的使用与实现

本篇来自Gemini的摘抄，是为e2e的使用与实现。

一、测试过程#

假设你刚刚开发好了一个本地的 Web 网站（比如跑在 http://localhost:3000），e2e 参与测试的过程其实非常直观，主要分为以下 4 个步骤：

1. 初始化配置#

你在你的网站项目根目录下运行一条命令：

npx e2e init

它会弹出一个向导，让你选择使用 Web (Playwright) 作为引擎，并配置你的 AI 模型（比如通过 API Key 或 ChatGPT/Copilot 订阅）。配置完成后，它会在你的项目里生成一个 e2e.config.ts 配置文件，告诉框架：“我的网站地址在 http://localhost:3000”。

2. 编写测试脚本#

你可以在项目里新建一个测试文件（例如 tests/agent.e2e.ts），用自然语言 写出你想让 AI 测试的业务流程。比如：

import { test } from'@e2e-dev/web';  
import { expect } from'e2e';  
  
test('用户注册免费试用', async ({ app, agent, screen }) => {  
// 1. 打开你的网站首页  
await app.open('/');   
  
// 2. 像真人一样指挥 AI：“去帮我注册一个账号”  
await agent.act('sign up for a free trial as {name} with email {email}', {  
    params: { name: '杜伟', email: 'duwei@example.test' },  
  });  
  
// 3. 让 AI 检查页面上是不是出现了欢迎语  
await agent.assert('the welcome screen greets 杜伟 by name');  
});

3. 本地运行测试#

在终端敲下运行命令：

npx e2e run tests/agent.e2e.ts

这时候神奇的事情发生了：

  • 框架会在后台自动拉起一个无头浏览器（或者你加 --headed 参数直接用肉眼看它运行），并自动访问你本地启动的网站。
  • 当执行到 agent.act 时，AI 就会接管浏览器——它会“看”网页上的按钮、输入框，自己决定去点击哪个按钮、在哪个输入框里输入你的名字和邮箱。

4. 智能缓存与回放（省钱省时）#

  • 第一次运行 ：AI 会大模型思考，分析页面结构并一步步完成操作。
  • 成功后记录 ：e2e 会把这一步成功的操作轨迹录制并缓存下来。
  • 后续再跑 ：只要你的网页没变，以后的测试就会直接回放 这段轨迹（不花 AI 算力，速度极快）。如果有一天你改了前端代码、把按钮移了个位置，AI 发现回放对不上了，就会自动重新介入，自己去新位置找按钮，不会让测试无脑报错。

你可以把它想象成：你雇了一个不知疲倦、看得懂中文/英文界面的“虚拟测试员”，你只要告诉他“去帮我点登录、填表单”，他就会自己去你的网站里折腾并向你汇报结果。假设你刚刚开发好了一个本地的 Web 网站（比如跑在 http://localhost:3000），e2e 参与测试的过程其实非常直观，主要分为以下 4 个步骤：

1. 初始化配置#

你在你的网站项目根目录下运行一条命令：

npx e2e init

它会弹出一个向导，让你选择使用 Web (Playwright) 作为引擎，并配置你的 AI 模型（比如通过 API Key 或 ChatGPT/Copilot 订阅）。配置完成后，它会在你的项目里生成一个 e2e.config.ts 配置文件，告诉框架：“我的网站地址在 http://localhost:3000”。

2. 编写测试脚本#

你可以在项目里新建一个测试文件（例如 tests/agent.e2e.ts），用自然语言 写出你想让 AI 测试的业务流程。比如：

import { test } from'@e2e-dev/web';  
import { expect } from'e2e';  
  
test('用户注册免费试用', async ({ app, agent, screen }) => {  
// 1. 打开你的网站首页  
await app.open('/');   
  
// 2. 像真人一样指挥 AI：“去帮我注册一个账号”  
await agent.act('sign up for a free trial as {name} with email {email}', {  
    params: { name: '杜伟', email: 'duwei@example.test' },  
  });  
  
// 3. 让 AI 检查页面上是不是出现了欢迎语  
await agent.assert('the welcome screen greets 杜伟 by name');  
});

3. 本地运行测试#

在终端敲下运行命令：

npx e2e run tests/agent.e2e.ts

这时候神奇的事情发生了：

  • 框架会在后台自动拉起一个无头浏览器（或者你加 --headed 参数直接用肉眼看它运行），并自动访问你本地启动的网站。
  • 当执行到 agent.act 时，AI 就会接管浏览器——它会“看”网页上的按钮、输入框，自己决定去点击哪个按钮、在哪个输入框里输入你的名字和邮箱。

4. 智能缓存与回放（省钱省时）#

  • 第一次运行 ：AI 会大模型思考，分析页面结构并一步步完成操作。
  • 成功后记录 ：e2e 会把这一步成功的操作轨迹录制并缓存下来。
  • 后续再跑 ：只要你的网页没变，以后的测试就会直接回放 这段轨迹（不花 AI 算力，速度极快）。如果有一天你改了前端代码、把按钮移了个位置，AI 发现回放对不上了，就会自动重新介入，自己去新位置找按钮，不会让测试无脑报错。

你可以把它想象成：你雇了一个不知疲倦、看得懂中文/英文界面的“虚拟测试员”，你只要告诉他“去帮我点登录、填表单”，他就会自己去你的网站里折腾并向你汇报结果。

二、实现机制#

e2e 框架之所以能实现“AI 动态理解 + 高效低成本运行”，其底层核心由三个关键机制组合而成：

1. 引擎层：基于成熟的自动化底层（Playwright / 移动端模拟器）#

e2e 并不是从零去造一个浏览器控制内核，它在 Web 端直接基于 Playwright （或在移动端基于 iOS/Android 模拟器引擎）。

  • 这意味着 ：浏览器底层的点击、输入、页面加载、元素截图以及基础的 CSS/XPath 定位能力，都是由极其成熟稳定、工业级的现代测试引擎来支撑的，保证了动作执行的准确性。

2. 决策层：AI 代理与大模型（Model-driven Agent）#

当你在代码里调用 agent.act('目标') 时，框架实际上启动了一个 AI 智能体循环（Agent Loop） ：

  • 观察状态 ：AI 会把当前的页面结构（DOM 树或页面截图）精简并喂给大模型。
  • 理解意图 ：大模型结合你用自然语言写的意图（比如“注册免费试用并填入姓名”）和当前页面的视觉/结构信息，自主决定下一步该点哪里、输入什么文本。
  • 闭环纠错 ：如果页面弹出了意外的广告或者布局稍微改动，AI 能够通过语意重新定位到正确的元素，而不会像传统死代码那样直接崩溃。

3. 性能与成本优化：动作录制与智能重放（Action Caching & Replay）#

纯靠 AI 大模型每次都去“思考”网页怎么走，会有两个致命痛点：慢 （大模型推理需要时间）且贵 （每次运行都要烧大量 API Token）。e2e 巧妙地解决了这个问题：

  • 首次探索（AI 介入） ：第一次运行测试时，AI 动态摸索出了一套能够完成目标的精确动作序列 （例如：点击坐标/选择器 A -> 输入文本 B -> 点击按钮 C）。
  • 本地缓存与重放（脱离大模型） ：e2e 会把这套成功的操作路径记录并缓存在本地。在之后的每一次测试运行中，它会直接回放 这段固定的路径，完全不调用大模型 。
  • 自愈机制 ：如果某天你的前端代码改了，导致旧的缓存路径“对不上”了（比如按钮被移走了），e2e 就会自动触发 Fallback 机制 ，重新把控制权交回给 AI 代理，让 AI 现场重新规划、修补这条路径并更新缓存。

它通过这套机制，在“纯 AI 自动化测试太贵太慢”和 “传统自动化测试太脆弱易碎”之间找到了一条非常实用的折中路线。 （原文链接，更新于2026-10-11。）