Midscene.js：重新定义UI自动化的新时代工具

前言

Midscene.js 是一个创新的、面向开发者的 UI 自动化解决方案，并通过人工智能技术简化自动化脚本的编写与维护。

它提供了三种核心方法——交互（.ai, .aiAction）、提取（.aiQuery）和断言（.aiAssert），使开发者能够以自然语言描述步骤并执行复杂的UI操作。

它不仅支持通用的大规模语言模型（LLM），还兼容开源模型 UI-TARS，为用户提供了更多的选择。

安装

方式一：从 Chrome 应用商店下载插件快速体验

https://chromewebstore.google.com/detail/midscenejs/gbldofcpkknbggpkmbdaefngejllnief?utm_source=ext_app_menu

方式二：在 **github **下载源码运行

https://github.com/web-infra-dev/midscene

配置模型和服务商

这里我们以 **Chrome **插件进行演示

常用的主要配置项如下，其中 OPENAI_API_KEY 是必选项：

名称	描述
OPENAI_API_KEY	必选项。你的 OpenAI API Key (如 “sk-abcdefghijklmnopqrstuvwxyz”)
OPENAI_BASE_URL	可选。API 的接入 URL。常用于切换到其他模型服务，如 https://some_service_name.com/v1
MIDSCENE_MODEL_NAME	可选。指定一个不同的模型名称 (默认是 gpt-4o)。常用于切换到其他模型服务

这里要注意，环境变量的KEY=VALUE等于符号左右两侧不能有空格，否则会报错

基本使用

Midscene** 核心操作分为行为**、查询、断言，如下图所示：

行为

用于控制界面，包括对界面定位、点击、滚动、键盘输入、悬停、等待。

基本用法：

await mid.aiAction('在搜索输入框中输入你好，然后按回车执行搜索');
await mid.aiAction('将鼠标移动到新闻列表中的第二项，然后点击它');// 使用 `.ai` 简写
await mid.ai('将鼠标移动到新闻列表中的第二项，然后点击它');

查询

用于从 UI 提取自定义数据，不仅可以返回页面上直接书写的数据，还能基于“理解”返回数据。

基本用法：

const dataA = await mid.aiQuery({time: '左上角展示的日期和时间，string', userInfo: '用户信息，{name: string}',tableFields: '表格的字段名，string[]',tableDataRecord: '表格中的数据记录，{id: string, [fieldName]: string}[]'
});

最后AI会按照你的格式将数据整理返回

断言

为了确保提取的数据符合预期，通常会结合使用 .aiAssert 方法来进行断言。

基本用法：

await mid.aiAssert('"路由器" 的价格是 139');

这段代码将会检查页面上的“路由器”产品的价格是否确实是 139。如果不符合预期，则测试将失败。

注意事项

使用清晰、详细的步骤描述非常重要。过于简略的指令可能会导致不稳定的结果或者运行失败。

Midscene 目前无法规划包含条件和循环的步骤。

为了避免 AI 幻觉造成的错误断言，在需要高准确性的场景可以结合 .aiQuery 和普通 JavaScript 断言来替代 .aiAssert。

调试配置

设置 MIDSCENE_DEBUG_AI_PROFILE 变量，就可以看到每次调用 AI 的时间和 token 数量。

MIDSCENE_DEBUG_AI_PROFILE=1

总结

Midscene.js 是一款创新的面向开发者的 UI 自动化解决方案，通过人工智能技术简化自动化脚本的编写与维护。

它提供了交互、提取和断言三种核心方法，支持通用的大规模语言模型（LLM）和开源模型 UI-TARS。

– 欢迎点赞、关注、转发、收藏【我码玄黄】，各大平台同名。