向你的新 QA 队友问好：端到端测试 AI 助手

Zhaopeng_Xuan
494 阅读8分钟

你可以在这里看我原来的英文版本 dev.to/robin_xuan_…

我自己用chatgpt翻译的，稍微有些生硬，大家凑活看， 但是内容还是比较充实的！

如需背景，请参见 使用 UI-Tars 进行 AI 测试的往事，该文章展示了在测试自动化中使用 UI-Tars 和 Midscene.js 的实际 AI 应用。

你将从本博客获得什么

1️⃣ 你将看到 AI 如何提升端到端测试——不是理论，而是通过真实的实践演示。 我将通过一个真实示例演示几个日常使用场景，并展示 一个基于playwright+midscene.js E2E Test AI Agent 的关键功能：

  • 用自然语言完整编写测试——无需编程
  • 交互式创建测试，就像与 QA 工程师配对测试
  • AI Agent 处理所有测试数据准备（例如用户、产品等）
  • 生成的测试可以作为现有回归测试套件的一部分执行
  • 自动修复失效的元素定位器和测试步骤
  • 比手写脚本更高的稳定性，减少 flaky
  • 通过图片提示识别元素
  • 测试执行速度与 Playwright 脚本相同

2️⃣ 我将介绍 这个 E2E Test AI Agent 的架构，基于你自己的 E2E 自动化框架和 Midscene.js，让你能够拥有自己的 AI Agent。

3️⃣ 最后的结论，我将分享未来的步骤和即将面临的挑战，并结合我与 UX 设计师、产品经理和 QA 工程师的实际工作坊经验。

🚀 最终，你可以在自己的组织中构建 E2E Test AI Agent，将其作为你的新队友，从而实现左移、可扩展、稳定、快速、低维护且低成本的 AI 驱动端到端测试解决方案。

先来看演示

  • 00:00 根据验收标准交互式生成测试
  • 01:50 从头执行生成的测试

DemoInteractive E2E Test AI Agent

通过 E2E Test AI Agent 展示的使用场景

通过在 E2E 自动化测试中应用 LLM，我希望实现以下目标：

  • 提高 E2E 测试编写和维护效率

    • 将 编写 2-3 个相似 E2E 测试约 30 分钟 缩短到 0 分钟
    • 将 无休止的维护 降低到 每周几个小时

  • 将 E2E 自动化测试左移

    • 从 QA 编写测试用例 转向 复用 PM 的验收标准和 UX 设计作为测试用例

  • 打通产品经理和 UX 设计师在 E2E 自动化测试中的参与

    • 从 需要编码技能 转向 无需编码技能

支持用例的关键功能

1. 原则

Image description

想象每个质量参与者身边都有一个 E2E Test AI Agent，它紧跟你的每一步操作，聆听你对每个功能的验收标准描述，就像与 AI 伙伴配对测试一样。

作为人类：你逐步描述验收标准，每个功能都对齐 UX 设计，同时与 AI Agent 协作。

作为 E2E Test AI Agent：它按顺序听取每个请求，沿途生成代码，并最终组装成完整、可复用的 E2E 测试脚本，可在 CI 中反复执行。

2. 自然语言交互式创建测试

Image description

我们在 CreativeFabrica 开发的 E2E Test AI Agent 拥有应用上下文知识，能够理解诸如“Home page”这样的概念。

3. 处理测试数据准备

Image description

与典型的 QA AI Agent 不同，我们的解决方案集成了现有 E2E 自动化框架。因此，它不仅能执行浏览器操作，还可以执行后端操作，例如无需依赖 UI 即可准备测试数据。

4. 生成更少 flaky 且自愈的测试代码

Image description

我们不是简单地将自然语言翻译为 Midscene.js 函数调用，而是在代码生成过程中融入测试最佳实践。这样可以避免原生 midscene.js 常见的 flaky 问题，特别是在异步等待和 lazy loading 上。

例如，当人类说：“Click the 1st Product”，它会生成以下代码：

      await aiWaitFor("1st product is visible")
      await Promise.all([
        cleanPage.waitForURL(url => {
          return url.href.includes("/product/autopub-graphic/")
        }),
        aiTap("1st product")
      ])

它利用 AI 识别并点击“1st Production”，同时动作被包装在最佳实践代码中，确保生成的测试在自愈的同时保持稳定。

5. 通过截图定位元素

Image description

得益于 Midscene.js 的新功能，我们的 E2E Test AI Agent 现在可以使用图片作为定位器！不再仅依赖传统选择器，我们可以直接将应用界面或 UI 设计的截图用作定位器。

这使得测试复杂系统变得更加容易，尤其是那些基于 Canvas 或 AI 驱动的界面——传统选择器往往难以胜任。

