用一句人话指挥浏览器Midscene.js × Playwright 智能浏览器自动化完整指南【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midsceneMidscene.js 是一个开源的 GUI Agent 框架GUI Agent即能看懂并操作图形界面的 AI。把它和 Playwright 组合起来你就可以用一句中文指挥浏览器AI 看懂当前截图、自己决定点哪里、填什么Playwright 负责真正执行鼠标和键盘。这套组合就是智能浏览器自动化——你只说目标不碰任何选择器。先别写选择器让脚本看懂页面做过表单自动化的人都踩过同一个坑class 名是构建工具生成的哈希串前端一重构脚本满屏红。Midscene 的思路正好反过来——不问这个元素叫什么而是问这个页面长什么样。它把当前页面截成图交给一个多模态大模型能同时理解文字和图片的 AI图上有哪里像提交按钮、哪个框是姓名输入框模型自己判断再换算成坐标交给 Playwright 去点。选择器会过期但页面底部有个蓝色按钮这种描述基本不会错。上面的 Playground 界面是这种感觉的缩影左边一栏写人话右边浏览器自己动。验证完指令同样的句子可以直接搬进代码。三步把环境跑起来第一步装依赖。两个包就够了npm install midscene/web playwright npx playwright install第二步配模型。需要两个环境变量OPENAI_API_KEY模型服务的密钥和MIDSCENE_MODEL模型名称。注意模型必须是带 UI 定位能力的多模态模型普通聊天模型看不到按钮在哪个像素。如果团队有自建网关或内部模型服务直接指向对应配置即可。第三步先玩再写。不想一上来就写脚本的话可以先装官方的 Chrome 扩展或启动 Playground在界面上输入指令验证效果确认模型行为符合预期再固化成代码。这个Click to set env的输入窗口在 Playground 里随时可用配置只存在本地浏览器不用翻终端。把自然语言写进代码三个核心动作真正写脚本时最常打交道的就三类方法。以一个自动投递求职表单 抓回职位数据的场景为例import { PlaywrightAgent } from midscene/web/playwright; const agent new PlaywrightAgent(page); await agent.aiAct(在姓名栏填写张三岗位下拉框选高级前端工程师); await agent.aiTap(表单最下方的提交申请按钮);aiAct是规划并执行适合多步骤的复合任务——它会先把一句话拆成步骤再逐步完成aiTap是单点动作适合明确知道要点哪里的场景。执行完想拿点东西回来就用查询const jobs await agent.aiQuery( 页面上的职位卡片{title: string, salary: string}[] );aiQuery会按你给的结构把页面内容整理成结构化数据返回数据抓取场景基本靠它。另外还有aiAssert断言页面上确实出现了成功提示和aiWaitFor等列表加载出至少一条结果这种语义化条件比写死sleep(5000)靠谱得多。更完整的参数说明可以看 API 参考新手建议配合 Playwright 集成文档 里的完整示例对照着读。幕后一条三步流水线这部分用一段话讲完即可每次执行都是一条固定流水线——截图 → 规划 → 执行。模型先看截图把自然语言拆成可执行步骤PlaywrightAgentPlaywright 的页面封装类原生 API 全保留逐步落地点击、输入、等待每一步都会留下记录。所以它不是黑盒出了问题能倒查到底。不止网页桌面 Chrome 也能接管有些系统没法轻易起一套干净的测试环境但你的日常浏览器里恰好登着。Chrome 插件提供的桥接模式Bridge Mode就是为此准备的本地脚本通过插件借用你真实在用的桌面 Chromecookies、登录态、已开的标签页全部复用脚本和手动操作还能交替进行。用法上创建AgentOverChromeBridge后连接标签页后续调用和普通 Agent 完全一致。细节见 桥接模式说明。执行报告每一步都看得见智能浏览器自动化最容易让人没底的是它到底做了什么。Midscene.js 每次运行都会生成一份 HTML 报告左侧按 Planning、Insight/Locate、Action 逐级展开每个决策的耗时右侧时间轴配上每一步的页面截图还能逐帧回放整个流程。对调试和给评审看证据这两个场景这份报告几乎可以直接当交付物。⚡ 避坑与提速定位失败怎么办。九成是描述太模糊。给提交按钮加上位置上下文——表单最下方的蓝色提交按钮——命中率会明显提升页面特别复杂时把模型换成定位能力更强的版本也是常规操作。跑得慢怎么办。开启缓存是最直接的手段const agent new PlaywrightAgent(page, { cache: { id: job-form } });缓存会记下规划过的步骤和定位到的元素位置下次同样的指令遇到相似的页面就直接复用、跳过模型调用官方文档里的示例执行耗时从 51 秒降到了 28 秒缓存失效时会自动回退重新分析不会卡死。别用 sleep 当等待。需要等页面稳定时优先用aiWaitFor描述你期望看到的状态而不是猜一个秒数。 延伸玩法用 YAML 跑脚本不想写 TypeScript 的话同样的指令可以写成 YAML 交给脚本运行器执行适合把自动化流程交给非前端同事维护见 YAML 脚本运行器文档。嵌进测试框架Playwright 的测试用例里也能直接用这套 AI 能力常规断言走选择器、模糊断言交给模型各取所长。同一套思路更多设备框架在 Android、iOS 到桌面端都有对应实现Playground 的形态也几乎一致想深挖原理Web 集成的源码在 packages/web-integration/src/playwright/从页面封装到 Agent 封装都有得看。下次再被一屏碎掉的哈希 class 名折磨时不妨让 AI 替你盯着屏幕——你负责说目标浏览器负责跑腿报告负责交代过程。【免费下载链接】midsceneGUI Agent for E2E Testing项目地址: https://gitcode.com/GitHub_Trending/mid/midscene创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
