Midscene介绍

midscene.js是一款由字节跳动团队开源的AI驱动的UI自动化工具
核心开发语言为 TypeScript，并辅以 HTML、MDX、Less 等前端技术构建其功能框架。属于一种多模态的测试框架。

亮点和优势

• 降本增效：传统测试需要3天完成的脚本，Midscene.js仅需30分钟；
• 灵活应对变化：页面改版？只需修改自然语言描述，无需重构脚本；
• 跨工具兼容：支持Puppeteer、Playwright、YAML脚本，无缝集成现有测试体系。

环境搭建与配置

1. Chrome 扩展安装：如果想快速体验 Midscene.js的核心功能，安装 Chrome 扩展是个不错的选择；
2. Npm安装：如果想深入地使用 Midscene.js，进行自动化测试或集成到现有项目中，可以通过安装SDK 来实现；
3. 源码安装：想深入地了解学习Midscene.js源码或对它进行二开改造，建议通过源码来安装；

Chrome扩展安装
打开 Chrome 浏览器，进入 Chrome 网上应用店，搜索 “Midscene.js”，找到对应的扩展程序后，点击 “添加到 Chrome” 按钮，按照提示完成安装

Npm安装
进入到对应的项目目录，执行以下命令安装 Midscene.js 的SDK，npm install midscene.js

源码安装
开源地址：https://github.com/web-infra-dev/midscene
克隆项目git clone https://github.com/web-infra-dev/midscene.gitcd midscene
安装依赖npm install
启动本地服务（可选）npm run dev

如果使用npm安装需要先安装node.js，下载地址：https://nodejs.org/zh-cn/
安装后，执行cmd命令

之后全局安装： cmd 执行命令npm i -g @midscene/cli

npm: Node Package Manager 的缩写，用于管理 JavaScript 包。
i: `install` 的简写，表示安装操作。
-g: 全局安装（`--global` 的缩写）。作用：将包安装在系统全局环境（而非当前项目），安装后可在命令行中**直接使用该工具**（例如直接运行 `midscene` 命令）。
@midscene/cli:要安装的包名称：
`@midscene`：**作用域（Scope）**，表示该包属于 `midscene` 组织/作者（类似命名空间）。
`cli`：包的具体名称，表明这是一个**命令行工具**（Command LineInterface）

安装过程中有报错：
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\thinkpa

C:\WINDOWS\system32>npm install -g npm@11.6.2
npm ERR! code EBADENGINE
npm ERR! engine Unsupported engine
npm ERR! engine Not compatible with your version of node/npm: npm@11.6.2
npm ERR! notsup Not compatible with your version of node/npm: npm@11.6.2
npm ERR! notsup Required: {“node”:“^20.17.0 || >=22.9.0”}
npm ERR! notsup Actual: {“npm”:“8.19.4”,“node”:“v16.20.2”}

之后 我使用nvm升级了版本，应该是启动起来了


验证成功的标识如上图，cmd 执行命令midscene version

大模型配置

大模型选择：1. 使用主流免费的大模型(阿里的-千文模型)，注册送token；2. 使用量大可以考虑一些大模型的收费套餐，效率高；3. 自己私有化搭建，这个需要硬件条件，初期不建议；
如果我们不配置大模型，就会报错

大模型建议选择通义千问，然后去注册登录实名认证即可
https://bailian.console.aliyun.com/?spm=5176.29597918.J__Xz0dtrgG-8e2H7vxPlPy.35.3ba27b08tiQDrs&tab=model#/efm/model_experience_center/vision?currentTab=imageComprehend&modelId=qwen2.5-vl-72b-instruct

那我们怎么去配置呢，其实官网已经给出了答案https://midscenejs.com/zh/model-provider.html

也就是说，我们要去配置环境变量
我们先解读这几个字段
OPENAI_API_KEY，我们需要先进入大模型，点击左下角密钥管理，去创建API-KEY

OPENAI_BASE_URL=“https://dashscope.aliyuncs.com/compatible-mode/v1”，阿里云的大模型，固定写法
MIDSCENE_MODEL_NAME=“qwen-vl-max-latest”，对应 midscene模型名称

MIDSCENE_USE_QWEN_VL=1, 激活千问图像处理

接下来，我们进入高级系统设置》环境变量》系统变量中维护官方让维护的变量

midscene.js使用，开始测试

我们可以创建一个文件夹，cmd进入到对应目录

我们创建一个testcase.yaml文件，内容如下：https://midscenejs.com/zh/automate-with-scripts-in-yaml.html

我们可以使用该数据，粘贴到我们的文件里面
然后我们执行midscene testcase.yaml，我们可以看到，它执行成功了

同时，我们也可以在对应的这个目录下面看到测试报告

打开测试报告可以看到详细的测试步骤

APP端测试

找一个真机
使用adb链接成功
cmd中安装android-playground :npm i -g @midscene/android-playground


之后我们cmd输入:android-playground 回车—>浏览器自动打开

我们可以在这个输入框中输入如下内容：
打开"小米商城"
停留3秒钟
点击页面中的搜索框
在搜索框中输入“小米手机”
在页面中显示小米手机相关的内容

点击Run即可
然后你也可以下载这个报告并打开，里面会有很详细的操作步骤


以上，便是midscene.js的全部使用过程，但是本身该框架目前还有局限性，比如说验证码等问题，官方文档都有跳过，不过正常来讲，都应该能够解决，只是时间问题