Midscene.js 简介

有个人神神叨叨

已于 2025-03-22 22:47:53 修改

阅读量2.5k

点赞数 35

CC 4.0 BY-SA版权

文章标签： javascript ai 人工智能

于 2025-03-22 22:44:52 首次发布

本文链接：https://blog.csdn.net/adcwa/article/details/146448084

名称：Midscene.js
口号：Joyful Automation by AI（通过 AI 实现愉悦的自动化）
官网：https://midscenejs.com/
项目地址：https://github.com/web-infra-dev/midscene
社区链接：

核心功能

通过自然语言交互、查询和断言
- 动作（action）：使用 .ai 或 .aiAction 方法，通过描述步骤执行一系列操作。
- 查询（query）：使用 .aiQuery 方法，从 UI 中提取自定义数据。描述所需的 JSON 格式，AI 将根据其对页面的“理解”提供答案。
- 断言（assert）：使用 .aiAssert 方法，在页面上执行断言。
- 优势：所有这些方法都接受自然语言提示作为参数，显著降低了脚本维护成本。
从 Chrome 扩展开始
- Midscene 提供 Chrome 扩展，允许用户在任何网页上使用 Midscene，无需编写代码。
- 安装链接：Chrome Web Store
- 使用说明：Quick Experience

多种集成方式

YAML 脚本自动化：如果更倾向于编写 YAML 文件而不是代码，可以选择此方式。
通过 Chrome 扩展的桥接模式：通过脚本控制桌面 Chrome。
与 Puppeteer 集成：集成文档
与 Playwright 集成：集成文档

示例代码：

// 执行搜索操作
await ai('type "Headphones" in search box, hit Enter');
// 查询商品信息并以 JSON 格式返回
const items = await aiQuery("{itemTitle: string, price: Number}[], find item in list and corresponding price");
console.log("headphones in stock", items);
// 断言页面上的元素
await aiAssert("There is a category filter on the left");

可视化报告
- Midscene 提供可视化报告，帮助用户在每次运行后更稳定地进行自动化操作并更轻松地调试。
- 报告中包含动画回放和每一步的详细信息。
- 报告文件中还提供了一个“游乐场”，用户可以在其中调整提示，而无需重新运行所有脚本。
支持通用 LLM 和开源模型
- Midscene 支持通用 LLM（如 gpt-4o）和开源模型。
- 通用 LLM：适用于大多数场景。
- 开源模型（UI-TARS）：基于 VLM 架构的端到端 GUI 代理模型，可在自己的服务器上部署，显著提升性能和数据隐私。
- 更多信息：选择模型
与其他工具的比较
- 调试体验：Midscene 提供可视化报告文件、内置游乐场和 Chrome 扩展，简化调试过程。
- 开源、免费、自由部署：Midscene 是开源项目，与任何云服务或模型提供商解耦，用户可以选择公共或私有部署。
- 与 JavaScript 集成：Midscene 与 JavaScript 完美集成。
数据隐私
- 所有从页面收集的数据将直接发送到 OpenAI 或自定义模型提供商，不会被第三方平台访问。
- 更多信息：数据隐私