MidScene.js自然语言浏览器自动化快速入门指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene每天花40分钟在三个电商网站间复制商品价格还要手动核对MidScene.js 是一款 AI 驱动的浏览器自动化工具你说一句点搜索按钮它就替你打开浏览器真的去做。图MidScene.js 的 Playground 界面左侧输入自然语言指令浏览器实时执行并展示结果它解决了什么问题它就像一位随叫随到的数字助手你给它一张网页截图和一句话它自己找到按钮、输入框并操作。适合三类人想做 UI 测试、又不想维护选择器的测试工程师要跑数据采集、重复填表等流程的业务人员想快速验证自动化方案的开发者核心能力拆解自然语言指令替代选择器代码传统工具靠选择器CSS 定位串找元素页面一改就失效。MidScene.js 直接用截图定位对比项传统自动化MidScene.js写操作page.click(#search-btn)ai(点击搜索按钮)页面改版后选择器失效逐个修视觉能认出就继续生效前置条件会写 JavaScript会说话就行 一条指令示例等价于打开电商网站在搜索框输入无线耳机并回车await agent.aiAct(在搜索框输入 无线耳机然后点击搜索按钮)视觉驱动不看 DOM只看画面DOM网页的底层标签树对图标按钮、canvas画布、跨域 iframe 常常看不见。MidScene.js 只分析截图人能看到的它就能点到还能断言页面看起来对不对而不只是节点存不存在。一套 API 跨平台运行同一批方法aiAct执行操作、aiQuery提取数据、aiAssert断言检查可驱动 Web、Android、iOS、HarmonyOS 和桌面端写一份脚本换个平台头就能跑。动手实践场景一在 Chrome 扩展中运行第一条自然语言指令目标让浏览器自动完成一次点击或数据提取。步骤安装 MidScene.js 的 Chrome 扩展打开浏览器侧边栏在扩展设置中填入多模态模型的 API 配置打开任意网页在侧边栏输入符合当前页面的指令点击运行观察执行过程示例指令操作类aiAct点击右上角的登录按钮数据类aiQuery页面中的商品{name: string, price: number}[]检查类aiAssert页面顶部显示导航栏验证方式✅ 页面完成点击或返回结构化 JSON侧边栏可回看每一步的截图和轨迹。图MidScene.js Chrome 扩展侧边栏输入自然语言指令即可在当前网页执行场景二用 YAML 脚本批量执行自动化任务目标用一个脚本文件驱动浏览器完成搜索 断言一条命令跑完。步骤全局安装命令行工具npm i -g midscene/cli在运行目录创建.env配置MIDSCENE_MODEL_NAME、MIDSCENE_MODEL_API_KEY等模型变量新建bing-search.yaml内容如下执行midscene ./bing-search.yamlpage: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - aiAssert: 结果显示天气信息验证方式✅ 命令行实时输出执行进度结束后生成可视化报告可回看每步截图。场景三电商价格每日巡检真实业务目标每天定时巡检多个商品页提取价格变化。步骤在 YAML 里写多个 task每个 task 负责一个商品页用ai步骤打开页面、展开价格区域用aiQuery按{name: string, price: number}[]提取结构化价格交给系统定时任务cron / 任务计划程序每天执行示例指令依次访问京东、天猫的商品页提取名称和当前价格验证方式检查提取出的 JSON 是否齐全报告文件中保留每一步截图价格异常时一眼可查。⚠️ 提示对反爬较严的站点请在 flow 中用sleep留出合理间隔避免触发限制。快速上手环境要求Node.js20.19/22.12/24pnpm9.3另需一个具备 UI 定位能力的多模态模型 API Key。git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install pnpm build构建完成后从apps/chrome-extension目录加载扩展chrome://extensions/开启开发者模式点加载已解压的扩展程序填入模型配置即可运行第一条指令也可以直接npm i -g midscene/cli用命令行跑 YAML 脚本两条路径任选其一。进阶玩法与避坑桥接模式本地脚本与已打开的浏览器实时通信改一行配置就能对当前标签页下指令详见 bridge-mode.mdx接入 Playwright 测试套件把验证过的自然语言指令转成 Agent API写进现有 E2E 用例见 integrate-with-playwright.mdxYAML 进阶支持aiWaitFor、sleep、变量插值完整格式见 automate-with-scripts-in-yaml.mdx疑问需要显卡很强的电脑才能跑吗 ——事实本地只做截图和浏览器控制推理由远端模型 API 完成普通电脑即可。疑问页面一改版脚本就废了吗 ——事实定位基于截图而非选择器视觉可识别就不受 CSS 类名、DOM 结构调整影响维护量明显更少。疑问提示Cannot access a chrome-extension:// URL of different extension怎么办 ——事实通常是其他扩展冲突按开发者工具里该 URL 的扩展 ID 到chrome://extensions/禁用它刷新页面重试。图MidScene.js 桥接模式本地脚本与浏览器建立连接后可实时下发指令资源导航快速开始中文文档YAML 脚本运行器文档官方示例 YAML 脚本API 参考reference 目录贡献指南结语MidScene.js 把写脚本变成了说句话让浏览器自动化从工程师的专属工具变成人人可用的日常助手。职场人士可以从 Chrome 扩展开始今天就跑通第一条指令开发者不妨把 Playwright 套件接上把维护选择器的时间省下来。克隆仓库五分钟见分晓。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
MidScene.js自然语言浏览器自动化快速入门指南
MidScene.js自然语言浏览器自动化快速入门指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene每天花40分钟在三个电商网站间复制商品价格还要手动核对MidScene.js 是一款 AI 驱动的浏览器自动化工具你说一句点搜索按钮它就替你打开浏览器真的去做。图MidScene.js 的 Playground 界面左侧输入自然语言指令浏览器实时执行并展示结果它解决了什么问题它就像一位随叫随到的数字助手你给它一张网页截图和一句话它自己找到按钮、输入框并操作。适合三类人想做 UI 测试、又不想维护选择器的测试工程师要跑数据采集、重复填表等流程的业务人员想快速验证自动化方案的开发者核心能力拆解自然语言指令替代选择器代码传统工具靠选择器CSS 定位串找元素页面一改就失效。MidScene.js 直接用截图定位对比项传统自动化MidScene.js写操作page.click(#search-btn)ai(点击搜索按钮)页面改版后选择器失效逐个修视觉能认出就继续生效前置条件会写 JavaScript会说话就行 一条指令示例等价于打开电商网站在搜索框输入无线耳机并回车await agent.aiAct(在搜索框输入 无线耳机然后点击搜索按钮)视觉驱动不看 DOM只看画面DOM网页的底层标签树对图标按钮、canvas画布、跨域 iframe 常常看不见。MidScene.js 只分析截图人能看到的它就能点到还能断言页面看起来对不对而不只是节点存不存在。一套 API 跨平台运行同一批方法aiAct执行操作、aiQuery提取数据、aiAssert断言检查可驱动 Web、Android、iOS、HarmonyOS 和桌面端写一份脚本换个平台头就能跑。动手实践场景一在 Chrome 扩展中运行第一条自然语言指令目标让浏览器自动完成一次点击或数据提取。步骤安装 MidScene.js 的 Chrome 扩展打开浏览器侧边栏在扩展设置中填入多模态模型的 API 配置打开任意网页在侧边栏输入符合当前页面的指令点击运行观察执行过程示例指令操作类aiAct点击右上角的登录按钮数据类aiQuery页面中的商品{name: string, price: number}[]检查类aiAssert页面顶部显示导航栏验证方式✅ 页面完成点击或返回结构化 JSON侧边栏可回看每一步的截图和轨迹。图MidScene.js Chrome 扩展侧边栏输入自然语言指令即可在当前网页执行场景二用 YAML 脚本批量执行自动化任务目标用一个脚本文件驱动浏览器完成搜索 断言一条命令跑完。步骤全局安装命令行工具npm i -g midscene/cli在运行目录创建.env配置MIDSCENE_MODEL_NAME、MIDSCENE_MODEL_API_KEY等模型变量新建bing-search.yaml内容如下执行midscene ./bing-search.yamlpage: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - aiAssert: 结果显示天气信息验证方式✅ 命令行实时输出执行进度结束后生成可视化报告可回看每步截图。场景三电商价格每日巡检真实业务目标每天定时巡检多个商品页提取价格变化。步骤在 YAML 里写多个 task每个 task 负责一个商品页用ai步骤打开页面、展开价格区域用aiQuery按{name: string, price: number}[]提取结构化价格交给系统定时任务cron / 任务计划程序每天执行示例指令依次访问京东、天猫的商品页提取名称和当前价格验证方式检查提取出的 JSON 是否齐全报告文件中保留每一步截图价格异常时一眼可查。⚠️ 提示对反爬较严的站点请在 flow 中用sleep留出合理间隔避免触发限制。快速上手环境要求Node.js20.19/22.12/24pnpm9.3另需一个具备 UI 定位能力的多模态模型 API Key。git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install pnpm build构建完成后从apps/chrome-extension目录加载扩展chrome://extensions/开启开发者模式点加载已解压的扩展程序填入模型配置即可运行第一条指令也可以直接npm i -g midscene/cli用命令行跑 YAML 脚本两条路径任选其一。进阶玩法与避坑桥接模式本地脚本与已打开的浏览器实时通信改一行配置就能对当前标签页下指令详见 bridge-mode.mdx接入 Playwright 测试套件把验证过的自然语言指令转成 Agent API写进现有 E2E 用例见 integrate-with-playwright.mdxYAML 进阶支持aiWaitFor、sleep、变量插值完整格式见 automate-with-scripts-in-yaml.mdx疑问需要显卡很强的电脑才能跑吗 ——事实本地只做截图和浏览器控制推理由远端模型 API 完成普通电脑即可。疑问页面一改版脚本就废了吗 ——事实定位基于截图而非选择器视觉可识别就不受 CSS 类名、DOM 结构调整影响维护量明显更少。疑问提示Cannot access a chrome-extension:// URL of different extension怎么办 ——事实通常是其他扩展冲突按开发者工具里该 URL 的扩展 ID 到chrome://extensions/禁用它刷新页面重试。图MidScene.js 桥接模式本地脚本与浏览器建立连接后可实时下发指令资源导航快速开始中文文档YAML 脚本运行器文档官方示例 YAML 脚本API 参考reference 目录贡献指南结语MidScene.js 把写脚本变成了说句话让浏览器自动化从工程师的专属工具变成人人可用的日常助手。职场人士可以从 Chrome 扩展开始今天就跑通第一条指令开发者不妨把 Playwright 套件接上把维护选择器的时间省下来。克隆仓库五分钟见分晓。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
