Midscene.js 实战3 行代码让 AI「看懂」屏幕Playwright E2E 不再怕选择器失效【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene凌晨两点的 CI 通知整条 E2E 流水线红了原因是前端把按钮的 class 名换了你精心写好的 XPath 当场失效。这种场景写过浏览器自动化的人都熟悉。Midscene.js 是面向 E2E 测试的视觉驱动 GUI Agent配合 Playwright 使用时它靠「看屏幕截图」来定位元素而不依赖 DOM 结构。这篇文章带你跑通第一个「搜索 → 筛选 → 断言」流程再聊聊它的效果边界和踩坑点。为什么 Midscene.js 视觉定位比 XPath 稳旧做法写page.click(xpath//div[classbtn])。DOM 一变就红你得回头逐个修选择器。新做法截屏 → 发给多模态大模型 → 模型返回「搜索框在坐标 (x, y)」→ Playwright 去点那个位置。你描述的是界面“点击搜索框”而不是 DOM 树。屏幕是给人看的模型擅长读的就是这一层所以前端改样式、重组 DOM只要外观没变脚本照常工作。纯图标按钮、自绘控件、跨域 iframe 里的内容这些选择器最棘手的区域恰好是这套方法的用武之地。还有一个细节走截图意味着不必把整棵 DOM 塞给模型输入 token 可控这也是它整体成本偏低的原因之一。落地时也不必非用 Playwright 起一个新浏览器。Chrome 扩展的 Bridge Mode 可以把你日常用的浏览器通过一个 WebSocket 地址接进来脚本直接复用你本地的登录态和 cookies。第一次跑通Playwright 接入电商搜索、筛选与断言最典型的场景是电商流程。先配置模型服务任选一个你支持的多模态模型即可export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628再写最小可运行示例import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch({ headless: false }); const page await browser.newPage(); await page.goto(https://www.ebay.com); const agent new PlaywrightAgent(page); await agent.aiAct(搜索 headphones筛选价格低于 100 美元的结果); await agent.aiWaitFor(出现筛选后的搜索结果); await agent.aiAssert(结果页所有商品的价格都低于 100 美元);这段代码在做什么Playwright 照常打开页面new PlaywrightAgent(page)把页面控制权交给 AgentaiAct接一句自然语言Agent 自己完成输入关键词、点击、筛选aiWaitFor用视觉确认「结果已加载」替代写死的 sleepaiAssert的断言同样用自然语言写。官方指南里还有aiQuery结构化数据提取、aiBoolean等 API值得过一遍Playwright 集成指南。写脚本之前可以先在 Playground 里把指令试一遍——模型打算点哪里、理解是否到位当场就能看到能省掉很多「猜一句 → 跑一次 → 红一次」的循环。数据如何Pass1 能到多少成本多少官方公布的数据Pass1 每个 case 单次尝试的通过率基于官方报告AppControlBench60 个 iOS 真实 App 任务Doubao Seed 2.1 Turbo 96.7%Qwen3.7 Plus 93.3%DeepSeek V4 Flash Vision Exp 86.7%AndroidWorld93.1%Gemini-3.5-FlashMobileWorld78.6%Gemini-3.6-Flash成本AppControlBench 的 60 个任务一次跑完模型费用合计 0.59 美元数字和模型选择、页面复杂度相关实际项目请以自己试跑为准。也要诚实说清边界每个 AI 步骤至少一次模型调用执行速度比纯选择器脚本慢流程越长token 成本越高。对界面稳定、选择器可靠的中后台页面传统方式反而更简单、更便宜。落地三件事灰度、留痕、选模型先从小流程灰度别一次性替换全部选择器测试先接入一两个「最难维护」的流程页面变动频繁、交互复杂稳定后再扩。保留 AI 决策记录Midscene.js 默认生成 HTML 报告每步的截图、元素位置、模型推理过程都在里面。测试红了先看报告别靠猜。模型选型先做对比不同模型的成本和识别能力差异明显简单流程用便宜模型复杂 UI 流程再试更强的模型配置项见模型配置。如果你的项目是前端变动多、自定义组件多或者要同时覆盖 Web 和移动端的自动化场景Midscene.js 值得一试页面稳定、选择器可靠的话现有方式可能就够了。建议先 clone 仓库 https://gitcode.com/GitHub_Trending/mid/midscene 把官方 Playwright 示例完整跑一遍再决定要不要接入自己的流水线。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene.js 实战：3 行代码让 AI「看懂」屏幕，Playwright E2E 不再怕选择器失效
Midscene.js 实战3 行代码让 AI「看懂」屏幕Playwright E2E 不再怕选择器失效【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene凌晨两点的 CI 通知整条 E2E 流水线红了原因是前端把按钮的 class 名换了你精心写好的 XPath 当场失效。这种场景写过浏览器自动化的人都熟悉。Midscene.js 是面向 E2E 测试的视觉驱动 GUI Agent配合 Playwright 使用时它靠「看屏幕截图」来定位元素而不依赖 DOM 结构。这篇文章带你跑通第一个「搜索 → 筛选 → 断言」流程再聊聊它的效果边界和踩坑点。为什么 Midscene.js 视觉定位比 XPath 稳旧做法写page.click(xpath//div[classbtn])。DOM 一变就红你得回头逐个修选择器。新做法截屏 → 发给多模态大模型 → 模型返回「搜索框在坐标 (x, y)」→ Playwright 去点那个位置。你描述的是界面“点击搜索框”而不是 DOM 树。屏幕是给人看的模型擅长读的就是这一层所以前端改样式、重组 DOM只要外观没变脚本照常工作。纯图标按钮、自绘控件、跨域 iframe 里的内容这些选择器最棘手的区域恰好是这套方法的用武之地。还有一个细节走截图意味着不必把整棵 DOM 塞给模型输入 token 可控这也是它整体成本偏低的原因之一。落地时也不必非用 Playwright 起一个新浏览器。Chrome 扩展的 Bridge Mode 可以把你日常用的浏览器通过一个 WebSocket 地址接进来脚本直接复用你本地的登录态和 cookies。第一次跑通Playwright 接入电商搜索、筛选与断言最典型的场景是电商流程。先配置模型服务任选一个你支持的多模态模型即可export MIDSCENE_MODEL_API_KEYyour-api-key export MIDSCENE_MODEL_NAMEdoubao-seed-2-1-turbo-260628再写最小可运行示例import { chromium } from playwright; import { PlaywrightAgent } from midscene/web/playwright; const browser await chromium.launch({ headless: false }); const page await browser.newPage(); await page.goto(https://www.ebay.com); const agent new PlaywrightAgent(page); await agent.aiAct(搜索 headphones筛选价格低于 100 美元的结果); await agent.aiWaitFor(出现筛选后的搜索结果); await agent.aiAssert(结果页所有商品的价格都低于 100 美元);这段代码在做什么Playwright 照常打开页面new PlaywrightAgent(page)把页面控制权交给 AgentaiAct接一句自然语言Agent 自己完成输入关键词、点击、筛选aiWaitFor用视觉确认「结果已加载」替代写死的 sleepaiAssert的断言同样用自然语言写。官方指南里还有aiQuery结构化数据提取、aiBoolean等 API值得过一遍Playwright 集成指南。写脚本之前可以先在 Playground 里把指令试一遍——模型打算点哪里、理解是否到位当场就能看到能省掉很多「猜一句 → 跑一次 → 红一次」的循环。数据如何Pass1 能到多少成本多少官方公布的数据Pass1 每个 case 单次尝试的通过率基于官方报告AppControlBench60 个 iOS 真实 App 任务Doubao Seed 2.1 Turbo 96.7%Qwen3.7 Plus 93.3%DeepSeek V4 Flash Vision Exp 86.7%AndroidWorld93.1%Gemini-3.5-FlashMobileWorld78.6%Gemini-3.6-Flash成本AppControlBench 的 60 个任务一次跑完模型费用合计 0.59 美元数字和模型选择、页面复杂度相关实际项目请以自己试跑为准。也要诚实说清边界每个 AI 步骤至少一次模型调用执行速度比纯选择器脚本慢流程越长token 成本越高。对界面稳定、选择器可靠的中后台页面传统方式反而更简单、更便宜。落地三件事灰度、留痕、选模型先从小流程灰度别一次性替换全部选择器测试先接入一两个「最难维护」的流程页面变动频繁、交互复杂稳定后再扩。保留 AI 决策记录Midscene.js 默认生成 HTML 报告每步的截图、元素位置、模型推理过程都在里面。测试红了先看报告别靠猜。模型选型先做对比不同模型的成本和识别能力差异明显简单流程用便宜模型复杂 UI 流程再试更强的模型配置项见模型配置。如果你的项目是前端变动多、自定义组件多或者要同时覆盖 Web 和移动端的自动化场景Midscene.js 值得一试页面稳定、选择器可靠的话现有方式可能就够了。建议先 clone 仓库 https://gitcode.com/GitHub_Trending/mid/midscene 把官方 Playwright 示例完整跑一遍再决定要不要接入自己的流水线。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考