6. 测试执行快速且相对低成本

得益于 Midscene.js 的缓存机制，一旦生成测试用例，AI 操作中使用的大部分元素都会被缓存。这意味着我们不必在每次 CI 执行时都调用 LLM（节省成本），仅在元素变化或步骤计划更新时才调用。基本测试执行基于 Playwright，你将享受 Playwright 的高速执行体验。

E2E Test AI Agent 架构

Image description

我们的核心设计理念是“即插即用”。我们将 midscene.js 函数、Playwright 函数以及内部 E2E 自动化框架视为可互换模块，AI Agent 可以调用它们，就像搭积木一样。

不仅如此，midscene.js 和我们的框架都进行了二次打包，将最佳实践直接融入代码生成过程，从而确保生成代码本身稳定可靠。

为了增强 Agent 的推理能力，我们还引入了双层 RAG：

  • 第一层：帮助 Agent 从人类输入中理解语义
  • 第二层：支持 midscene.js aiAction() 的 LLM 步骤规划

这样，Agent 不再盲目执行，而是理解意图、制定计划，并在稳健的测试实践支持下执行。

关键组件/层次

- 层 1：从自然语言到定义工具
将自然语言验收标准翻译为可执行的结构化操作和断言，并生成不同格式的输出。

- 层 2：框架集成
将现有 E2E 测试框架、Midscene.js 函数和 Playwright 原生函数封装为 LLM 工具，并共享单一 Playwright 浏览器上下文。

- 层 3：AI 驱动规划
Midscene.js 协调其余部分：规划 AI 步骤、解析当前截图和 HTML DOM，并自主决定下一步最佳操作。

测试用例元数据

在当前范式下，由 E2E-Test AI Agent 创建并自动执行的测试用例包含三层核心元数据：

  1. 验收标准（人类输入）：由人类以自然语言直接表达的意图

  2. 可执行测试代码（自动生成）：基于 Playwright 的代码，与现有 E2E 框架无缝集成

  3. 元素定位缓存（AI 生成）：HTML 元素的缓存映射，用于快速执行。仅当缓存过期或缺失时，Agent 才会再次调用 LLM 解析新定位器

通过这三层，测试用例不再是静态工件，而是自适应实体，平衡了人类意图、系统执行和 AI 辅助的稳健性。

演示视频中导出的文件如下： Exported files

我的结论

  • AI 在端到端自动化测试领域将快速发展，并必然扩展到更多测试领域。这不仅是可能性，而是不可阻挡的趋势。

  • 在当前 AI 状态下，仅依赖 LLM 实现复杂自动化测试仍具挑战。但与现有 E2E 测试框架结合时，可以带来更好、更实用的体验。

  • 我们肯定会看到更多 AI 驱动的实用测试工具出现。针对 Playwright，我强烈推荐使用 Midscene.js。对于 Selenium/Appium，我们可能很快会看到名为 Vibium 的新工具（据我了解仍在研发中，由 Selenium 的创作者提出）。

  • 对于 QA 工程而言，这不仅仅是一个工具开发，更是对整个测试流程和质量管理方式的革新。

挑战

我与 QA 工程师、产品经理和 UX 设计师组织了 1 小时工作坊，使用 LLM Gemini 2.5-Flash 体验 E2E Test AI Agent，并收集了以下挑战：

  • 智能性：系统能否准确理解测试步骤的意图？为此，我们需要明确定义的验收标准，以及如何编写 LLM 可理解的验收标准指南。

  • 准确性：LLM 的视觉能否正确确定交互元素的坐标？使用 gemini-2.5-flash 时，该模型能准确定位约 80% 的较大 HTML 元素，但约 20% 存在坐标偏差。对于较小元素（如复选框），常常无法定位。为解决此问题，我们针对不同任务使用不同模型：语义分析使用小模型，规划使用深度思考模型（如 DeepSeek R3），元素定位使用视觉优化模型（如 UI-Tars）。

  • 步骤可交互、可重复、可回退且稳定：每一次人机交互都应可重复、可回退且稳定。我们发现 AI 有时会执行无用操作，这些操作也会生成代码。人为可能需要纠正之前错误的步骤，因此每个步骤必须是原子性的，以保证可靠性和可回滚性。

欢迎交流！

欢迎点赞、评论或分享本博客，你的反馈对我很重要！

Big thanks to these guys:

@software{Midscene.js,
  author = {Zhou, Xiao and Yu, Tao},
  title = {Midscene.js: Let AI be your browser operator.},
  year = {2025},
  publisher = {GitHub},
  url = {https://github.com/web-infra-dev/midscene}
}
avatar
文章
阅读
粉丝