【大厂开源】一款AI 驱动的 UI 自动化框架，别错过！
文章转载链接：【大厂开源】一款AI 驱动的 UI 自动化框架，别错过！ - 51Testing软件测试网说起UI自动化测试框架，大家脑海中最先想到的是Playwright、Cypress等这样成熟的产品，但是要将自动化脚本做到稳定并且持续维护的团队却是屈指可数的，因为经常会面临选择器繁琐复杂、与 HTML 结构的耦合度高. 51Testing软件测试网，人气很旺的软件测试技术门户，提供测试文章、测试交流、测试招聘、培训等全方位信息服务，内容覆盖APP测试、性能测试、自动化测试、验收测试、兼容性测试等，是国内很专业的软件测试就业培训、企业服务供应商...http://www.51testing.com/html/02/n-7804102.html
说起UI自动化测试框架，大家脑海中最先想到的是Playwright、Cypress等这样成熟的产品，但是要将自动化脚本做到稳定并且持续维护的团队却是屈指可数的，因为经常会面临选择器繁琐复杂、与 HTML 结构的耦合度高，以及界面难以进行断言等问题。
今天就给大家推荐一款由字节跳动WebInfra 团队全新开源的 UI 自动化工具--Midscene.js。它通过引入多模态AI推理能力，将帮助开发者打破传统UI自动化难于编写和维护的困境。
Midscene.js是什么
Midscene.js 是一款基于AI技术的自动化 SDK，旨在简化UI自动化测试流程。它通过大型语言模型（LLM）解析用户的自然语言指令，执行相应的操作，如输入文本、点击按钮等。
Midscene.js 支持动作执行、数据查询和页面断言，并提供可视化报告，帮助用户轻松调试和优化测试流程。
Midscene.js 是一个开源项目，用户可以在自己的环境中运行，确保数据安全。它支持与 YAML 脚本、Puppeteer 和 Playwright 等工具集成，适用于多种自动化测试场景。
Midscene.js的核心优势
1. 三种核心方法
Midscene.js提供了三种关键方法，分别是交互（.ai,?.aiAction）、提取（.aiQuery）和断言（.aiAssert）。
交互：使用.ai或.aiAction方法描述测试步骤并执行交互。例如，你可以告诉Midscene.js“点击按钮”、“输入文本”等。
提取：使用.aiQuery方法从UI中“理解”并提取数据。Midscene.js会返回一个JSON格式的数据结构，你可以根据需要描述想要的数据格式。
断言：使用.aiAssert方法执行断言，验证UI的状态是否符合预期。
举例：
// 输入关键字，执行搜索 // 尽管这是一个英文页面，你也可以用中文指令控制它 await ai('在搜索框输入 "Headphones" ，敲回车'); // 找到列表里耳机相关的信息 const items = await aiQuery( '{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格' ); console.log("headphones in stock", items);2. Javascript 或 Yaml ，多种集成形式
如果你想要测试 Midscene 的核心能力，我们推荐从浏览器插件（https://midscenejs.com/zh/quick-experience.html）开始快速体验。
插件里可以用自然语言与任意网页联动，调用交互、提取、断言三种接口，无需搭建代码项目。
此外，还有几种形式将 Midscene 集成到代码：
·使用 YAML 格式的自动化脚本，如果你更喜欢写 YAML 文件而不是代码；
·使用 Chrome 插件的桥接模式，用它来通过脚本控制桌面 Chrome；
·集成到 Puppeteer；
·集成到 Playwright；
3. 可视化报告与调试Playground
运行结束后，Midscene.js会提供一个可视化报告和调试Playground。你可以非常方便地调试提示和AI的响应，查看所有的中间数据，如查询（Query）、计划（Planning）和动作（Actions）。
此外，报告中还集成了一个Playground，你可以在报告中重新运行Prompt并调试，进一步提升测试的效率和准确性。
4.直连模型端，保障数据安全
Midscene.js是一个采用MIT许可证的开源项目，项目代码运行在用户的自有环境中。所有从页面收集的数据会依照用户的配置，直接传送到OpenAI或指定的自定义模型。
因此，数据仅用户和指定的模型服务商可访问，任何第三方平台均无法获取这些数据。这一设计不仅保障了数据的安全性，还降低了对第三方服务的依赖。
Midscene.js的技术原理
自然语言处理（NLP）：接收用户的自然语言输入，基于 NLP 技术解析指令。
界面理解：模型分析网页内容，理解用户描述的界面元素和动作。
执行动作：根据理解的结果，模型将执行相应的浏览器自动化操作，如模拟用户输入、点击等。
数据提取：模型根据用户的查询请求，从网页中提取特定格式的数据。
断言验证：模型检查页面状态是否符合用户的断言条件。
Midscene.js的实战案例
下面案例是网友亲自实践总结，展示了Midscene.js在UI自动化测试中的应用，希望对大家有所帮助。
1. 测试目标
假设我们有一个简单的登录页面，需要测试以下功能：
输入正确的用户名和密码后，能够成功登录。
输入错误的用户名或密码后，会提示错误信息。
2. 测试步骤
打开登录页面：使用Midscene.js的浏览器插件或代码集成方式打开登录页面。
输入用户名和密码：使用.aiAction方法输入正确的用户名和密码。
检查登录结果：使用.aiQuery方法提取登录后的页面数据，并使用.aiAssert方法验证是否成功登录。
输入错误的用户名或密码：重复上述步骤，但输入错误的用户名或密码，并验证是否提示错误信息。
3. 示例代码
以下是一个集成到Playwright的示例代码：
import { expect }from"@playwright/test"; import{ test }from"./fixture"; test.beforeEach(async({ page })=>{ page.setViewportSize({width:400,height:905}); await page.goto("https://www.ebay.com"); await page.waitForLoadState("networkidle");} ); test("search headphone on ebay",async({ ai, aiQuery, aiAssert })=>{ // 输入关键字，执行搜索 // 注：尽管这是一个英文页面，你也可以用中文指令控制它 await ai('在搜索框输入 "Headphones" ，敲回车'); // 找到列表里耳机相关的信息 const items =awaitaiQuery( '{itemTitle: string, price: Number}[], 找到列表里的商品标题和价格' );4. 可视化报告与调试
运行测试后，Midscene.js会生成一个可视化报告和调试Playground。你可以通过报告查看测试的详细步骤和结果，包括每个步骤的查询（Query）、计划（Planning）和动作（Actions）。如果测试失败，你可以在Playground中重新运行Prompt并调试，以便快速定位问题并修复。
Midscene.js的资源汇总
项目官网：
https://midscenejs.com/GitHub仓库：
https://github.com/web-infra-dev/midscene快速体验 Chrome 扩展：
https://midscenejs.com/quick-experience.htmlAPI 参考文档：
https://midscenejs.com/api.htmlYAML 脚本自动化：
https://midscenejs.com/automate-with-scripts-in-yaml.htmlPuppeteer 集成：
https://midscenejs.com/integrate-with-puppeteer.htmlPlaywright 集成：
https://midscenejs.com/integrate-with-playwright.html自定义模型和提供者：
https://midscenejs.com/model-provider.html好了，今天的分享就到这里了，如果你也对AI技术感兴趣，不妨去试试吧！