Midscene.js 让 AI 仅凭一张截图操作屏幕跨平台 UI 自动化新手指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene你受够了选择器每次重构就碎掉吗Midscene.js 是一个 AI 驱动的 UI 自动化工具它让多模态模型直接看懂截图理解界面上的每个按钮和输入框再替你完成点击、输入、断言。Web、Android、iOS、鸿蒙、桌面应用一套 API 全部覆盖你只需要用自然语言描述操作目标。它到底是什么给机器装了一双会看屏幕的眼睛传统 UI 自动化要么靠 CSS 选择器要么读 DOM 和无障碍树。问题在于结构一变选择器就失效纯图标按钮、canvas画布、原生 App、跨域 iframe这些工具统统看不见。Midscene 换了一条路它只认截图。你给它一句点击登录按钮视觉模型在屏幕上找到那个按钮的坐标直接点下去。它不关心元素有没有语义化标注人眼能看到的它就能操作。整个能力浓缩成三个 APIaiAct规划并执行多步操作、aiQuery提取结构化数据、aiAssert按用户实际看到的画面做断言。比元素存在不存在更进一步它能验证颜色、高亮、布局这类视觉状态。Playground左侧输入指令右侧实时看到操作结果五分钟跑通先装个浏览器插件一行代码都不用写别急着搭项目Midscene 的 Web 端 Playground 就是一个 Chrome 插件装好就能玩。第一步准备一个多模态模型。它会承担看屏幕的工作所以选模型的关键标准是 UI 定位能力。以豆包为例设置四个环境变量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-seedQwen3.x、GLM、Gemini、UI-TARS 等模型在官方文档的支持的模型与配置页都能直接复制对应配置开源模型也可以自己部署。第二步从 Chrome 商店安装 Midscene 插件把上面这组配置粘贴到插件设置里保存。第三步打开任意网页在侧边栏输入符合页面内容的指令比如点击登录按钮或提取页面中的商品 {name, price}[]。跑通了看到界面上真的被点下去的那一刻你就明白这套东西的直觉有多强。Bridge 模式终端里的 SDK 可以接管你的桌面浏览器玩熟之后想进代码装核心包npm install midscene/web创建 Agent 后你会发现插件里验证过的指令能原封不动搬进脚本await agent.aiAct(搜索耳机把第一件商品加入购物车); const products await agent.aiQuery{ name: string; price: number }[]( 页面中的商品{name: string, price: number}[]); await agent.aiAssert(购物车数量显示为 1);它是怎么工作的一次看—想—做的循环说白了就是让 AI 扮演一个盯着屏幕的测试员。截图当前屏幕就是唯一输入DOM 不参与定位。看懂多模态模型分析截图判断登录按钮在哪个位置并规划接下来要做几步。生成操作输出点击、输入、滑动等动作序列交给各平台适配器执行。执行并验证动作完成后重新截图核对确认目标达成或继续下一步全程记录进可视化报告可逐步回放。这一整套规划—定位—执行的循环在核心包 packages/core/src/agent/ 中实现Web、Android 等平台只是换掉了手点按方式和眼截图来源大脑共用同一套逻辑。这也是它跨平台的根本原因。Android Playground 左侧完整展示了规划、定位、操作三步循环三个真实场景测试、提速、远程遥控场景一E2E 回归测试。背景团队每周跑回归UI 一改就批量红。做法把 Midscene 挂进现有 Playwright 或 Vitest 用例自然语言描述步骤断言写用户实际看到什么。效果标记或样式变化不再牵连用例维护成本大幅下降失败时还能打开回放报告逐步看 AI 当时看到了什么。场景二重复任务提速。背景同一个脚本每天跑几十次模型调用又慢又花钱。做法给 Agent 配置缓存cache: { id: my-flow }规划结果和元素定位会被存到midscene_run/cache目录命中即复用失效自动回退重算。效果官方文档中的示例执行耗时从 51 秒降到 28 秒且查询类操作天然不缓存不用担心拿到旧数据。场景三网页上远程操控手机。背景想演示或调试 Android 应用但不想搭设备农场。做法手机通过 USB 连上 adb启动 Android Playground浏览器里就有实时画面输入打开设置查看当前安卓版本号即可远程操作。效果零代码完成真机操作官方甚至用它订过圣诞节酒店——是的真订成功了。踩坑与调优五个经验值aiAct 比即时操作慢单步明确的点击、输入直接用aiTap等即时 API只有多步骤、带条件分支的任务才值得交给aiAct去规划。定位不准别硬刚换模型选 UI 定位能力强的模型Qwen3.x、UI-TARS、Doubao-Seed 这类小元素容易点偏时给aiAct加deepLocate: true。缓存记得给 idcache: { id: xxx }才能让多次运行命中同一条缓存缓存存的是规划而非查询结果数据提取永远走模型放心用。描述像指给别人看右上角第一个蓝色按钮比提交按钮更稳尤其当元素长得差不多时加位置线索能明显减少误点。复杂任务失败先看报告多步任务中途翻车打开可视化回放定位到具体哪一步规划偏了再考虑开启deepThink加强任务拆解。生态与集成往哪接都留了口接入方式形态说明Playwright / PuppeteerSDK挂到已有浏览器实例混用传统断言与 AI 操作Vitest / 测试框架测试用例用例写 YAML命令行批量跑产出回放报告CLI命令行跨 Web、Android、iOS、鸿蒙、桌面批量执行 YAML 脚本AI 编程 AgentSkills让编程 Agent 通过各平台 CLI 自主驱动 Midscene 做测试官方 MCP server 已下线统一走 Skills自定义界面协议只要能截图回传坐标packages/web-integration/src/ 的模式可以照搬到任意界面写在最后当模型越来越会看UI 自动化的门槛就从会写选择器变成了会写人话。打开官方文档跑一遍 Chrome 插件里的注册表单案例你会发现比预想中快得多——剩下的留给你的第一个真实用例。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考