Midscene.js Chrome 扩展完整指南用自然语言指挥浏览器告别繁琐的 UI 测试脚本【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 的 Chrome 扩展把浏览器操作变成了一句话的事输入中文指令它就替你点击、输入、提取数据并核对界面状态。它面向测试工程师和开发者解决「UI 自动化脚本难写、难维护」的老问题。从一个具体任务说起你想核对商品列表的价格传统做法是写选择器、处理加载等待、再解析字段——下次页面一改版脚本可能全挂。装上 Midscene 扩展后流程变成这样打开任意网页从浏览器右侧呼出 Midscene 侧边栏输入「页面中的商品{name: string, price: number}[]」点 Run拿到一份结构化 JSON。不用碰 DOM不用记选择器页面长什么样它看截图就知道。功能速览三件事它替你干能力一句话说明收益aiAct 自然语言操作描述目标如搜索耳机并加入第一件购物车它自动规划、点击、输入多步骤流程不用逐行写脚本aiQuery 结构化数据提取用一句话声明想要的数据和类型直接产出可入库的 JSONaiAssert 界面断言校验用户「真正看到的」界面颜色、高亮、布局、渲染状态能发现 DOM 检查发现不了的视觉 BugBridge 桥接模式本地脚本接管你正在用的桌面 Chrome复用登录态与 Cookie自动化和手动操作可穿插进行最快安装步骤与首次运行准备一个具备 UI 定位能力的多模态模型Qwen-VL、GLM-4.6V、UI-TARS 等都可以记下它的支持配置从 Chrome 应用商店安装 Midscene 扩展在扩展列表点开它右侧会出现侧边栏点侧边栏的设置图标把模型配置整段粘贴进去并保存打开任意网页输入第一条指令运行。怎么确认装好了指令跑完后侧边栏会给出执行过程和结果每次任务还会生成完整报告可以逐步回溯它的操作轨迹。实操对比从「逐行点选」到「一句话断言」传统做法验证「加购后购物车角标变成 1」要写选择器、等待请求、再判断 DOM 文本页面样式一改就得重写。现在的做法一句aiAssert(购物车角标显示 1且小计金额已更新)模型看着截图直接给结论——它校验的是像素层面的渲染结果而不是节点存不存在。更进一步Bridge 模式让脚本和你的日常浏览器共用一个会话扩展开启 Bridge Mode 监听本地跑一个脚本弹窗点「Allow」脚本就能接管当前标签页。你已登录的网站、装着的插件它全部继承自动化跑到一半还能切回手动接管。import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectCurrentTab(); await agent.aiAct(输入Midscene.js点击搜索按钮);它适合谁用QA 与测试工程师回归核心业务流程不再依赖脆弱的选择器开发者先验证界面行为再决定是否沉淀成测试脚本非技术同事查个数据、点个流程不用提需求排队。也要坦率说局限它靠多模态模型看截图工作每一步都有 token 成本执行速度也慢于传统脚本。适合验证关键业务路径不适合毫秒级高频断言。避坑指南三个高频问题运行失败提示Cannot access a chrome-extension:// URL of different extension——多半是别的扩展往页面里注入了 iframe 或脚本在开发者工具里找到对应的chrome-extension://地址按 ID 去chrome://extensions/禁用它刷新重试本地 Ollama 模型返回 403——设置环境变量OLLAMA_ORIGINS*允许扩展跨域访问本地模型模型 Key 配错了地方——侧边栏手动执行时配置在扩展设置里走 Bridge 模式跑脚本时配置要写在脚本所在的终端环境变量里两边别混。从一条指令开始先用侧边栏跑通第一条指令再考虑把验证过的指令搬进脚本是阻力最小的路线。安装与模型配置文档快速开始扩展源码apps/chrome-extension/【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考