作为一名测试工程师你是否也经历过这些崩溃时刻辛辛苦苦写好的自动化脚本页面稍微改个布局元素定位全部失效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 OnlyWeb 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 dotenvStep 2配置模型注意Midscene 需要一个支持视觉的多模态大模型VL Model。在项目的运行路径下创建一个.env文件并添加配置内容MIDSCENE_MODEL_BASE_URLhttps://dashscope.aliyuncs.com/compatible-mode/v1 MIDSCENE_MODEL_API_KEY...... MIDSCENE_MODEL_NAMEqwen3.5-plus MIDSCENE_MODEL_FAMILYqwen3.5 MIDSCENE_MODEL_REASONING_ENABLEDfalse阿里云的 qwen3.5-plus 模型为例推荐关闭平台默认的思考模式以提升执行速度更多模型厂商配置可参考https://midscenejs.com/zh/model-common-config.htmlStep 3配置 Playwright在项目的运行路径下创建一个playwright.config.ts文件require(dotenv).config();const{defineConfig}require(playwright/test);module.exportsdefineConfig({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);consttestbase.extend(PlaywrightAiFixture({}));test(百度搜索 Midscene,async({page,ai,aiQuery,aiAssert}){// 1. 打开百度首页awaitpage.goto(https://www.baidu.com);// 2. 输入关键词 Midsceneawaitai(在搜索框中输入 Midscene);// 3. 点击百度一下按钮awaitai(点击百度一下按钮);// 验证搜索结果页出现了 Midscene 相关的内容awaitaiAssert(页面显示了与 Midscene 相关的搜索结果);// 提取第一条结果的标题constfirstTitleawaitaiQuery(string, 第一条搜索结果的标题);console.log(第一条搜索结果:,firstTitle);// 提取所有结果的标题列表constallTitlesawaitaiQuery(string[], 所有搜索结果的标题列表);console.log(所有搜索结果:,allTitles);});Step 5运行脚本打开终端输入命令npmruntest四、Midscene.js vs Playwright怎么选很多同学会问Midscene.js 和 Playwright 到底该怎么选维度Midscene.jsPlaywright核心定位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 -