Midscene.js UI自动化快速上手指南用自然语言驱动浏览器免写选择器【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene当你要让浏览器自动完成搜索、等结果、校验页面这套操作时手写选择器很繁琐。Midscene.js 用多模态模型直接看屏幕你用一句自然语言描述操作它替你点击、输入、滚动还能替你校验结果。一分钟认知Midscene.js 的工作分三步截图、让模型判断该操作哪里、再执行动作校验同理像人一样检查屏幕。它解决 UI 测试依赖选择器、DOM 一变就挂的问题。适合写 E2E 用例、自动化网页操作以及给手机和桌面写脚本。视觉定位按外观和位置找元素canvas、纯图标按钮、跨域 iframe 都适用跨平台同一套 Agent API 覆盖 Web、Android、iOS 和桌面端内置报告每次执行生成含截图和时间轴的 HTML 报告 最小上手路径安装 CLI终端运行npm i -g midscene/cli需 Node.js 20.19 及以上配置模型在工具运行目录新建.env文件写入 4 个模型变量MIDSCENE_MODEL_BASE_URLhttps://**你的服务地址** MIDSCENE_MODEL_API_KEY**你的APIKey** MIDSCENE_MODEL_NAME**你的模型名** MIDSCENE_MODEL_FAMILY**你的模型系列**把上面加粗的占位值换成服务商的真实配置即可变量名固定。编写脚本同目录新建bing-search.yaml示例见下一节运行执行midscene ./bing-search.yaml终端显示执行进度看报告midscene_run目录生成 HTML 报告双击打开 关键能力拆解用自然语言写操作指令指令都用自然语言写aiAct做多步操作、aiTap和aiInput做单步动作、aiAssert做校验、aiQuery提取数据。可先在 Chrome 插件的 Playground 试好措辞再原样搬进代码调用形式一一对应await agent.aiAct(搜索耳机筛选100美元以下); await agent.aiWaitFor(筛选结果已显示); await agent.aiAssert(商品价格都低于100美元);三行完成执行、等待、校验。用 YAML 脚本跑自动化YAML 分两部分page声明目标页面tasks列步骤每行一条自然语言指令page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果显示天气信息存成bing-search.yaml即可交给命令行执行。完整字段见 apps/site/docs/zh/automate-with-scripts-in-yaml.mdxYAML 脚本文档它列出了全部配置项。看执行报告报告生成在midscene_run目录时间轴、每步截图、AI 决策过程一目了然失败时能看出模型看到了什么。 实战场景自动完成一次搜索校验输入上面的bing-search.yaml打开必应首页、搜索今日天气、校验结果含天气信息。操作终端运行midscene命令Midscene 打开浏览器模型看截图定位搜索框、输入关键词、回车等 3 秒后截图检查结果页。结果终端打印最终状态midscene_run生成报告每步动作与断言结果都列清楚失败时打开报告就能看出问题出在哪一步。⚠️ 避坑清单运行报Cannot access a chrome-extension:// URL of different extension其他浏览器插件向页面注入了脚本与 Midscene 冲突禁用它并刷新页面点击位置不对或动作超时.env四个变量与服务商不匹配或 API Key 错误对照服务商文档核对后重跑执行慢、花费高每步都重新截图调模型给agent加cache配置idstrategy: read-write重复操作走缓存收尾Midscene.js 把 UI 自动化压缩成两件事用自然语言描述意图让模型看懂屏幕并动手。任务规划与执行的核心逻辑在 packages/core/src/agent/核心源码目录想弄清模型为什么选某一步从这里看起。完整流程看 apps/site/docs/zh/quick-start.mdx官方快速开始文档从插件安装、配置粘贴到第一条指令都有说明。现在就在一个空目录创建.env和bing-search.yaml5 分钟跑通第一个自动搜索。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
