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

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

辛辛苦苦写好的自动化脚本，页面稍微改个布局，元素定位全部失效，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 文件

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回复：

js 复制代码

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. 输入关键词 Midscene
  await 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：运行脚本

打开终端，输入命令：

bash 复制代码

npm run test

四、Midscene.js vs Playwright：怎么选

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

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

选择建议

选 Midscene.js：

快速验证产品功能、产品 demo 自动化
桌面应用（PC 客户端）的 UI 自动化
非技术背景同学写自动化脚本
快速原型验证自动化可行性

选 Playwright：

大型企业级项目，需要严谨的测试用例
对执行速度有严格要求
需要深度浏览器 API 控制
已有 Playwright 技术栈的团队

最佳实践： 两者可以互补使用------Playwright 负责核心业务测试用例，Midscene.js 负责快速验证和探索性测试。

写在最后

UI 自动化测试发展多年，从最初的录制脚本、手写 XPath/CSS 定位，到如今 AI 赋能的自然语言自动化，行业技术迭代一直在打破传统测试的边界。

Midscene.js 的出现，解决了传统自动化的核心痛点：

无需深耕复杂的定位语法
无需反复修复失效用例

一句自然语言即可完成交互、断言、数据提取，大幅降低自动化落地门槛、提升测试迭代效率。

你觉得 Midscene.js 能提升你的测试效率吗？欢迎评论区聊聊你的看法！

💡福利领取

如果这份实战内容对你有帮助，
点赞 + 转发，分享给身边做测试的小伙伴～

关注本公众号，后台回复 666 关键词即可免费领取：

✅ 测试用例生成Skill

✅ Midscene实战Demo

- END -