在软件开发测试领域，UI自动化测试一直是我们的“心头大患”。传统测试工具依赖繁琐的元素定位（如CSS选择器、XPath），一旦页面结构变化，脚本就可能失效；复杂交互场景（如动态加载、多步骤验证）需要编写大量代码，维护成本高昂；而数据抓取、性能监控等场景更是让测试人员苦不堪言。
然而，随着AI技术的爆发，一款基于大语言模型(LLM)的AI驱动UI自动化测试工具: Midscene.js 横空出世，有望打破这一局面。
它以“自然语言交互”为核心，让开发者无需编写代码，只需用中文描述测试步骤，即可实现自动化操作，堪称“小白秒变测试专家”的终极神器！
一、Midscene.js是什么？为什么它能火？
Midscene.js是字节跳动 Web Infra 团队全新开源的一款 UI 自动化工具，它最大的亮点在于引入了多模态 AI 推理能力。
Midscene.js 的核心开发语言为 TypeScript，并辅以 HTML、MDX、Less 等前端技术构建其功能框架。
1、核心亮点包括
自然语言交互：以往编写自动化测试脚本，需要掌握专业的编程知识，这对很多测试人员来说是个不小的挑战。但 Midscene.js你只需用自然语言描述自动化步骤，它就能理解你的指令，并在网页上精准执行相应操作。
强大的数据提取能力：能够深度理解网页结构，并根据提示生成所需数据结构，在进行数据抓取或测试时，从网页中提取特定数据是常见需求。而Midscene.js 提供了强大的数据提取功能，你可以描述想要的数据结构，它会以 JSON 格式将数据返回给你。
可视化报告：提供动画回放、步骤详情，支持在报告中直接调试，方便用户调试和优化测试流程。
支持多种模型： 内置对公共多模态大语言模型（如 GPT-4）和开源模型（如 UI-TARS）的支持。
开源+数据安全： MIT协议，支持私有化部署，数据不出本地。
2、为何它能火
- 降本增效： 传统测试需要3天完成的脚本，Midscene.js仅需30分钟；
- 灵活应对变化： 页面改版？只需修改自然语言描述，无需重构脚本；
- 跨工具兼容： 支持Puppeteer、Playwright、YAML脚本，无缝集成现有测试体系。
二、安装方式
2.1 Chrome 扩展安装
如果你想快速体验 Midscene.js 的核心功能，安装 Chrome 扩展是个不错的选择。打开 Chrome 浏览器，进入 Chrome 网上应用店，搜索 “Midscene.js”，找到对应的扩展程序后，点击 “添加到 Chrome” 按钮，按照提示完成安装。
2.2 Npm安装
如果你需要更深入地使用 Midscene.js，进行复杂的自动化测试或集成到现有项目中，可以通过安装SDK 来实现。以 Node.js 项目为例，首先确保你已经安装了 Node.js 环境，然后打开命令行工具，进入你的项目目录，执行以下命令安装 Midscene.js 的 SDK：
npm install midscene.js
2.3 源码安装
如果你想深入地了解学习Midscene.js源码或对它进行二开改造，建议通过源码来安装。
# 克隆项目
git clone https://github.com/web-infra-dev/midscene.git
cd midscene
# 安装依赖
npm install
# 启动本地服务（可选）
npm run dev
三、使用方法及示例
3.1 Chrom插件使用方式
以Chrome 扩展插件安装为例，安装完成后，只需访问Midscene.js插件打开即可。
通过使用 Midscene.js Chrome 插件，你可以快速在任意网页上体验 Midscene 的主要功能，而无需编写任何代码
启动扩展，通过粘贴 Key=Value 格式配置插件环境：
OPENAI_API_KEY="sk-replace-by-your-own"
各配置选项：
温馨提醒：
- midscene 默认使用 GPT-4o 为默认的推理模型，成本比较高。Midscene 需要将截图和 DOM 树一起发送给模型，这会导致 token 消耗较高。
- 当然你也可以选择，千问 Qwen-2.5-VL 模型，同样支持视觉定位，不需要发送 DOM 树给模型。和 gpt-4o 相比，它可以节省 30% 到 50% 的 token 数量。不过在某些情况下，Qwen-2.5-VL 的断言能力可能不如 gpt-4o。
上述配置完成后，你可以立即开始使用 Midscene。 它一共有三个关键操作Tab：
- Action: 与网页进行交互，如 "在搜索框中输入 Midscene" 或 "点击登录按钮"
- Query: 从界面中提取 JSON 数据，如 "提取页面中的用户 ID，返回 { id: string }"
- Assert: 执行断言，如 "页面标题是 Midscene"这里我是了下在搜索引擎中搜索hengshuai's blog，然后让其点击第一条结果：
上图中可以看到全程没有任何具体的代码，仅仅通过自然语言就完成了一系列行为
3.2 YAML使用方式
Midscene 还提供了一种基于 .yaml 文件的自动化测试方法，这有助于你专注于脚本本身，任何团队内的成员都可以编写自动化脚本，例如创建test.yml。
target:
url:https://www.
tasks:
-name:搜索耳机
flow:
-ai:在搜索框输入"耳机"并敲回车
-sleep:2000
-aiQuery:'{itemTitle: string, price: Number}[], 提取前5个商品标题和价格'
-aiAssert:"搜索结果页面包含'耳机’关键词"
安装@midscene/cli
npm install @midscene/cli -g
执行脚本：
npx midscene ./test.yaml
3.3 使用Puppeteer集成
midscene.js 也提供了一种基于 Puppeteer 的集成方式，允许你使用 Puppeteer 的 API 来编写自动化测试脚本，并使用 Midscene 的 API 来执行自动化测试
const puppeteer = require('puppeteer');
const midscene = require('@midscene/web');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://');
// 输入用户名和密码
await midscene.execute(page, '输入用户名 "testuser"');
await midscene.execute(page, '输入密码 "123456"');
await midscene.execute(page, '点击登录按钮');
// 提取数据
const data = await midscene.query(page, '提取用户信息为 JSON 格式');
console.log(data);
await browser.close();
})();
安装依赖：
npm install @midscene/web puppeteer tsx --save-dev
运行脚本：
npx tsx ./test.ts
不管采用哪种方式，同样都是需要配置必要的环境变量：
# 更新为你自己的 Key
export OPENAI_API_KEY="sk-abcdefghijklmnopqrstuvwxyz"
# 其他..
模型配置参考文档：https:///model-provider.html
4、最后
Midscene.js 作为一款 AI 驱动的 UI 自动化测试利器，凭借其独特的自然语言交互、强大的数据提取和断言功能、可视化调试以及丰富的集成方式，为 UI 自动化测试带来了全新的体验。
它不仅让测试工作变得更加高效、便捷，还降低了测试人员的技术门槛，让更多人能够参与到自动化测试中来。无论是对于追求高效的开发团队，还是想要提升测试技能的个人，Midscene.js 都值得一试。如果你在使用过程中有任何问题或心得，欢迎在评论区留言分享。
文章中涉及到的工具更详细使用可参考官网:
👉 项目官网：https://
👉 GitHub仓库：https://github.com/web-infra-dev/midscene
👉 Puppeteer: https://v/
