夜雨聆风
软件测试Midscene.js UI 自动化实战指南
1. Midscene.js 是什么?传统UI自动化的痛点：
•需要手写XPath、CSS选择器定位元素
• 页面改版→选择器失效→脚本全挂
•编写和维护成本高，上手门槛大Midscene.js的方案：
•纯视觉定位一不依赖DOM结构，通过截图+多模态大模型（VLM）识别页面元素
• 自然语言驱动一用人话描述操作意图，AI自动规划和执
•跨平台支持—Web/iOS/Android /桌面端通用
•多框架集成一支持Playwright、Puppeteer、MCP协议核心API只需要记住四个：
2.环境准备
2.1系统要求
• Node.js >= 18
•pnpm(推荐)或npm/yarn
一个多模态大模型的APIKey（本文使用智谱AI）
2.2安装依赖
3.配置AI模型
Midscene需要一个支持视觉理解的多模态大模型。本文使用智谱AI的GLM-4.6V模型。在项目根目录创建.env文件：
MIDscENE_MoDEL_BASE_uRL-"https://open-bigmodel-cn/api/paas/v4"MIDSCENE_MODEL_API_KEY="你智谱API Key"MIDSCENE_MODEL_NAME-"gLm-4.6V"MIDSCENE_MODEL_FAMILY="gLm-y"MIDSCENE_MODEL_REASONING_ENABLED-"false"
4.编写脚本
自动化测试脚本功能：1.访问MS登录页面2.输入账号、密码、验证码并登录3.验证登录成功后的页面状态4.提取关键页面信息import { chromium } fron 'playwright';import {PlaywrightAgent } from'@midscene/web/playwright';import 'dotenv/config';(async ()=>{console-1og(启动浏览器.);const browser - await chromium.launch(theadless: false,args: ['--no-sandbox', '-disable-setuid-sandbox'],const page = await brosser.newPage();await poge.setvieuportsize({ width: 144e, height: 9ee });tryt访问MS 登录页面console，log(正在访问wms登录页面.）；const loginurl = 'http://192.168.10.130/login?redirect-%2Fwms%2Freceiptorder';await page-goto(loginurl, { timeout: 6eeee });await page-waitForLoadstate('networkidle', { timeout: 3ooee ));console.log(页面加载完成）；
5.运行脚本代码块
npx tsx wms自动化测试.js
6.测试报告
Midscene会自动生成HTML报告，记录AI每一步操作的截图和详情。报告路径（每次运行会生成新的）：
midscene_run/report/playwright-2026-04-21_e9-1e-30-xxxxx.html用浏览器打开报告，你可以看到：
• AI的规划过程（它”想”了什么）
•每一步操作前后的页面截图
•元素定位的截图和坐标
• 执行时间统计
