告别 XPath！Midscene.js，用自然语言搞定 UI 自动化

本文来源： Anne（公众号：Anne）
原文链接： https://mp.weixin.qq.com/s/yQGlfMuEWc2kbyPkKSD31A
发布时间： 2026-09-22 20:12

作者： Anne　　发布时间： 2026-09-22 20:12

做UI自动化时，大家都会被一个问题折磨，就是DOM元素的频繁变动、XPath/CSS选择器脆弱易挂、脚本维护成本较高。那在AI自动化发展下，Midscene.js的出现改变了传统自动化的局限，不靠DOM定位、纯视觉AI识别、自然语言即可编写测试用例，让E2E自动化告别繁琐的元素适配，大幅降本提效。今天就来讲讲Midscene是怎样的一款工具。

什么是Midscene（Midscene.js）

Midscene.js是由字节跳动团队开发的，开源的视觉驱动的GUI Agent/UI自动化框架。可以理解为Playwright/Appium点击页面元素，Midscene用AI来看截图、看懂页面并决定应该点击哪里，不用写原来的Xpath或CSS来定位页面元素。

Midscene特点

1.纯视觉定位

区别于传统的自动化定位，不依赖于DOM，直接把屏幕截图丢给多模态大模型，AI识别界面元素、返回坐标执行操作。

2.自然语言写用例

不用硬编码元素定位，直接写中文指令：

await agent.aiAction('搜索耳机，筛选价格小于100的商品')
await agent.aiAssert('列表里所有商品价格都小于100')

常用的API：

aiAction / aiTap / aiInput：操作界面

aiQuery：从页面提取结构化数据

aiAssert：视觉断言，校验页面展示结果

3.跨平台统一API

支持Web、Android、iOS、鸿蒙等，可以使用一套写法。

4.支持多模型

支持豆包Seed、Qwen、DeepSeek-V4、GPT-4V、Gemini、Kimi 等视觉模型，可以本地部署模型降低成本。

Midscene.js的配置

下载地址：https://midscenejs.com/zh/

配置搭建：

1.安装node.js，要求node.js>=20.18

检查node.js版本：

node -v

2.安装依赖

安装playwright:

npm install @midscene/web playwright tsx dotenv --save-dev

说明：

@midscene/web：midscene 核心包

playwright：浏览器驱动

tsx：直接运行ts 脚本，不用编译

dotenv：读取模型密钥配置

安装浏览器：

npx playwright install chromium

安装puppeteer：

npm install @midscene/web puppeteer tsx dotenv --save-dev

2.获取多模态视觉模型API Key

Midscene本身不带模型，需要自己准备兼容的OpenAI协议的VL模型，这个最重要，如果没有的话无法运行。

我们可以使用阿里云的免费额度：https://www.qianwenai.com/models

配置模型的方法：只修改对应的key就可以了，根据你注册的账号对应的key。

新建.env文件，在文件中修改对应的key：

其它大模型配置方法可参见：https://midscenejs.com/zh/model-common-config.html

Midscene的简单使用

例：打开百度页面，在搜索框输入midscene，点击百度一下按钮，断言页面中包含midscene文字结果。

代码demo.ts:

import 'dotenv/config';
import { chromium } from 'playwright';
import { PlaywrightAgent } from '@midscene/web/playwright';
 
(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com');
 
  const agent = new PlaywrightAgent(page);
 
  // 自然语言操作
  await agent.aiAction('在搜索框输入midscene，点击百度一下');
  await agent.aiWaitFor('搜索结果加载完成');
  await agent.aiAssert('页面包含midscene相关结果');
 
  await browser.close();
})();

还有一种方式：使用CLI快速跑yaml

全局安装cli：

npm i -g@midscene/cli

新建test.yaml

target: https://www.baidu.com
tasks:
 - aiAction: 输入midscene并搜索
 - aiAssert: 页面有midscene介绍

执行：

npx midscene test.yaml

同样需要当前目录放.env 配置模型key。

写在最后

总的来说，Midscene是结合Playwright、Appium等传统自动化工具，AI赋能的自动化升级方案。用视觉大模型替代硬编码定位，用自然语言替代复杂脚本，来解决传统自动化稳定性差、维护难、适配场景有限的问题。

点赞+在看+关注，评论区聊聊，你在UI自动化中遇到过哪些问题？

文章推荐：

告别凭手感调Prompt！阿里开源skill-up来了

这么多的AI测试工具，你用对了吗

利用好AI，让AI帮测试人减负提效

AI 写代码遍地开花，开发测试的苦谁懂

本文转载自微信公众号「Anne」，仅供学习交流使用。