Midscene.js 搭配 Playwright 的视觉驱动浏览器自动化完整指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene上午十点,一次前端发版让你的 Playwright 套件全线变红:类名换成了哈希值,选择器全部失效。Midscene.js 是一个面向 E2E 测试的 AI 视觉驱动 GUI Agent,配合 Playwright 后,它像人看屏幕一样操作页面,一行选择器都不用写。脚本死于发版选择器脚本天生脆弱,一次类名改动就能让整套用例报废。你可能见过:登录按钮的 id 被构建系统改成了随机串,你只能等前端同学补上稳定属性。sleep(5000)这种硬等也一样赌,网络慢一点用例就挂,快一点元素又没渲染出来。拖拽、悬停这类复杂交互,选择器逻辑更难写,也更难维护。类名每次都变,脚本还能怎么找到那个按钮?选择器为什么失灵,看屏幕为什么能赢Midscene.js 的思路很简单:不读 DOM,像人一样看屏幕。定位脆弱:CSS 选择器和 XPath 与 DOM 结构强绑定,框架一升级就散架。交互盲区:纯图标按钮、自定义控件、canvas里的内容,选择器要么找不到,要么描述不了。断言缺口:DOM 存在不等于用户看见了,颜色、选中高亮这类视觉状态传统断言完全覆盖不到。视觉定位对这三点是一起解决的:截图是它唯一的依据,元素在哪由长相决定,断言成没成由界面长什么样决定。看、做、验证:GUI Agent 的三步工作流视觉定位相当于让机器看屏幕,而不是读代码。GUI Agent 如何找到按钮页面截图发给多模态模型,模型看懂界面布局和元素含义,告诉系统点哪里、输什么。Playwright 负责在这些坐标上执行鼠标键盘事件。它找按钮的方式,和入职第一天的新人一样:不懂办公室的文件结构,但看着屏幕就能干活。aiAssert 如何验证用户看到的东西断言也来自截图:用自然语言描述预期结果,模型判断是否成立。选中的套餐带有蓝色边框和勾选标记——这种断言,必须看见界面才写得出。️ 用 7 行代码写出搜索筛选断言用例一个 Playwright page 加三句自然语言,就是一条完整的电商搜索测试。先装依赖并配置模型,key 放环境变量里不进脚本,安全也方便复用:pnpm add -D midscene/web playwright export MIDSCENE_MODEL_NAMEqwen3.7-plus export MIDSCENE_MODEL_API_KEYyour-api-key然后是测试主体,在已有的 Playwrightpage上执行:const agent new PlaywrightAgent(page); await agent.aiAct(搜索耳机,然后将结果筛选为价格低于 100 美元); await agent.aiWaitFor(筛选后的搜索结果已显示); await agent.aiAssert(搜索结果中的每件商品价格都低于 100 美元);aiAct把定位、输入、点击整条链路换成一句自然语言,由模型拆解成具体步骤逐步执行。注意断言写的是用户看到的画面,不是某个 DOM 节点的状态,这是视觉断言与传统断言的根本区别。 新旧方案对比:数字怎么说视觉定位的价值,看规模化跑测的数据最直观。成功率:AppControlBench 基准 Pass1 达 96.7%,60 个任务通过 58 个。执行成本:上述 60 个任务的模型调用总费用为 0.59 美元,截图方案不用发送庞大的 DOM 树,token 消耗更低。重复执行速度:开启缓存后,官方示例流程从 51 秒降到 28 秒,缩短约 45%。脚本寿命:脚本是否失效的判断,从DOM 变没变变成界面长没变,更接近人工回归的口径。三个进阶能力与三条避坑建议基础跑通之后,有三个能力可以把套件上限再抬一截,也有三件事要提前绕开。进阶能力:缓存策略:aiAct的规划结果与元素位置会存到./midscene_run/cache目录,执行失败时自动失效并回退模型重新规划,不用担心缓存过期。YAML 脚本运行器:测试流程用 YAML 写,不碰 JS,适合让手工测试同学参与补回归用例。跨平台复用:同一套 Agent API 也能驱动 Android、iOS 和桌面应用,Web 与 App 流程一致时脚本不用重写。避坑建议:从核心流程起步:先选一条高频回归链路跑通,观察报告里的耗时和稳定性,再逐步扩面。断言保持用户视角:aiAssert验证可见状态,aiQuery负责把页面数据抽成结构化字段,断言与取数分开写。让报告成为日常检查项:每次运行都生成带截图和操作记录的 HTML 报告,失败能定位到具体某一步、某一张图。更完整的接入细节见 Playwright 集成指南 和 缓存机制文档。明天就可以在你最头疼的那条链路上跑第一个aiAct,把一发版就坏的脚本,换成一个会看屏幕干活的同事。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Midscene.js 搭配 Playwright 的视觉驱动浏览器自动化完整指南
Midscene.js 搭配 Playwright 的视觉驱动浏览器自动化完整指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene上午十点,一次前端发版让你的 Playwright 套件全线变红:类名换成了哈希值,选择器全部失效。Midscene.js 是一个面向 E2E 测试的 AI 视觉驱动 GUI Agent,配合 Playwright 后,它像人看屏幕一样操作页面,一行选择器都不用写。脚本死于发版选择器脚本天生脆弱,一次类名改动就能让整套用例报废。你可能见过:登录按钮的 id 被构建系统改成了随机串,你只能等前端同学补上稳定属性。sleep(5000)这种硬等也一样赌,网络慢一点用例就挂,快一点元素又没渲染出来。拖拽、悬停这类复杂交互,选择器逻辑更难写,也更难维护。类名每次都变,脚本还能怎么找到那个按钮?选择器为什么失灵,看屏幕为什么能赢Midscene.js 的思路很简单:不读 DOM,像人一样看屏幕。定位脆弱:CSS 选择器和 XPath 与 DOM 结构强绑定,框架一升级就散架。交互盲区:纯图标按钮、自定义控件、canvas里的内容,选择器要么找不到,要么描述不了。断言缺口:DOM 存在不等于用户看见了,颜色、选中高亮这类视觉状态传统断言完全覆盖不到。视觉定位对这三点是一起解决的:截图是它唯一的依据,元素在哪由长相决定,断言成没成由界面长什么样决定。看、做、验证:GUI Agent 的三步工作流视觉定位相当于让机器看屏幕,而不是读代码。GUI Agent 如何找到按钮页面截图发给多模态模型,模型看懂界面布局和元素含义,告诉系统点哪里、输什么。Playwright 负责在这些坐标上执行鼠标键盘事件。它找按钮的方式,和入职第一天的新人一样:不懂办公室的文件结构,但看着屏幕就能干活。aiAssert 如何验证用户看到的东西断言也来自截图:用自然语言描述预期结果,模型判断是否成立。选中的套餐带有蓝色边框和勾选标记——这种断言,必须看见界面才写得出。️ 用 7 行代码写出搜索筛选断言用例一个 Playwright page 加三句自然语言,就是一条完整的电商搜索测试。先装依赖并配置模型,key 放环境变量里不进脚本,安全也方便复用:pnpm add -D midscene/web playwright export MIDSCENE_MODEL_NAMEqwen3.7-plus export MIDSCENE_MODEL_API_KEYyour-api-key然后是测试主体,在已有的 Playwrightpage上执行:const agent new PlaywrightAgent(page); await agent.aiAct(搜索耳机,然后将结果筛选为价格低于 100 美元); await agent.aiWaitFor(筛选后的搜索结果已显示); await agent.aiAssert(搜索结果中的每件商品价格都低于 100 美元);aiAct把定位、输入、点击整条链路换成一句自然语言,由模型拆解成具体步骤逐步执行。注意断言写的是用户看到的画面,不是某个 DOM 节点的状态,这是视觉断言与传统断言的根本区别。 新旧方案对比:数字怎么说视觉定位的价值,看规模化跑测的数据最直观。成功率:AppControlBench 基准 Pass1 达 96.7%,60 个任务通过 58 个。执行成本:上述 60 个任务的模型调用总费用为 0.59 美元,截图方案不用发送庞大的 DOM 树,token 消耗更低。重复执行速度:开启缓存后,官方示例流程从 51 秒降到 28 秒,缩短约 45%。脚本寿命:脚本是否失效的判断,从DOM 变没变变成界面长没变,更接近人工回归的口径。三个进阶能力与三条避坑建议基础跑通之后,有三个能力可以把套件上限再抬一截,也有三件事要提前绕开。进阶能力:缓存策略:aiAct的规划结果与元素位置会存到./midscene_run/cache目录,执行失败时自动失效并回退模型重新规划,不用担心缓存过期。YAML 脚本运行器:测试流程用 YAML 写,不碰 JS,适合让手工测试同学参与补回归用例。跨平台复用:同一套 Agent API 也能驱动 Android、iOS 和桌面应用,Web 与 App 流程一致时脚本不用重写。避坑建议:从核心流程起步:先选一条高频回归链路跑通,观察报告里的耗时和稳定性,再逐步扩面。断言保持用户视角:aiAssert验证可见状态,aiQuery负责把页面数据抽成结构化字段,断言与取数分开写。让报告成为日常检查项:每次运行都生成带截图和操作记录的 HTML 报告,失败能定位到具体某一步、某一张图。更完整的接入细节见 Playwright 集成指南 和 缓存机制文档。明天就可以在你最头疼的那条链路上跑第一个aiAct,把一发版就坏的脚本,换成一个会看屏幕干活的同事。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考