Midscene.js 浏览器自动化零门槛快速上手

Midscene.js 浏览器自动化零门槛快速上手【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene写 E2E 测试最头疼的往往是页面一改版一堆选择器全失效。Midscene.js 是一个面向 E2E 测试的跨平台 GUI 自动化工具它让 AI 模型直接看懂屏幕你用一句自然语言就能完成点击、输入、滚动还能断言页面结果全程不写选择器。快速上手5 步跑通第一次自动化这一节带你用最短路径把 Midscene 跑起来装好扩展、配好模型就能发出第一条指令。在 Chrome 应用商店搜索 Midscene安装扩展点击扩展图标打开 Midscene 侧边栏打开侧边栏设置页粘贴模型配置并保存打开任意网页在侧边栏输入自然语言指令点击 Run执行你的第一次自动化Midscene 依赖一个具备 UI 定位能力的多模态模型如千问、豆包、Gemini 等安装后把下面这组配置填入设置页替换成你自己的地址与 Key 即可{ MIDSCENE_MODEL_BASE_URL: 你的模型服务 API 地址, MIDSCENE_MODEL_API_KEY: 你的-API-Key, MIDSCENE_MODEL_NAME: 模型名称, MIDSCENE_MODEL_FAMILY: 模型系列 }更多模型选项可以参考 官方快速开始文档。界面带读认识侧边栏的 4 个区域这一节带你从上到下扫一遍扩展界面知道每一块是干什么的。打开任意网页浏览器右侧会出现 Midscene 侧边栏按从左到右、从上到下看左侧网页区当前正在自动化的页面本身Midscene 的眼睛就是它。右上配置区In-Browser Request Config展示当前模型配置是否生效缺项会在这里提示。中部 Run 区核心操作台。Action / Query / Assert 三个标签页分别对应执行操作提取数据检查页面下方是指令输入框和 Run 按钮你的自然语言就填在这里。底部截图区执行时实时截取页面的画面配合 Insight / Locate 入口定位元素完成后可以从 Report File 入口查看执行报告。实战任务从执行操作到跨浏览器控制这一节按你想做什么组织 3 个任务跟着做就能覆盖日常最常见的三类需求。任务一让 AI 替你完成一次搜索操作目标不碰鼠标让 Midscene 自动在搜索框里输入并搜索。操作打开一个搜索引擎首页在侧边栏切到 Action 标签输入指令在搜索框输入Midscene.js并点击搜索按钮点击 Run预期结果浏览器自动完成输入和点击页面跳转到搜索结果。执行结束后生成一份 HTML 报告能看到每一步的截图与结果。任务二把页面上的列表提取成结构化数据目标把搜索结果这类页面内容变成可直接使用的 JSON 数据。操作停留在任意列表页如搜索结果页切到 Query 标签输入指令并声明期望的数据结构例如页面中的搜索结果{title: string, link: string}[]点击 Run预期结果Midscene 返回一个结构化数组每个对象包含标题和链接复制出去即可用于后续处理。任务三用桥接模式从终端控制浏览器目标复用你当前浏览器的登录状态和 Cookie让本地脚本和手动操作共用同一个浏览器。操作打开侧边栏的 Bridge Mode 面板确认状态为 Listening for connection桥接模式即允许本地脚本接管你正在用的 Chrome在本地终端创建脚本使用midscene/web提供的AgentOverChromeBridge指定要连接的目标标签页运行脚本在浏览器弹出的确认窗口点击 Allow预期结果脚本接管目标标签页执行搜索、断言等操作而你已登录的站点保持登录状态。桥接模式文档里有完整示例。进阶技巧3 条熟练后的效率建议这一节给你 3 条熟练后的提速技巧适合已经跑通前两个任务的你。切到全屏 Playground 调试侧边栏顶部有 send to fullscreen playground 入口点一下就能进全屏模式指令更长、流程更复杂时看得更清楚调试体验更好。用 YAML 脚本接桥接模式在 YAML 自动化脚本的web段加一行bridgeMode: currentTab执行时就会直接接管你当前这个标签页而不必另起一个干净的浏览器实例。靠报告定位失败每次执行都会生成 HTML 报告包含操作时间线、每步前后截图和断言结果失败时直接看哪一步的截图不对劲比反复重跑快得多。避坑指南3 个新手高频问题速查这一节汇总新手最容易卡住的 3 个点全部按现象 → 原因 → 解决办法给出。现象点 Run 后报错Cannot access a chrome-extension:// URL of different extension。原因另一个浏览器扩展也向页面注入了脚本或 iframe和 Midscene 互相冲突。解决办法在页面开发者工具里找到 URL 以chrome-extension://开头的那段资源复制其中的扩展 ID到chrome://extensions/禁用对应扩展刷新页面重试。现象桥接模式下脚本一直等待连不上浏览器。原因桥接模式的模型配置要写在 Node.js 侧终端环境变量而不是浏览器侧或浏览器端的连接确认窗口被关掉了。解决办法把模型配置改到终端环境变量里重跑脚本并在确认窗口点击 Allow扩展图标上的状态点也能帮你判断——黄点表示正在监听绿点表示已连接。现象输入指令点击 Run 后立刻报错或无响应。原因模型配置四件套地址、Key、模型名、模型系列有缺失或 API Key 无效。解决办法回到设置页核对四项配置换一个确认可用的 Key 单独测试确认能调通后再运行指令。收尾上手要点就三件装扩展、配模型、输指令就能完成第一次浏览器自动化。下一步建议读 Bridge 模式文档把你在侧边栏验证过的指令写进自己的测试脚本里。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考