midscene+node+yaml用ai实现ui自动化

一、下载并安装node.js

1、下载地址：https://nodejs.org/zh-cn/download，选择适合自己的版本下载，我下载的windows安装程序（.msi）

2、安装时需要选择自己想要安装的位置，然后一直点next（下一步）就可以了，不够其他操作

3、安装成功后会自动配置环境变量，不需要手动配置

4、打开cmd输入命令：node -v 检查是否安装成功，有版本号就安装成功了，

 

二、在node.js安装midscene.js

1、打开cmd输入命令：npm install midscene.js

2、安装@midscene/cli在cmd中继续输入命令：npm install @midscene/cli -g

3、将midscene.js的模型信息配置到环境变量中

三、结合yaml文件脚本实现ai的ui自动化

1、yaml文件结构：

在.yaml文件中，有两个部分：target和tasks。

target部分定义了任务的基本信息。

target:
  # 访问的 URL，必填。如果提供了 `serve` 参数，则提供相对路径
  url: <url>

  # 在本地路径下启动一个静态服务，可选
  serve: <root-directory>

  # 浏览器 UA，可选
  userAgent: <ua>

  # 浏览器视口宽度，可选，默认 1280
  viewportWidth: <width>

  # 浏览器视口高度，可选，默认 960
  viewportHeight: <height>

  # 浏览器设备像素比，可选，默认 1
  deviceScaleFactor: <scale>

  # JSON 格式的浏览器 Cookie 文件路径，可选
  cookie: <path-to-cookie-file>

  # 等待网络空闲的策略，可选
  waitForNetworkIdle:
    # 等待超时时间，可选，默认 10000ms
    timeout: <ms>
    # 是否在等待超时后继续，可选，默认 true
    continueOnNetworkIdleError: <boolean>

  # 输出 aiQuery 结果的 JSON 文件路径，可选
  output: <path-to-output-file>

  # 是否限制页面在当前 tab 打开，可选，默认 true
  forceSameTabNavigation: <boolean>

  # 桥接模式，可选，默认 false，可以为 'newTabWithUrl' 或 'currentTab'。更多详情请参阅后文
  bridgeMode: false | 'newTabWithUrl' | 'curren

2、tasks部分是一个数组，定义了脚本执行的步骤。记得在每个步骤前添加 - 符号。

tasks:
  - name: <name>
    continueOnError: <boolean> # 可选，错误时是否继续执行下一个任务，默认 false
    flow:
      # 执行一个交互，`ai` 是 `aiAction` 的简写方式
      - ai: <prompt>

      # 执行一个交互
      - aiAction: <prompt>

      # 执行一个断言
      - aiAssert: <prompt>

      # 执行一个查询，返回一个 JSON 对象
      - aiQuery: <prompt> # 记得在提示词中描述输出结果的格式
        name: <name> # 查询结果在 JSON 输出中的 key
        
      # 等待某个条件满足，并设置超时时间(ms，可选，默认 30000)
      - aiWaitFor: <prompt>
        timeout: <ms>

      # 等待一定时间
      - sleep: <ms>

  - name: <name>
    flow:
      # ...

3、运行脚本：

# 运行所有脚本：
midscene ./midscene-scripts/

# 运行单个脚本：
midscene ./midscene-scripts/sauce-demo.yaml

# 运行在有界面模式下，使用 --headed 选项：
midscene ./midscene-scripts/sauce-demo.yaml --headed

# 运行在有界面模式下，并在结束后保持浏览器窗口打开，使用 --keep-window 选项：
midscene ./midscene-scripts/sauce-demo.yaml --keep-window

 

4、实例：创建yaml文件放在自己能找到的目录下

yaml文件内容：

4.1、在cmd中输入命令：midscene test\test.yml 执行，可以在该命令后面加上--headed，在命令运行的时候会同时打开浏览器窗口观察ui自动化的情况

3、查看midscene.js报告

 

 

ps：在所有配置都是对的的情况下，执行命令后提示找不到模型名称，可以尝试重启midscene.js或者直接关机重启