UI自动化测试的革新，新一代AI工具MidScene.js实测！
前言
AI已经越来越深入地走入我们的实际工作，在软件测试领域，和AI相关的新测试工具、方法也层出不穷。在之前我们介绍过结合 mcp server 实现 AI 驱动测试的案例，本文我们将介绍一个近期崭露头角的国产AI测试工具 Midscene.js
Midscene.js简介
MidScene.js 是由字节跳动 web-infra 团队推出的一个开源 ai 自动化测试工具，基于多模态大模型，通过针对页面的智能视觉解析来理解我们的自然语言指令，并进一步完成自动化操作。可以显著降低编写自动化测试脚本的复杂性，并更好适应页面结构和元素的变化，使自动化测试脚本的稳定性也有较大提升。
官网地址： https://midscenejs.com/
Midscene工作原理
和之前我们介绍 mcp server 时，利用通用大模型来理解页面并调用本地工具能力进行扩展不同，Midscene使用多模态大模型如 ChatGPT-4o，qwen-vl, 字节的 UI-TARS等，也就是能支持视觉输入的大模型来理解页面，更接近我们进行实际功能测试的场景。
MidScene会首先获取页面当前截图和具体的页面结构信息，再和用户指令一起提交给大模型，由大模型判断出需要操作的页面控件位置，并进行下一步动作。
以在待办页面任务框中输入 “今天学习Playwright”为例：
MidScene的内部操作大致如下：
- 获取用户指令 “在任务框输入 学习Playwright，按回车键”
- MidScene截图，获取页面整体元素结构
- 提交大模型完成页面特征提取
- 获取大模型分析结果，确定下一步操作类型(Tap)和控件的具体位置(坐标)
- 规划下一步操作
- 完成执行
大模型的选择
从以上Midscene的原理分析，MidScene 主要依赖多模态大模型的如下能力
- 理解截图和 规划 操作步骤的能力。
- 给出指定元素的坐标信息（Visual Grounding）的能力。
支持以上能力的大模型，目前官网提供的支持包括如下几种：
- OPENAI GPT-4o
- 阿里 Qwen-2.5-VL
- 字节 UI-TARS
- 字节火山引擎 Doubao-1.5-thinking-vision-pro
- Google Gemini-2.5-Pro
从工作原理上，需要提供给大模型包括截图和页面结构等信息，对大模型的Token消耗还是比较可观。从官方的评估，每个操作通常都要至少数千Token的消耗。而其中性价比较好的大模型，官方推荐的QWen-VL。
Chrome插件方式使用
零代码的Chrome插件方式，可以帮助我们快速理解MidScene的应用。
通过Chrome的插件商店可以直接安装 Midscene插件
配置大模型
启用插件后，需要配置使用的大模型。这里我们使用对token消耗比较少的阿里千问多模态模型qwen-vl-max-latest, 通过阿里云百炼平台申请对应的API Key即可，现在申请还赠送100W Token额度。
完成申请后，在插件的模型配置界面中配置对应的大模型参数，qwen模型需要配置以下四个参数
OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
OPENAI_API_KEY="sk- your API KEY"
MIDSCENE_MODEL_NAME="qwen-vl-max-latest"
MIDSCENE_USE_QWEN_VL=1
操作浏览器
接下来就可以在插件界面中体验Midscene对浏览器的操控了，这里主要支持四种行为：
- Action：对应AI自动规划操作，Midscene会自动规划操作步骤并执行。更智能，但速度较慢，效果依赖大模型的质量。
- Query：直接从 UI 提取数据，并借助多模态 AI 的推理能力，实现智能提取
- Assert：通过自然语言描述一个断言条件，让 AI 判断该条件是否为真
- Tap：对应页面点击的即时操作，Midscene会直接执行，大模型只负责底层如元素定位等任务。效率更高，适合已确定要执行的操作时使用
我们可以用接近自然语言的AI提示词输入提示词指令，针对不同的行为模式，插件会驱动浏览器完成不同的操作，并反馈操作结果。
具体执行过程也可参见下方视频演示。
脚本集成
除了通过浏览器插件调用Midscene，更推荐的方法是通过测试框架的脚本集成Midscene能力。
通过脚本集成，同样需要配置相关模型调用参数，和插件中配置的相关变量值一样，只是需要将相关变量配置为系统环境变量
因为 Midscene 是基于JS的工具，这里的和测试框架集成，也是需要支持JS。这里以 Playwright 为例
安装
首先自然需要具备 Playwright 框架，进入项目目录，初始化并安装Playwright，然后安装Midscene
npm init playwright@latest
npm install @midscene/web --save-devplaywright框架配置
在 playwright.config.ts 文件中配置框架本身的测试发现目录和测试脚本，加载环境变量以及浏览器类型，执行策略等基础配置