介绍

Midscene.js 是一个开源的 AI 操作助手，适用于 Web、移动端、自动化和测试。

特性

通过自然语言描述目标和步骤，自动生成 UI 自动化脚本

  • 描述你的目标和步骤，Midscene 会为你规划和操作用户界面。
  • 支持 JavaScript SDK 和 YAML 两种脚本格式

跨平台支持

  • 网页自动化：集成 Puppeteer、Playwright 或桥接模式控制桌面浏览器
  • Android 自动化：通过 adb 控制本地设备
  • iOS 自动化：通过 WebDriverAgent 控制本地设备

辅助工具

  • 提供可视化测试报告和 Playground 环境，便于调试和回放
  • 支持脚本缓存，提升执行效率
  • 开放 MCP 协议，允许其他 MCP Client 直接调用（支持 Web 和 Android）

三大 API 类型

  • 交互 API：操作用户界面元素
  • 数据提取 API：从 UI 和 DOM 中提取数据
  • 实用 API：提供 aiAssert() 断言、aiLocate() 定位、aiWaitFor() 等待等辅助函数

模型选择

模型最好使用支持视觉的模型，如: gemini, claude, UI-TARS 等模型。本文的案例会使用 Doubao-1.5-UI-TARS 进行介绍。

Doubao-1.5-UI-TARS 是字节跳动开源的一款原生面向图形界面交互（GUI）的 Agent 模型。通过感知、推理和行动等类人的能力，与 GUI 进行无缝交互，非常适合 Midscene.js 使用。

使用

接下来会演示如何使用 Midscene.js,本篇文章只介绍 MCP 进行操作的方法，其他的方法感兴趣的读者可以参考官方文档。

操作环境使用 zed 连接 Midscene mcp，mcp配置如下:

    "mcp-midscene": {
      "enabled": true,
      "command": "cmd",
      "args": ["/c", "pnpx", "@midscene/mcp"],
      "env": {
        "MIDSCENE_MODEL_NAME": "doubao-seed-1-6-vision-250815",
        "OPENAI_API_KEY": "",
        "MCP_SERVER_REQUEST_TIMEOUT": "800000",
        "MIDSCENE_USE_DOUBAO_VISION": "1",
        "OPENAI_BASE_URL": "https://ark.cn-beijing.volces.com/api/v3"
      }
    },

配置完 mcp server 后，在浏览器扩展中打开桥接模式，设置允许连接，然后在编辑器输入 使用 midscene打开 https://jasminides.com/，生成网站的Playwright 自动化测试用例，测试以下功能:文章的打开关闭，tag页的功能，搜索页的功能，rss页的功能，将生成的用例保存到ut.ts文件中 过了一会任务执行完，可以看到代码顺利生成。

alt text alt text alt text alt text

评价

通过对 midscene 的简单试用，个人评价是未来可期，由于受限于当前基础模型的限制，功能还有许多问题，但总体上还是非常有潜力的。

参考