场景：AI Agent 写的浏览器脚本总在真实环境下崩溃？Libretto 给 Agent 一双「眼睛」，从录制到调试全帮你搞定
写浏览器自动化的开发者都经历过这种场景：你用 Claude Code 写了一段 Playwright 脚本，在本地测试一切正常，CI 上却因为某个选择器变了而全线飘红。更让人抓狂的是，AI Agent 在写脚本时完全「盲写」——它看不到真实的网页长什么样，只能凭你喂给它的 HTML 片段猜测 UI 结构。
Saffron Health 开源的 Libretto 就是为了解决这个问题而生的。它不是一个传统的浏览器自动化库，而是一套专门为 AI 编码 Agent 打造的浏览器工具链——让 Agent 可以「亲眼看到」网页、录制你的操作、回放脚本、在失败时暂停并调试，所有操作都通过 token 高效的 CLI 完成。
不是又一个 Playwright 包装，是从 Agent 角度重新设计的工具
市面上已经有很多浏览器自动化方案，但 Libretto 的独特之处在于：它是从 AI Agent 的交互模式出发重新设计的。
传统的 Playwright 脚本需要开发者手动定位元素、编写断言，脚本一旦写死就难以适应 UI 变化。AI Agent 虽然能生成脚本，但它和浏览器之间隔着一条「盲沟」——Agent 不知道真实渲染出来的 DOM 是什么样，只能在猜测中生成代码。
Libretto 的架构包含三大部分：
- Token 高效的 CLI — Agent 通过简洁的 CLI 命令操作浏览器，而非塞满整个 DOM 到上下文
- 录制与回放引擎 — 录制用户在浏览器中的操作，生成可维护的 Playwright 脚本
- 网络流量捕获 — 把浏览器自动化逆向为直接的 API 调用，减少对 UI 自动化的依赖
安装与初始化
Libretto 是一个 npm 包，安装非常简单：
npm install libretto npx libretto setup npx libretto status
setup 命令会在项目根目录创建 .libretto/ 目录，安装对应的 Agent skill 文件，并自动下载 Chromium 浏览器（通过 --skip-browsers 可以跳过这一步）。
如果你想快速创建一个新项目，可以用脚手架：
npm create libretto@latest my-automation cd my-automation
场景一：用一句话让 Agent 帮你做网页数据采集
这是 Libretto 最直观的用法——直接对 AI Agent 自然语言描述需求，Agent 会打开浏览器窗口让你先登录，然后自动开始探索和采集：
“Use the Libretto skill. Go on LinkedIn and scrape the first 10 posts for content, who posted it, the number of reactions, the first 25 comments, and the first 25 reposts.”
Agent 会打开一个浏览器窗口让你登录 LinkedIn，然后自动浏览页面、提取数据。整个过程 Agent 能「看到」真实页面，所以不会出现「选择器找不对」的尴尬。
场景二：录制用户操作生成稳定脚本
复杂的业务工作流通常难以用一次性 Prompt 生成。Libretto 支持交互式录制——你执行一次操作，Agent 观察并记录，然后生成对应的 Playwright 脚本。
例如在一个医疗 EHR 系统中查找患者的保险 ID：
“I’m gonna show you a workflow in the eclinicalworks EHR to get a patient’s primary insurance ID. Use libretto skill to turn it into a playwright script that takes patient name and dob as input to get back the insurance ID.”
Agent 会读取你在浏览器中的操作序列，理解工作流的逻辑步骤，然后生成一个可复用的带参数脚本。
场景三：把浏览器自动化转为直接的 API 请求
这是最巧妙的功能之一。许多网站其实有内部的 API 接口，浏览器操作最终也是调用这些 API。Libretto 可以捕获浏览器发出的网络请求，让 Agent 分析这些请求的规律，然后生成直接调用 API 的脚本：
npx libretto run ./integration.ts --headless
Agent 可以分析网络流量中的 URL、请求头、参数模式，然后用 fetch 或 axios 生成更快的纯 API 脚本。这样可以绕过 UI 自动化的脆弱性——API 接口通常比 UI 选择器稳定得多。
场景四：修复失败的 Playwright 脚本
这是 Libretto 的「PR agent」功能——当现有脚本因为 UI 变化而失败时，Agent 可以自动修复：
“We have a browser script at ./integration.ts that is supposed to go to Availity and perform an eligibility check for a patient. But I’m getting a broken selector error when I run it. Fix it.”
Agent 会打开真实的页面，重新定位元素，更新选择器或操作步骤，然后提交修复。从 HN 帖子来看，这个功能被用在 CI 管道中——当 Playwright 测试失败时，Libretto 的调试 Agent 会自动分析失败原因并开出 PR 修复。
CLI 命令全览
Libretto 的核心交互全部通过 CLI 完成，这对 AI Agent 特别友好：
npx libretto opennpx libretto run ./workflow.ts --headless npx libretto run ./workflow.ts --headless --stay-open-on-success npx libretto snapshot --session npx libretto exec "await page.title()" npx libretto close
每个命令都支持 --session 参数来管理多个独立的浏览器会话。失败的运行会自动保持浏览器打开，方便现场调试。
为什么对 AI Agent 特别友好？
Libretto 在设计上考虑了 AI Agent 的几大痛点：
- Token 消耗低 — 不把整个 DOM 塞给 Agent，而是用紧凑的 accessibility tree 和快照代替，大幅减少上下文占用
- 命令行可编程 — 所有功能通过 CLI 暴露，Agent 不需要写复杂的 Playwright 代码就能操作浏览器
- 调试友好 — 失败时自动保持浏览器状态，Agent 可以逐步检查页面元素
- 内置技能 — 安装时自动配置好 Agent skill，Claude Code、Cursor 等可以直接识别和使用
开源与社区
Libretto 采用 MIT 许可证，源代码托管在 github.com/saffron-health/libretto，已有 770+ GitHub Stars。项目目前处于早期阶段（v1.0 之前），API 可能会有变化，建议在生产环境中锁定具体版本。
如果你厌倦了 AI Agent 在「盲写」浏览器脚本后不断失败，Libretto 的思路值得一试——给 Agent 一双眼睛，让它看到真实的网页，录制你的操作，在失败时停下来思考。
相关链接：