当前位置：首页 > news >正文

Midscene 实战：告别 XPath，用自然语言实现 UI 自动化测试

news 2026/5/23 21:41:44

作为一名测试工程师，你是否也经历过这些崩溃时刻？

辛辛苦苦写好的自动化脚本，页面稍微改个布局，元素定位全部失效，100多个用例哗啦啦全挂……

产品经理临时加了个弹窗，测试脚本需要改3小时，就为了更新一个按钮的 XPath……

新来的同事学自动化，光是搞懂 CSS 选择器、XPath 定位语法，就耗费了一整个下午……

如果你也被这些问题困扰，那么今天我要给你介绍的这个工具，可能会彻底改变你对 UI 自动化测试的认知。

它就是字节跳动开源的 Midscene.js——一款用自然语言就能驱动自动化测试的 AI 工具。

上线 GitHub 仅一年多，已收获 12k+ Stars，一度冲上 GitHub 趋势榜第 2 名。

一、Midscene.js 是什么

Midscene.js 是由字节跳动开源的 AI 驱动视觉感知 UI 自动化工具。

核心理念：用自然语言描述你的目标，AI 来完成剩下的操作。

不再需要手动编写 CSS 选择器、不再需要记忆 XPath 语法、不再需要为页面微调导致的定位失效而崩溃——你只需要告诉它："点击搜索按钮"或"验证页面显示登录成功"，剩下的交给 AI。

它的三大核心能力

1. AI Act（智能交互）
用自然语言下达指令，AI 自动规划操作步骤并执行。比如："在搜索框输入 Midscene，然后点击搜索按钮"——Midscene 会自动理解界面、找到输入框、执行输入、定位并点击搜索按钮。

2. AI Query（数据提取）
从任意界面提取结构化数据。比如："提取页面中的用户昵称和订单金额，返回 JSON 格式"——它会像人眼一样"看"页面，返回你需要的数据。

3. AI Assert（智能断言）
用自然语言描述预期结果，AI 自动验证页面状态是否符合预期。比如："页面上存在一个登录按钮"——无需写复杂的断言代码，一句话搞定。

二、为什么说 Midscene.js 重新定义了自动化测试

传统自动化的三大痛点

痛点一：元素定位脆弱

传统工具依赖 CSS 选择器、XPath 定位，一旦页面 UI 调整，定位器就失效。用例维护成本极高，一个中大型项目可能 30% 的维护工作量都耗在这上面。

痛点二：学习门槛高

想要写自动化，必须先学 XPath、CSS 选择器语法，再理解 Playwright/Cypress 的 API 体系。光是环境配置和语法学习，新人就可能消耗 1-2 天。

痛点三：跨平台能力弱

传统 Web 自动化工具只能在浏览器里转悠。想要测试桌面应用、移动端？得学另外的工具，用另外的写法。

Midscene.js 如何解决

痛点	传统方案	Midscene.js
元素定位	CSS/XPath，易失效	视觉识别 + AI 理解，兜底能力强
学习成本	需要编程基础	自然语言，零代码基础可上手
跨平台	Web Only	Web + Android + iOS + PC
断言编写	写代码逻辑	用文字描述预期即可

本质上，Midscene.js 解决的是"人机交互语义鸿沟"的问题——我们想的是"点击登录按钮"，传统工具需要翻译成"click(selector='#login-btn')"，而 Midscene.js 直接理解你的意图。

三、完整实战教程

以百度搜索 Midscene 为例，完整演示：环境搭建 → 配置多模态模型 → 用 CodeBuddy 对话生成用例 → 运行。

在开始前，你需要先安装Node.js，安装方式在上一篇文章中有写，请大家自行查阅。

Step 1：安装依赖

# 创建项目，并初始化
mkdir midscene_test && cd midscene_test
npm init -y# 安装Playwright 测试框架
npm install -D @playwright/test
npx playwright install chromium# 安装 Midscene Playwright 集成包
npm install -D @midscene/web# 安装加载 .env 的工具
npm install -D dotenv

Step 2：配置模型

注意：Midscene 需要一个支持视觉的多模态大模型（VL Model）。

在项目的运行路径下创建一个 .env 文件并添加配置内容：

MIDSCENE_MODEL_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
MIDSCENE_MODEL_API_KEY="......"
MIDSCENE_MODEL_NAME="qwen3.5-plus"
MIDSCENE_MODEL_FAMILY="qwen3.5"
MIDSCENE_MODEL_REASONING_ENABLED="false"

阿里云的 qwen3.5-plus 模型为例，推荐关闭平台默认的思考模式以提升执行速度，更多模型厂商配置可参考：https://midscenejs.com/zh/model-common-config.html

Step 3：配置 Playwright

在项目的运行路径下创建一个 playwright.config.ts 文件

require('dotenv').config();const { defineConfig } = require('@playwright/test');module.exports = defineConfig({testDir: './tests',use: {channel: 'chrome',headless: false,viewport: { width: 1280, height: 720 },},
});

Step 4：创建测试用例

创建 tests 文件夹，然后创建第一个测试用例文件 baidu.test.js，然后对着 CodeBuddy 说：

我要测试下百度搜索 Midscene 功能，请帮我写一个 Playwright + Midscene 的测试用例，步骤如下
1. 打开百度
2.输入关键词Midscene
3.点击搜索保存到tests/baidu.test.js下

CodeBuddy回复：

const { test: base } = require('@playwright/test');
const { PlaywrightAiFixture } = require('@midscene/web/playwright');const test = base.extend(PlaywrightAiFixture({}));test('百度搜索 Midscene', async ({ page, ai, aiQuery, aiAssert }) => {// 1. 打开百度首页await page.goto('https://www.baidu.com');// 2. 输入关键词 Midsceneawait ai('在搜索框中输入 "Midscene"');// 3. 点击"百度一下"按钮await ai('点击"百度一下"按钮');// 验证：搜索结果页出现了 Midscene 相关的内容await aiAssert('页面显示了与 Midscene 相关的搜索结果');// 提取第一条结果的标题const firstTitle = await aiQuery('string, 第一条搜索结果的标题');console.log('第一条搜索结果:', firstTitle);// 提取所有结果的标题列表const allTitles = await aiQuery('string[], 所有搜索结果的标题列表');console.log('所有搜索结果:', allTitles);
});

Step 5：运行脚本

打开终端，输入命令：

npm run test

四、Midscene.js vs Playwright：怎么选

很多同学会问：Midscene.js 和 Playwright 到底该怎么选？

维度	Midscene.js	Playwright
核心定位	AI 驱动的视觉自动化	浏览器级 E2E 测试框架
元素定位	视觉识别 + AI 理解	CSS/XPath 精确选择器
学习门槛	低，自然语言即可	需要编程基础
执行速度	慢（AI 推理耗时）	快
稳定性	AI 兜底能力强	依赖 DOM，易受 UI 调整影响
适用场景	快速验证、桌面自动化	大型项目、严肃测试