Midscene 快速上手指南3 步用一句话控制浏览器【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene想让浏览器替你搜关键词、填表单、抓一份价格清单又不想写代码Midscene 是一款 AI 视觉浏览器自动化工具它靠截屏看懂页面你输入点击登录按钮这样的自然语言它直接在浏览器里执行。这篇指南带你从装扩展到跑通第一条指令全程大约 3 分钟。项目速览Midscene 是什么Midscene 把自己定位成GUI Agent。传统脚本靠 CSS 选择器找元素页面一改版就失效Midscene 只看截图用自然语言描述每一步元素位置变了也能重新定位。它支持 Web 浏览器、Android、iOS、HarmonyOS 和桌面端用的是同一套接口。两类人适合它不想写代码的人用 Chrome 扩展或 Playground 面板直接试指令开发者把验证过的指令通过 SDK 搬进测试脚本图左侧是模型看到的 UI 上下文右侧是目标网页底部输入框里写指令、点 Run 即可执行。3 分钟装好扩展并配好模型扩展有两种装法商店安装在 Chrome Web Store 搜 Midscene 安装支持自动更新手动安装克隆仓库后进入apps/chrome-extension目录依次运行pnpm install和pnpm run build再在扩展管理页选择生成的dist目录加载git clone https://gitcode.com/GitHub_Trending/mid/midscene扩展需要一个具备 UI 定位能力的多模态模型才能工作以豆包 Seed 2.1 Turbo 为例export MIDSCENE_MODEL_BASE_URLhttps://ark.cn-beijing.volces.com/api/v3 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628 export MIDSCENE_MODEL_FAMILYdoubao-seedQwen、GLM、Gemini 等模型也支持配置方法见 模型配置 文档。装好后打开任意网页浏览器右侧会出现 Midscene 侧边栏用一句话跑通第一条指令侧边栏的指令分三类对应做、读、验三件事类型作用示例指令Action执行操作输入关键词并点击搜索Query提取数据并返回 JSON页面中的商品返回名称和价格Assert校验页面状态页面顶部显示导航栏以 Action 为例在输入框写type Midscene.js and click search点 Run。Midscene 会先截屏理解页面标出它定位到的搜索框然后输入关键词、完成搜索。执行细节可以在下方历史记录里逐步查看。再往前一步脚本协同与跨设备控制用本地脚本控制你正在用的 Chrome想把自动化放进项目里不必另起一个无头浏览器。桥接模式Bridge Mode让本地脚本直接接管你日常使用的 Chrome能复用已登录状态和 cookies脚本跑的同时你还能手动操作页面。扩展的 Bridge Mode 面板保持正在监听脚本端只有几行import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectCurrentTab(); await agent.aiAction(在搜索框输入 Midscene.js 并点击搜索按钮);运行后扩展会弹确认框点 Allow 即完成接管。完整流程见 桥接模式文档。同一套指令控制 Android 和 iOS 设备自然语言指令同样跑在手机设备上。Android 需要开启 USB 调试并装好 adbiOS 用 USB 连接即可接好后打开对应 Playground右侧实时显示设备画面你可以点击、滑动、输入文本读取当前系统版本号这类系统信息打开应用、填写表单操作方式与网页一致iOS 端是同样的界面打开设置并查看当前 iOS 版本这类指令会被拆成逐步操作完整走一遍从 eBay 抓一份商品清单以一个贴近日常的任务收尾在 eBay 搜 headphones把前几条商品的名字和价格提成 JSON。第一步输入指令面板切到 Action运行在站内搜索 headphones 并回车。第二步系统响应搜索完成后切到 Query运行页面中的商品{itemTitle: string, price: Number}[]。Midscene 等待列表加载逐屏识别商品卡片。第三步得到结果返回一个结构化的名称与价格数组。同时会生成一份报告文件用时间线回放整个流程——每一步有截图和耗时调试时能直接看出卡在哪一步。常见问题与处理方式扩展加载失败或页面报错多半是其他扩展注入脚本冲突。打开开发者工具找到chrome-extension://开头的资源在扩展管理页禁用对应扩展后刷新重试本地 Ollama 模型报 403设置环境变量OLLAMA_ORIGINS*后重启浏览器操作失败或点错元素把指令写得更具体如点击右上角蓝色搜索按钮并确保页面完全加载后再执行移动设备连不上确认 Android 已开 USB 调试且 adb 可用拔插重连iOS 需在设备上确认信任电脑想继续深入快速开始文档 列出了三类 API 的完整用法Playwright 集成 演示如何把这些指令接进现有测试套件现在就能做的第一步装好扩展、填好模型配置打开任意网站输入一句搜索今天的科技新闻。点下 Run就算跑通了。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene 快速上手指南：3 步用一句话控制浏览器
Midscene 快速上手指南3 步用一句话控制浏览器【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene想让浏览器替你搜关键词、填表单、抓一份价格清单又不想写代码Midscene 是一款 AI 视觉浏览器自动化工具它靠截屏看懂页面你输入点击登录按钮这样的自然语言它直接在浏览器里执行。这篇指南带你从装扩展到跑通第一条指令全程大约 3 分钟。项目速览Midscene 是什么Midscene 把自己定位成GUI Agent。传统脚本靠 CSS 选择器找元素页面一改版就失效Midscene 只看截图用自然语言描述每一步元素位置变了也能重新定位。它支持 Web 浏览器、Android、iOS、HarmonyOS 和桌面端用的是同一套接口。两类人适合它不想写代码的人用 Chrome 扩展或 Playground 面板直接试指令开发者把验证过的指令通过 SDK 搬进测试脚本图左侧是模型看到的 UI 上下文右侧是目标网页底部输入框里写指令、点 Run 即可执行。3 分钟装好扩展并配好模型扩展有两种装法商店安装在 Chrome Web Store 搜 Midscene 安装支持自动更新手动安装克隆仓库后进入apps/chrome-extension目录依次运行pnpm install和pnpm run build再在扩展管理页选择生成的dist目录加载git clone https://gitcode.com/GitHub_Trending/mid/midscene扩展需要一个具备 UI 定位能力的多模态模型才能工作以豆包 Seed 2.1 Turbo 为例export MIDSCENE_MODEL_BASE_URLhttps://ark.cn-beijing.volces.com/api/v3 export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628 export MIDSCENE_MODEL_FAMILYdoubao-seedQwen、GLM、Gemini 等模型也支持配置方法见 模型配置 文档。装好后打开任意网页浏览器右侧会出现 Midscene 侧边栏用一句话跑通第一条指令侧边栏的指令分三类对应做、读、验三件事类型作用示例指令Action执行操作输入关键词并点击搜索Query提取数据并返回 JSON页面中的商品返回名称和价格Assert校验页面状态页面顶部显示导航栏以 Action 为例在输入框写type Midscene.js and click search点 Run。Midscene 会先截屏理解页面标出它定位到的搜索框然后输入关键词、完成搜索。执行细节可以在下方历史记录里逐步查看。再往前一步脚本协同与跨设备控制用本地脚本控制你正在用的 Chrome想把自动化放进项目里不必另起一个无头浏览器。桥接模式Bridge Mode让本地脚本直接接管你日常使用的 Chrome能复用已登录状态和 cookies脚本跑的同时你还能手动操作页面。扩展的 Bridge Mode 面板保持正在监听脚本端只有几行import { AgentOverChromeBridge } from midscene/web/bridge-mode; const agent new AgentOverChromeBridge(); await agent.connectCurrentTab(); await agent.aiAction(在搜索框输入 Midscene.js 并点击搜索按钮);运行后扩展会弹确认框点 Allow 即完成接管。完整流程见 桥接模式文档。同一套指令控制 Android 和 iOS 设备自然语言指令同样跑在手机设备上。Android 需要开启 USB 调试并装好 adbiOS 用 USB 连接即可接好后打开对应 Playground右侧实时显示设备画面你可以点击、滑动、输入文本读取当前系统版本号这类系统信息打开应用、填写表单操作方式与网页一致iOS 端是同样的界面打开设置并查看当前 iOS 版本这类指令会被拆成逐步操作完整走一遍从 eBay 抓一份商品清单以一个贴近日常的任务收尾在 eBay 搜 headphones把前几条商品的名字和价格提成 JSON。第一步输入指令面板切到 Action运行在站内搜索 headphones 并回车。第二步系统响应搜索完成后切到 Query运行页面中的商品{itemTitle: string, price: Number}[]。Midscene 等待列表加载逐屏识别商品卡片。第三步得到结果返回一个结构化的名称与价格数组。同时会生成一份报告文件用时间线回放整个流程——每一步有截图和耗时调试时能直接看出卡在哪一步。常见问题与处理方式扩展加载失败或页面报错多半是其他扩展注入脚本冲突。打开开发者工具找到chrome-extension://开头的资源在扩展管理页禁用对应扩展后刷新重试本地 Ollama 模型报 403设置环境变量OLLAMA_ORIGINS*后重启浏览器操作失败或点错元素把指令写得更具体如点击右上角蓝色搜索按钮并确保页面完全加载后再执行移动设备连不上确认 Android 已开 USB 调试且 adb 可用拔插重连iOS 需在设备上确认信任电脑想继续深入快速开始文档 列出了三类 API 的完整用法Playwright 集成 演示如何把这些指令接进现有测试套件现在就能做的第一步装好扩展、填好模型配置打开任意网站输入一句搜索今天的科技新闻。点下 Run就算跑通了。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考