摘要:你将看到 AI 如何为端到端测试注入强大动力 —— 不是理论上的,而是通过现实世界中的实际演示。我将通过一个现实世界的演示向你展示,该演示解决了几个日常用例,并展示了以下端到端测试 AI 代理的关键功能:
你将从这篇博客中获得什么
1、你将看到 AI 如何为端到端测试注入强大动力 —— 不是理论上的,而是通过现实世界中的实际演示。我将通过一个现实世界的演示向你展示,该演示解决了几个日常用例,并展示了以下端到端测试 AI 代理的关键功能:
完全用自然语言编写测试 —— 不需要编码交互式创建测试,就像与 QA 工程师进行配对测试一样AI 代理处理所有测试数据准备(例如:用户、产品等)生成的测试可以稍后作为现有回归测试套件的一部分执行自动修复损坏的元素定位器和测试步骤比手动编写的脚本更稳定,减少易碎性通过图像提示识别元素以与 Playwright 脚本相同的速度运行测试2、我将介绍端到端测试AI代理的架构,该架构基于你自己的端到端自动化框架与 Midscene.js,以便你可以拥有自己的代理。
3、最后,我将分享未来的步骤和即将面临的挑战,这些见解来自与 UX 设计师、产品经理和 QA 工程师进行的真实工作坊。
最终,你可以在你的组织中构建自己的端到端测试 AI 代理,并将其作为新的团队成员受益,以实现一种左移的可扩展、稳定、快速、低维护且廉价的基于 AI 的端到端测试解决方案。
通过端到端测试 AI 代理展示的用例
这些是我希望通过在端到端自动化测试中应用 LLM 来实现的目标。
提高编写和维护端到端测试自动化的效率从编写 2/3 类似的端到端测试需要大约 30 分钟缩短到 0 分钟;
从无休止的维护变为每周几小时的维护。
将端到端自动化测试左移从 QA 起草测试用例变为重用产品经理的验收标准和 UX 的设计作为测试用例。
为产品经理和 UX 设计师在端到端自动化测试中扫清障碍从需要编码技能变为不需要编码技能
支持使用案例的关键功能
1. 原则
想象一下,每个质量参与者都有一个端到端测试AI代理坐在你身边,当你逐步阐述每个要验证的功能的验收标准时,它会密切倾听,就像与AI合作伙伴进行配对测试一样。
作为人类:你按步骤、按功能描述你的验收标准,将其与 UX 设计对齐,同时与 AI 代理协作。
作为端到端测试AI代理:它按顺序听取每个请求,沿途生成代码,并最终将它们组装成一个完整的、可重复使用的端到端测试脚本,以便在CI中反复执行。
2. 自然语言交互式创建测试
我们在 CreativeFabrica 开发的端到端测试 AI 代理了解应用程序的上下文,并能够解释诸如 “主页” 等上下文的含义。
3. 处理测试数据准备
与典型的 QA AI 代理不同,我们开发的解决方案与我们现有的端到端自动化框架集成。因此,它可以超越简单的浏览器交互,执行后端操作,例如在不依赖 UI 的情况下准备测试数据。
4. 生成的测试代码更稳定且具有自愈能力
我们没有简单地将自然语言翻译成 Midscene.js 调用,而是设计了代码生成以遵循测试最佳实践。这样,我们就可以避免通常会在普通的 midscene.js 中看到的易碎行为,尤其是在异步等待和懒加载方面。例如,当人类说:“点击第一个产品时,它将产生以下代码:
await aiWaitFor("1st product is visible")await Promise.all([cleanPage.waitForURL(url=>{return url.href.includes("/product/autopub-graphic/")}),aiTap("1st product")])它利用 AI 识别并点击 “第一个产品”,但该操作被我们的最佳实践代码包裹,以确保生成的测试在执行时保持稳定,同时具有自愈能力。
5. 通过截图定位元素
得益于 Midscene.js 的新功能,我们的端到端测试 AI 代理现在可以使用图像作为定位器!除了依赖传统的选择器外,我们可以简单地截取应用程序的屏幕截图,甚至是 UI 设计,并直接将其用作定位器。
这使得测试复杂系统变得更加容易,尤其是那些使用 Canvas 或甚至由 AI 驱动的界面构建的系统 —— 在这些系统中,传统定位器常常不足。
6. 快速测试执行且成本相对较低
得益于 Midscene.js 的缓存机制,一旦生成测试用例,大多数在 AI 操作期间使用的元素都会被存储。这意味着我们不需要在每次 CI 执行时调用 LLM(节省预算),只有当元素发生变化或计划步骤更新时才需要调用。基本的测试执行基于 Playwright,你将享受到 Playwright 带来的执行速度。
端到端测试 AI 代理架构
我们的设计核心是一种 “即插即用” 的理念。我们将现有的工具(如 midscene.js 函数、Playwright 函数以及我们自己的端到端自动化框架)视为 AI 代理可以调用的可互换模块,几乎就像拼接乐高积木一样。
但我们并没有止步于此。midscene.js 和我们的框架都被重新打包,将最佳实践直接融入代码生成过程中,因此生成的代码从设计上就是稳定可靠的。
为了增强代理的推理能力,我们还添加了一个双层 RAG 设置:
第一层帮助代理从人类输入中进行语义理解。第二层支持 LLM 从 midscene.js 暴露的 `aiAction` 函数中规划每一步的动作。这样,代理不会盲目执行,而是理解意图,制定计划,然后在坚实的测试实践支持下执行。
关键组件/层
第一层:从人类语言到定义的工具将自然语言的验收标准翻译成可以执行的结构化动作和断言,并获得不同格式的输出。
第二层:框架集成将你现有的端到端测试框架、midscene.js 函数和 Playwright 原生函数封装为 LLM 工具,并确保所有 LLM 工具可以共享一个 Playwright 浏览器上下文。
第三层:AI 驱动的规划midscene.js 负责其余部分:规划 AI 步骤、解释当前的屏幕截图和 HTML DOM,并自主决定下一步的最佳动作。
测试用例元数据
在当前范式下,由端到端测试 AI 代理创建并自主执行的测试用例包含 3 个核心元数据层:
1. 验收标准(人类输入):
人类直接用自然语言表达的意图。
2. 可执行测试代码(自动生成):
基于 Playwright 的代码,可以无缝集成到你现有的端到端框架中。
3. 元素定位器缓存(由 Midscene.js 自动生成的 AI):
缓存的 HTML 元素映射,用于快速执行。只有当缓存过期或缺失时,代理才会再次调用 LLM 来解析新的定位器。
有了这三层,测试用例不再是一个静态的工件,而是一个自我适应的实体,它平衡了人类意图、系统执行和 AI 辅助的弹性。
以下是视频演示中导出的文件:
我的结论
AI 在端到端自动化测试中的应用将迅速且不可避免地扩展到测试的许多其他领域。这不仅仅是一种可能性,而是一种清晰且不可阻挡的趋势。仅靠 LLM 处理复杂的自动化测试仍然具有挑战性。然而,当与现有的端到端测试自动化框架结合时,它可以提供更好且更实用的体验。我们无疑会看到更多由 AI 赋能的实用测试工具出现。但当涉及到与 Playwright 集成时,我强烈推荐使用 Midscene.js。我们可能很快会看到一个名为 Vibium 的新解决方案(据我了解,它仍在开发中,由 Selenium 的创造者提出)。对于 QA 工程师来说,这不仅仅是新工具的开发,它代表了我们对整个测试过程和质量管理方法的转变。挑战
我与QA工程师、产品经理和 UX 设计师一起组织了一个工作坊,让他们参加一个 1 小时的会议,使用 LLM Gemini 2.5-Flash 与这个端到端测试 AI 代理进行互动。我收集了以下挑战:
智能:系统能否准确理解测试步骤的意图?要实现这一点,我们需要明确定义的验收标准,以及如何编写可以被 LLM 解释的验收标准的清晰指导。准确性:LLM 的视觉是否能正确确定要交互的元素的坐标在使用 gemini-2.5-flash 时,该模型可以准确定位大约 80% 的较大 HTML 元素,但大约 20% 的元素存在坐标偏差。对于较小的元素,如复选框,它通常无法定位。为了解决这个问题,我们针对不同任务使用不同的模型:一个较小的模型用于语义分析,“深度思考” 模型(如 DeepSeek R3)用于规划,以及一个视觉优化的模型(如 UI-Tars)用于精确的元素定位。步骤的交互性、可重复性、可逆性和稳定性:人类与 AI 之间的每次互动都应该是可重复的、可逆的和稳定的。我们观察到 AI 有时会执行不必要的动作,但仍然可以生成代码。人类可能需要纠正之前的错误,因此每个步骤都必须是原子性的,以确保可靠性和适当的回滚。☑️一起交流行业热点、测试技术各种干货
☑️一起共享面试经验、跳槽求职各种好用的
来源:龚龚科技杂谈