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

辛辛苦苦写好的自动化脚本，页面稍微改个布局，元素定位全部失效，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 解决的是"人机交互语义鸿沟"的问题——我们想的是"点击登录按钮"，传统工具需要翻译成"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. 输入关键词 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：运行脚本

打开终端，输入命令：

npm run test

四、Midscene.js vs Playwright：怎么选

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

选择建议

选 Midscene.js：

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

选 Playwright：

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

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

写在最后

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

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

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

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

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

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

关注本公众号，后台回复 666 关键词即可免费领取：
✅ 测试用例生成Skill
✅ Midscene实战Demo

- END -