#配置国内nmp源或者公司内部的npm源   以阿里云举例
npm config set registry https://registry.npmmirror.com

#配置不安装google浏览器（如果在内网安装可能导致下载报错，如果上网无限制可以跳过该步骤）
set PUPPETEER_SKIP_DOWNLOAD=true

#安装midscene.js最新版本
npm install -g @midscene/cli

#检查midscene.js的版本（如果有版本信息就安装成功了）
midscene --version
1.6.0

2、配置大模型和谷歌浏览器程序路径的环境变量

打开我的电脑的环境变量配置页面，将如下配置到环境变量：

#大模型信息
MIDSCENE_MODEL_BASE_URL=大模型http地址
MIDSCENE_MODEL_API_KEY=你的APIKEY
MIDSCENE_MODEL_NAME=doubao-seed-20-pro  #以豆包举例
MIDSCENE_MODEL_FAMILY=doubao-vision     #以豆包举例

#谷歌浏览器的程序地址，midscene.js执行时使用（如果上面步骤安装了谷歌浏览器，该步骤跳过）
PUPPETEER_EXECUTABLE_PATH=C:\Users\appadmin\AppData\Local\Google\Chrome\Application\chrome.exe  #你自己的谷歌浏览器地址

#配置跟模型交互的最大次数（默认是20次）
MIDSCENE_REPLANNING_CYCLE_LIMIT=100

3、使用midscene.js工具执行yaml文件的方式，完成一个web自动化的示例

yaml 文件示例：

web:
url: https://www.baidu.com

tasks:
  - name: 搜索天气
flow:
      - ai: 搜索 "今日天气"，点击“百度一下”
      - sleep: 3000
      - aiAssert: 搜索后结果显示天气信息

打开cmd，执行命令：midscene yaml文件。

4、python封装midscene.js工具，支持通用的http接口调用能力

通过 python的Flask封装http接口，具备2个能力：

1. 通过post请求，解析传参中的用例名称和yaml所需的测试步骤，然后后台调用midscene.js 工具执行yaml文件，解析日志，生成测试结果和报告。将测试结果以 json 数据格式返回。
2. 通过get请求获取html报告。

a、http接口用于执行用例

• 接口类型：Http Post 接口
• 接口地址：http://xxxxxxx:5000/execute/testcase
• 传参格式：JSON
• 消息体：{"caseName":"", "Steps":""}

caseName：用例名称，会生成以它命名的 yaml 文件和 html 报告

Steps：yaml 文件格式内容，为json格式数据

举例：

{'caseName':'百度搜索天气','Steps':{'web': {'url': 'https://www.baidu.com'}, 'tasks': [{'name': '搜索天气', 'flow': [{'ai': '搜索 "今日天气"，点击“百度一下”'}, {'sleep': 3000}, {'aiAssert': '搜索后结果显示天气信息'}]}]}}

返回字段说明：code：1 代表成功，0 代表失败；output：工具的一些输出信息；report：html 报告的http请求地址，可访问和下载。

举例（返回数据）

{
"code": 0,
"output": "查看截图左侧菜单栏，能够看到「人员管理」选项处于选中状态，是明确展示在左侧菜单栏的，因此“在左侧菜单栏不应该展示用户管理”的表述不成立，对应布尔值为false。",
"report": "http://127.0.0.1:5000/execute/htmlreport/登录web成功_1775184223.588202.html"
}

2）通过 get 请求可以获取到 html 报告的内容

• 接口方式：HttpGet 请求
• 功能：访问 report 字段中的地址，直接返回 HTML 报告的完整内容
• 特点：支持在浏览器打开、下载报告，可视化查看执行步骤、截图、断言结果等

5 搭建后台flask工程

工程结构如下：

python文件结构

用到的python包：
flask/waitress/loguru/yaml （需要安装），其他如subprocess/os/shutil/re/datetime/json等

6 Flak程序运行后，就可以通过http接口调用

以python的requests工具调用举例：

希望能给大家带来一些经验，感兴趣的请点赞收藏加关注。

有需要部署代码的的可以私信联系。