前言
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。
原创 我码玄黄
