Midscene浏览器自动化：10分钟跑通自然语言用例

Midscene浏览器自动化10分钟跑通自然语言用例【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene你每天要打开几十个商品页、逐个记录价格重复且容易出错。Midscene 是一款多模态模型驱动的浏览器自动化工具输入自然语言指令它就能看懂页面、规划步骤并完成操作。本文带你从克隆仓库到跑通第一个用例控制在10分钟内。安装与第一次运行克隆仓库并安装依赖git clone https://gitcode.com/GitHub_Trending/mid/midscene然后在仓库根目录运行pnpm install构建扩展在apps/chrome-extension目录运行pnpm run build会生成dist目录加载扩展打开chrome://extensions/开启“开发者模式”点击“加载已解压的扩展程序”选择dist目录配置模型准备一个具备 UI 定位能力的多模态模型文档以豆包 Seed 2.1 Turbo 为例记下MIDSCENE_MODEL_BASE_URL、MIDSCENE_MODEL_API_KEY、MIDSCENE_MODEL_NAME、MIDSCENE_MODEL_FAMILY四项配置值git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene/apps/chrome-extension pnpm install pnpm run build能访问 Chrome 应用商店的话也可以直接安装扩展省去构建环节。加载完成后点击工具栏中的 Midscene 图标打开侧边栏再点击设置图标把模型配置粘贴进去保存即可全程不需要搭建项目或写代码。具体步骤可参考官方快速开始。Midscene 侧边栏即零配置 Playground打开任意网页都能直接输入指令用它做这几件事扩展装好后先从三个高频任务开始全部在侧边栏完成不用写代码。用一句自然语言驱动页面操作场景你在某个站点登录后需要反复执行同一组页面操作。你做什么打开目标网页在侧边栏输入自然语言描述例如点击登录按钮或者“搜索耳机把第一件商品加入购物车”然后运行。你会看到什么页面被自动逐步操作多步骤、带条件分支的任务也能一句话交给它Midscene 会根据最新画面持续规划执行。完成后你可以在运行报告里回看每一步。从页面提取结构化数据场景你想拿到当前页面的商品列表和价格但不想写抓取逻辑。你做什么在侧边栏输入数据描述并写明期望结构例如页面中的商品{name: string, price: number}[]。你会看到什么Midscene 读取界面后直接返回商品与价格的 JSON 数组可复制进表格。需要读取截图里看不见的 DOM 信息时可以传入domIncluded选项把 DOM 一并纳入分析。让本地脚本接管桌面 Chrome场景你希望复用已登录的 Chrome含 cookies、插件和页面状态来跑自动化也就是桥接模式。你做什么在本地项目安装midscene/web与tsx依赖写一个创建AgentOverChromeBridge、连接新标签页的小脚本用tsx运行它。注意桥接模式下模型配置写在终端Node 侧环境变量里而不是浏览器里。你会看到什么脚本运行后扩展弹出确认窗口点击 “Allow” 后 Chrome 打开新标签页交给脚本控制。扩展图标黄点表示正在监听绿点表示已连接。YAML 自动化脚本也能开启桥接模式在脚本的web块里设置bridgeMode: newTabWithUrl再用midscene ./bing.yaml运行确认流程相同。它是怎么做到的只靠截图看懂页面Midscene 为什么不依赖 CSS 选择器或 DOM因为页面结构很脆弱选择器一重构就可能失效纯图标按钮、canvas这些元素也缺少语义化标注。Midscene 的做法是把当前截图交给多模态模型由模型看图定位元素并规划操作步骤。人眼能看到的东西它就能定位canvas和跨域 iframe 也在覆盖范围内。同一套视觉引擎还覆盖 Android、iOS 和桌面端换平台用同一套 API 即可。Playground 里输入自然语言指令即可直观看到执行结果每次运行都生成可回放报告Midscene 会为每次任务生成完整报告记录每一步的截图、模型决策与执行结果你可以逐步回放整个过程。操作失败时打开报告就能定位它卡在哪一步排查比翻日志直观得多。报告是 HTML 文件可以保存下来分享给同事一起回看执行过程。报告支持逐步回放自动化流程常见卡点 ⚠️运行报错Cannot access a chrome-extension:// URL of different extension其他扩展与 Midscene 冲突。按报错在chrome://extensions/找到并禁用对应扩展再刷新页面重试。使用本地 Ollama 模型时出现 403设置环境变量OLLAMA_ORIGINS*允许扩展访问 Ollama 后重试。桥接模式脚本连不上模型配置要写在终端Node 侧环境变量里不是浏览器侧改完重跑脚本并在确认窗口点击 “Allow”。扩展加载失败或dist不完整在apps/chrome-extension重跑pnpm run build确认构建成功再到浏览器重新加载扩展。Midscene 浏览器自动化把“描述操作”变成了“执行操作”配上自然语言指令和可视化报告测试与重复性网页工作都能少写很多代码。下一步建议阅读基本概念弄清aiAct、aiQuery、aiAssert三类能力的边界把验证过的指令沉淀成自己的用例想深入实现细节可以浏览扩展源码 apps/chrome-extension/src/。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考