Midscene 实践指南3 条自然语言指令跑通浏览器自动化与 E2E 测试【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene 是面向 E2E 测试的 GUI Agent 框架。通过 Chrome 扩展你可以用自然语言执行浏览器操作、提取页面数据并做视觉断言再借助 YAML 脚本把同样的能力扩展到批量自动化与 Android、iOS 平台。定位给谁用不适合谁Midscene 是一个视觉驱动的 GUI 自动化框架它像人一样看屏幕定位元素再执行操作不需要编写 CSS 选择器或 XPath。适合需要做 Web E2E 测试的开发者、QA以及想用自然语言自动化重复网页操作的普通用户。不适合纯接口层测试也不适合要求毫秒级精确或必须直接操作 DOM 的场景——它依赖截图理解界面单次动作的耗时和费用取决于所用模型。快速上手3 步加载扩展克隆仓库并安装依赖git clone https://gitcode.com/GitHub_Trending/mid/midscene cd midscene pnpm install构建 Chrome 扩展cd apps/chrome-extension pnpm run build打开chrome://extensions/开启开发者模式点击加载已解压的扩展程序选择扩展目录下的dist文件夹。安装完成后打开任意网页浏览器右侧会出现 Midscene 侧边栏。首次使用要在侧边栏的设置页填写一个具备 UI 定位能力的多模态模型如 Qwen3-VL、Gemini、Doubao-Seed 系列包括模型服务地址、API Key 和模型名称。配置项说明见仓库内的 快速开始文档。实战演示在商品页提取价格并验证结果用一个真实任务走完整流程从电商搜索结果页提取商品数据操作页面最后断言结果。打开目标页在浏览器中打开任意电商网站的搜索结果页等页面稳定加载。用 Query 提取数据侧边栏切换到 Query 模式输入页面中的商品{name: string, price: number}[]点击 Run。Midscene 会按模板返回商品名和价格的 JSON 列表。用 Action 操作页面切回 Action 模式输入点击第一个搜索结果进入商品详情页。执行后页面会跳到详情页侧边栏会展示每一步的定位框和截图。用 Assert 验证结果切换到 Assert 模式输入商品详情页显示商品标题和价格。断言通过即说明整条任务链跑通失败时可直接查看失败步骤的截图。功能地图按三个维度理解全部功能Midscene 的功能不必逐条记按做什么、在哪用、怎么确认结果归类即可。做什么aiAct用自然语言完成一串操作点、输、滚动适合完整流程aiQuery按模板提取结构化数据返回 JSONaiAssert视觉断言用自然语言描述期望的界面状态并判定是否满足在哪用Chrome 扩展当前页面手动输入指令适合验证想法YAML 脚本 midsceneCLI一条命令批量跑脚本适合 CI 和回归Bridge 模式本地终端脚本接管已登录的 Chrome复用 cookies 和登录态Playground 服务独立沙盒环境也支持预览 Android、iOS 和桌面设备怎么确认结果HTML 报告逐步的截图、元素定位框、AI 决策过程JSON 输出aiQuery的提取结果、批量运行的状态汇总视频导出报告页可将完整执行过程导出为视频场景配方三个具体任务配方一Web 应用的 E2E 回归测试目标把维护成本高的选择器回归用例换成自然语言描述页面小改版时用例不易失效。做法把流程写成 YAMLpage: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果显示天气信息然后运行midscene ./bing-search.yaml执行完成后生成可视化报告。多个脚本可用通配符一次匹配批量执行。注意点.env必须放在 CLI 的工作目录下与 YAML 位置无关CLI 要求 Node.js 20.19、22.12 或 24。脚本语法详见 YAML 脚本运行器。配方二接管已登录的浏览器Bridge 模式目标不另起一个干净浏览器而是直接操作你手动登录过的 Chrome省去反复登录。做法保持扩展的 Bridge 模式处于监听状态图标黄点表示监听中绿点表示已连接在 Node 侧安装midscene/web和tsx脚本里用AgentOverChromeBridge连接新标签页或附着当前标签页tsx 脚本名运行。扩展会弹窗请求允许点 Allow 即可。注意模型配置要写在终端环境变量里而不是浏览器侧。注意点脚本需要上传本地文件时先去chrome://extensions/给 Midscene 开启Allow access to file URLs否则连接后上传会失败。配方三页面结构化数据提取目标把列表页的价格、名称等字段收集成 JSON供后续统计或入库。做法Query 模式下用页面中的商品{name: string, price: number}[]这类带类型模板运行aiQuery脚本场景里同样调用agent.aiQuery把返回的 JSON 写入文件或数据库。注意点模板中字段类型要写明确否则返回的字段名可能不稳定大页面建议先用前 10 条这类小范围指令验证模板再放开全量提取。Midscene 常见报错与处理运行提示Cannot access a chrome-extension:// URL of different extension其他扩展向页面注入了 iframe 或 script 造成冲突。在开发者工具中找到 URL 以chrome-extension://开头的元素复制其中的扩展 ID到chrome://extensions/禁用对应扩展后刷新重试。本地 Ollama 模型返回 403浏览器跨域限制。在 Ollama 所在机器设置环境变量OLLAMA_ORIGINS*后重启服务。CLI 报Unsupported Node.js versionNode 版本过低。升级到 20.19、22.12 或 24再重新安装midscene/cli。指令运行失败或返回为空优先检查模型配置——服务地址注意/v1后缀、API Key、模型名是否一致模型是否支持多模态。Bridge 模式连不上扩展默认持续监听但首次连接必须在弹窗里点 Allow确认窗口被关掉后重新运行脚本即可。想再深入想把扩展里验证过的指令搬进代码看midscene/web的 Playwright / Puppeteer 集成直接调用aiAct、aiQuery、aiAssert。想测移动端仓库内提供 Androidadb和 iOSWebDriverAgent平台文档Agent API 与 Web 端一致。Midscene 的核心价值是用看屏幕的视觉 Agent 替代选择器让自动化随界面变化保持可用。下一步建议在扩展里挑一个你真会重复操作的业务页面把指令跑通再落成第一个 YAML 脚本。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考