惊！Midscene.js：一款AI 驱动的 UI 自动化测试利器，小白也能秒上手！

在软件开发测试领域，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.ebay.com

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://example.com');

// 输入用户名和密码
  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://midscenejs.com/model-provider.html

4、最后

Midscene.js 作为一款 AI 驱动的 UI 自动化测试利器，凭借其独特的自然语言交互、强大的数据提取和断言功能、可视化调试以及丰富的集成方式，为 UI 自动化测试带来了全新的体验。

它不仅让测试工作变得更加高效、便捷，还降低了测试人员的技术门槛，让更多人能够参与到自动化测试中来。无论是对于追求高效的开发团队，还是想要提升测试技能的个人，Midscene.js 都值得一试。如果你在使用过程中有任何问题或心得，欢迎在评论区留言分享。

文章中涉及到的工具更详细使用可参考官网:

👉 项目官网：https://midscenejs.com

👉 GitHub仓库：https://github.com/web-infra-dev/midscene

👉 Puppeteer: https://pptr.dev/

好了，今天就先分享到这里~