一、Midscene.js简介
1.1 什么是Midscene.js？
Midscene.js是一款基于多模态大语言模型（LLM）的AI驱动UI自动化测试框架，由字节跳动Web Infra团队开源。它的核心理念是"自然语言即测试脚本"，通过AI技术让测试人员能够用自然语言描述测试步骤，而无需编写复杂的代码。
官方文档：https://midscenejs.com
GitHub仓库：web-infra-dev/midscene
传统方式：await page.click('#login-button')
Midscene.js：点击登录按钮
1.2 核心特性一览
二、安装与配置
2.1 快速体验方式
Chrome扩展安装
访问 Chrome Web Store 搜索"Midscene.js"
点击"添加至Chrome"完成安装
安装完成后，在浏览器扩展程序中打开Midscene.js面板
Chrome扩展离线安装
方法一：通过GitHub Release下载
访问 Midscene.js GitHub Releases
下载最新版本的chrome-extension.zip文件
解压到本地目录，例如：~/midscene-extension/
打开Chrome浏览器，访问 chrome://extensions/
开启右上角的"开发者模式"
点击"加载已解压的扩展程序"
选择解压后的扩展目录
确认扩展已启用，图标显示在工具栏
打开插件，如下图所示：
方法二：手动构建扩展
# 克隆项目
git clone https://github.com/web-infra-dev/midscene.git
cd midscene
# 安装依赖
npm install
# 构建Chrome扩展
npm run build:extension
# 构建完成后，扩展位于 dist/chrome-extension/
方法三：通过npm包获取
# 全局安装后获取扩展文件
npm install -g @midscene/cli
# 在项目中安装
npm i @midscene/cli --save-dev
2.2 环境配置
配置OpenAI API密钥
创建.env文件：
OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
OPENAI_API_KEY="api key"
MIDSCENE_MODEL_NAME="qwen2.5-vl-72b-instruct"
大模型api key 可以到 阿里云百炼申请：
https://bailian.console.aliyun.com/?tab=model#/api-key
三、测试运行
3.1 Chrome插件运行
按照2.2的配置，点击右上角的设置按钮，填写模型的环境配置
配置好后，我们先打开一个网页如：百度， 打开Midscene.js。
输入Action：
await mid.ai('在搜索框输入稀土掘金，然后回车执行搜索');然后就能看到执行过程及报告
3.2 控制台运行
编写 search.yaml 任务脚本
web:
url: https://www.baidu.com/
tasks:
- name: 搜索掘金网站
flow:
- ai: 搜索 "稀土掘金" 网站，并打开
- sleep: 5000
- name: 检查结果
flow:
- aiAssert: 结果中展示掘金首页
执行脚本（已进行2.2环境配置）
midscene search.yaml运行结果：
打开控制台中的html报告：
file:///Users/river106/AI/midscene/midscene_run/report/search_juejin-2025-08-03_21-34-23-6snvq22l.html
展示执行过程：
默认情况下，脚本会在无界面模式下运行。
如果你想运行在有界面模式下，你可以使用--headed 选项。此外，如果你想在脚本运行结束后保持浏览器窗口打开，你可以使用 --keep-window 选项。–keep-window 选项会自动开启 --headed 模式。
headed 模式会消耗更多资源，所以建议你仅在本地使用。
四、同类产品对比分析
4.1 功能对比
4.2 使用场景对比
4.3 选择建议
选择Midscene.js的场景
快速原型开发
业务人员参与测试
页面结构频繁变化
需要快速验证想法
选择传统工具的场景
需要极致性能
复杂业务逻辑验证
已有成熟测试体系
需要精细控制