Midscene.js基于视觉的跨平台 UI 自动化测试框架一文搞定【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene选择器一改就全挂你懂的痛——前端一重构几百个定位表达式跟着报废跨平台更是两眼一抹黑。Midscene.js 走的是另一条路不读 DOM、不摸无障碍树只看屏幕截图用一句自然语言描述点什么、输什么、断言什么就能跑通 Web、Android、iOS 甚至桌面端。下面用真实项目里的配置带你从安装到跑通一条完整流程。它到底帮你省了什么传统做法Midscene 做法写 CSS / XPath 选择器每次重构逐个修用自然语言描述元素界面变了也不用改定位只能测 Web移动端另起炉灶同一套aiAct/aiAssert换平台段即可复用断言节点是否存在断言用户实际看到什么颜色、高亮、布局都能验一句话你把怎么写换成描述意图维护成本和平台适配的活它接了。设计上的几个关键取舍纯视觉定位放弃读 DOM 和无障碍树改用截图定位。好处是能命中图标按钮、canvas、原生应用和跨域 iframe 这些结构化工具够不到的地方代价是每步都过一次多模态模型靠缓存来摊平成本。模型可插拔核心引擎不绑死某一家模型Qwen、豆包 Seed、GLM、Gemini、UI-TARS 都能换自托管开源模型也行。你按场景挑性价比而不是被锁定。YAML 与 SDK 双轨轻量流程用.yaml文件 一条命令跑复杂集成用 TypeScript SDK 嵌进 Playwright/Vitest。同一套能力两种粒度按需选。缓存兜底加速aiAct的规划结果和 Web 下的 XPath 定位都可缓存命中就跳过模型调用失效时自动回退到重新规划保证正确性优先于速度。跑通最小可用流程装全局装一个 CLI 就够Node 需要20.19、22.12或24。npm i -g midscene/cli装完敲midscene --version应能打印版本号。配 跑把模型服务写进运行目录的.env再配一份最小脚本一条命令执行。# 运行目录下建 .envdotenv 约定不要 export 前缀 MIDSCENE_MODEL_BASE_URLhttps://你的模型服务地址/v1 MIDSCENE_MODEL_API_KEY你的-KEY MIDSCENE_MODEL_NAME你的模型名 MIDSCENE_MODEL_FAMILY你的模型系列 # bing-search.yaml page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果显示天气信息midscene ./bing-search.yaml跑完终端会打印执行进度并在midscene_run/下生成一份可视化 HTML 报告用浏览器打开就能看到每一步的截图与断言结果。在 Web、Android、桌面三个场景怎么落地Web 下如何把 Midscene 嵌进 Playwright 用例已有 Playwright 工程的话加一个 fixture 就能在测试里直接用ai系列方法。import { PlaywrightAgent } from midscene/web/playwright; const agent new PlaywrightAgent(page); await agent.aiAct(type Headphones in search box, hit Enter); const items await agent.aiQuery( {itemTitle: string, price: number}[], find items and price, ); await agent.aiAssert(There is a category filter on the left);aiAct负责交互、aiQuery抽结构化数据、aiAssert做断言返回的items是可直接expect的普通数组。Android 下如何用 YAML 驱动真机设备接上adb后把page段换成android段即可逻辑不用重写。android: deviceId: s4ey59 # adb devices 里能查到 tasks: - name: 地图导航 flow: - ai: 打开地图应用 - ai: 在搜索栏输入 杭州西湖然后点击搜索按钮 - ai: 点击 路线 按钮进入路线规划页面 - aiAssert: 页面已显示路线规划结果预期CLI 会在真机上逐步操作最后一条aiAssert通过即视为该任务成功。桌面端如何用 computer 段操作鼠标键盘Windows / macOS / Linux 都能用靠系统级输入驱动模拟键鼠。computer: {} tasks: - name: 打开 Safari 搜索 flow: - aiAct: 按下 CmdSpace - aiAct: 输入 Safari 并按回车 - sleep: 2000 - aiAssert: 浏览器已打开Windows 上把CmdSpace换成Windows 键、CmdL换成CtrlL即可其余描述保持通用。进阶几个少有人注意的配置deepThink拆解复杂任务多数人只用默认aiAct但复杂页面会规划得偏粗。在步骤上加deepThink: true把任务拆解和元素定位拆成两次模型调用长流程成功率更稳。cache三档策略不是开了缓存就一定写盘。read-write边读边写、read-only只读需手动flushCache()落盘适合生产、write-only只写适合首轮建缓存。缓存在./midscene_run/cache下命中后同一案例耗时能从 51 秒压到 28 秒。replanningCycleLimit调上限默认aiAct最多重规划 20 次UI-TARS 模型 40 次。界面稳定时可调小省调用复杂场景调到 30 避免提前放弃。CLI 并发与重试批量脚本用--concurrent 4 --continue-on-error并行跑、出错继续--retry 2对偶发失败自动重试缓解大模型输出不稳定的抖动。踩过的坑 怎么绕过去下拉框点不到根因是原生select的展开面板由操作系统渲染根本没进截图。解法是确认forceChromeSelectRendering保持开启默认已开让 Chrome 来渲染下拉框选项就能被截到。截图报waiting for fonts to load/Timeout exceeded这是 Playwright 截图默认等字体CI 或容器里字体加载慢会卡死。加一个环境变量即可绕过PW_TEST_SCREENSHOT_NO_FONTS_READY1。Playwright 浏览器下载太慢npm install时不会自动下浏览器需单独npx playwright install。国内可配镜像PLAYWRIGHT_DOWNLOAD_HOSThttps://npmmirror.com/mirrors/playwright npx playwright install再只装chromium缩小体积。Chrome 扩展报Cannot access a chrome-extension:// URL多半是别的扩展往页面注入了iframe/script冲突。在 DevTools 里找到以chrome-extension://开头的节点拿到扩展 ID去chrome://extensions/禁用它再刷新。接下来怎么搞Midscene.js 的价值就一句话把 UI 测试从追着选择器跑变成描述意图让它看Web / Android / iOS / 桌面一套 API 通吃。想深入先看仓库根目录的 README 了解整体能力再照着 YAML 自动化脚本 和 Playwright 集成 两篇文档把第一个用例落地。遇到具体报错直接翻 FAQ 里对应平台那节比盲调快得多。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene.js：基于视觉的跨平台 UI 自动化测试框架，一文搞定
Midscene.js基于视觉的跨平台 UI 自动化测试框架一文搞定【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene选择器一改就全挂你懂的痛——前端一重构几百个定位表达式跟着报废跨平台更是两眼一抹黑。Midscene.js 走的是另一条路不读 DOM、不摸无障碍树只看屏幕截图用一句自然语言描述点什么、输什么、断言什么就能跑通 Web、Android、iOS 甚至桌面端。下面用真实项目里的配置带你从安装到跑通一条完整流程。它到底帮你省了什么传统做法Midscene 做法写 CSS / XPath 选择器每次重构逐个修用自然语言描述元素界面变了也不用改定位只能测 Web移动端另起炉灶同一套aiAct/aiAssert换平台段即可复用断言节点是否存在断言用户实际看到什么颜色、高亮、布局都能验一句话你把怎么写换成描述意图维护成本和平台适配的活它接了。设计上的几个关键取舍纯视觉定位放弃读 DOM 和无障碍树改用截图定位。好处是能命中图标按钮、canvas、原生应用和跨域 iframe 这些结构化工具够不到的地方代价是每步都过一次多模态模型靠缓存来摊平成本。模型可插拔核心引擎不绑死某一家模型Qwen、豆包 Seed、GLM、Gemini、UI-TARS 都能换自托管开源模型也行。你按场景挑性价比而不是被锁定。YAML 与 SDK 双轨轻量流程用.yaml文件 一条命令跑复杂集成用 TypeScript SDK 嵌进 Playwright/Vitest。同一套能力两种粒度按需选。缓存兜底加速aiAct的规划结果和 Web 下的 XPath 定位都可缓存命中就跳过模型调用失效时自动回退到重新规划保证正确性优先于速度。跑通最小可用流程装全局装一个 CLI 就够Node 需要20.19、22.12或24。npm i -g midscene/cli装完敲midscene --version应能打印版本号。配 跑把模型服务写进运行目录的.env再配一份最小脚本一条命令执行。# 运行目录下建 .envdotenv 约定不要 export 前缀 MIDSCENE_MODEL_BASE_URLhttps://你的模型服务地址/v1 MIDSCENE_MODEL_API_KEY你的-KEY MIDSCENE_MODEL_NAME你的模型名 MIDSCENE_MODEL_FAMILY你的模型系列 # bing-search.yaml page: url: https://www.bing.com tasks: - name: 搜索天气 flow: - ai: 搜索 今日天气 - sleep: 3000 - aiAssert: 结果显示天气信息midscene ./bing-search.yaml跑完终端会打印执行进度并在midscene_run/下生成一份可视化 HTML 报告用浏览器打开就能看到每一步的截图与断言结果。在 Web、Android、桌面三个场景怎么落地Web 下如何把 Midscene 嵌进 Playwright 用例已有 Playwright 工程的话加一个 fixture 就能在测试里直接用ai系列方法。import { PlaywrightAgent } from midscene/web/playwright; const agent new PlaywrightAgent(page); await agent.aiAct(type Headphones in search box, hit Enter); const items await agent.aiQuery( {itemTitle: string, price: number}[], find items and price, ); await agent.aiAssert(There is a category filter on the left);aiAct负责交互、aiQuery抽结构化数据、aiAssert做断言返回的items是可直接expect的普通数组。Android 下如何用 YAML 驱动真机设备接上adb后把page段换成android段即可逻辑不用重写。android: deviceId: s4ey59 # adb devices 里能查到 tasks: - name: 地图导航 flow: - ai: 打开地图应用 - ai: 在搜索栏输入 杭州西湖然后点击搜索按钮 - ai: 点击 路线 按钮进入路线规划页面 - aiAssert: 页面已显示路线规划结果预期CLI 会在真机上逐步操作最后一条aiAssert通过即视为该任务成功。桌面端如何用 computer 段操作鼠标键盘Windows / macOS / Linux 都能用靠系统级输入驱动模拟键鼠。computer: {} tasks: - name: 打开 Safari 搜索 flow: - aiAct: 按下 CmdSpace - aiAct: 输入 Safari 并按回车 - sleep: 2000 - aiAssert: 浏览器已打开Windows 上把CmdSpace换成Windows 键、CmdL换成CtrlL即可其余描述保持通用。进阶几个少有人注意的配置deepThink拆解复杂任务多数人只用默认aiAct但复杂页面会规划得偏粗。在步骤上加deepThink: true把任务拆解和元素定位拆成两次模型调用长流程成功率更稳。cache三档策略不是开了缓存就一定写盘。read-write边读边写、read-only只读需手动flushCache()落盘适合生产、write-only只写适合首轮建缓存。缓存在./midscene_run/cache下命中后同一案例耗时能从 51 秒压到 28 秒。replanningCycleLimit调上限默认aiAct最多重规划 20 次UI-TARS 模型 40 次。界面稳定时可调小省调用复杂场景调到 30 避免提前放弃。CLI 并发与重试批量脚本用--concurrent 4 --continue-on-error并行跑、出错继续--retry 2对偶发失败自动重试缓解大模型输出不稳定的抖动。踩过的坑 怎么绕过去下拉框点不到根因是原生select的展开面板由操作系统渲染根本没进截图。解法是确认forceChromeSelectRendering保持开启默认已开让 Chrome 来渲染下拉框选项就能被截到。截图报waiting for fonts to load/Timeout exceeded这是 Playwright 截图默认等字体CI 或容器里字体加载慢会卡死。加一个环境变量即可绕过PW_TEST_SCREENSHOT_NO_FONTS_READY1。Playwright 浏览器下载太慢npm install时不会自动下浏览器需单独npx playwright install。国内可配镜像PLAYWRIGHT_DOWNLOAD_HOSThttps://npmmirror.com/mirrors/playwright npx playwright install再只装chromium缩小体积。Chrome 扩展报Cannot access a chrome-extension:// URL多半是别的扩展往页面注入了iframe/script冲突。在 DevTools 里找到以chrome-extension://开头的节点拿到扩展 ID去chrome://extensions/禁用它再刷新。接下来怎么搞Midscene.js 的价值就一句话把 UI 测试从追着选择器跑变成描述意图让它看Web / Android / iOS / 桌面一套 API 通吃。想深入先看仓库根目录的 README 了解整体能力再照着 YAML 自动化脚本 和 Playwright 集成 两篇文档把第一个用例落地。遇到具体报错直接翻 FAQ 里对应平台那节比盲调快得多。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考