CLI + Skill 搭建 AI 浏览器自动化框架：告别一切重复枯燥任务

原视频：哔哩哔哩 BV1ooDyBmE6v
GitHub：microsoft/playwright-cli

---

🎯 一句话总结

用 Playwright CLI + Agent（Claude Code/Codex）+ Skills 搭建 AI 浏览器自动化框架，让 AI 代替你完成一切机械重复性工作，官方数据称能节省 4 倍 Token，完全固定流程甚至可以0 Token 全自动运行。

---

🔧 核心工具链

角色	工具	说明
Agent（大脑）	Claude Code / Codex	AI Agent 框架
浏览器自动化引擎	Playwright CLI	微软 2026 年初开源，按需加载 DOM
知识沉淀	Skills	将可复用流程固化成交档

---

💡 为什么选 Playwright CLI 而不是传统 Playwright MCP？

对比项	Playwright MCP	Playwright CLI + Skill
DOM 处理方式	整个 DOM 塞进上下文	AI 按需读取（不读就不消耗）
Token 消耗	高	节省约 4 倍
工作流固化	困难	Skills 沉淀流程，效果提升 10 倍

---

🛠️ 准备工作

1. 安装 Node.js
2. 安装 Playwright CLI：

npm install -g @playwright/cli@latest

3. 安装 Chrome 浏览器（推荐）

---

📖 基础使用

打开浏览器（带界面调试）

playwright-cli open google.com --headed

--headed = 有头模式（可见），不加则为无头（后台静默）

核心优势：按需加载

• CLI 只输出简洁的网页摘要 + 快照文件路径
• AI 需要详细内容 → 读取快照文件
• 不需要 → 不读取，不浪费 Token

截图

playwright-cli screenshot

截图以 PNG 文件形式存本地，由 AI 决定是否读取（而不是直接 Base64 塞进上下文）。

持久化登录状态

playwright-cli open google.com --headed --persistent

--persistent 将 Cookie、登录状态、本地存储写入磁盘，下次无需重新登录。

---

🔌 接入 AI Agent

1. 安装 Skills

playwright-cli install --skills

Skills 会放到项目目录的 .claude/ 文件夹下（适配 Claude Code）或 .codex/（适配 Codex）。

2. 在 Claude Code / Codex 中使用

让 AI 读取 Skills 后，它就知道如何调用 Playwright CLI 命令了。

---

📈 效率飞跃：从 41% → 5% Token 消耗

实际测试场景：抓取商品评论前 100 条并保存为 CSV

轮次	方式	Token 消耗
第 1 次	AI 自主探索试错	41% 上下文窗口
第 2 次	有 Skills 指导后重试	5% 上下文窗口

效率提升约 10 倍，核心就是把踩过的坑、成功的步骤固化成 Skills。

---

🎓 六步流程法

第一步：安装 nodejs、playwright-cli、chrome
          ↓
第二步：选择 AI Agent，装入 playwright-cli skill
          ↓
第三步：给 AI 复杂任务，让它自己摸索执行
          ↓
第四步：让 AI 把执行结果提炼成 skill（不再踩坑）
          ↓
第五步：重试任务，Skills 指导节省 10 倍 Token
          ↓
第六步：完全固定流程 → AI 写脚本，0 Token 全自动

---

🐍 实战案例 1：自动抓取电商评论

目标：抓取商品前 100 条评论 → 保存 CSV

方法：

1. AI 自主执行 → 发现问题 → 总结坑点 → 固化 Skills → 下次 5% Token 完成
2. 还可以让 AI 直接编写 PowerShell 脚本，完全不需要 AI 参与，0 Token 执行

---

🐍 实战案例 2：自动发布 Markdown 文章到 X（Twitter）

痛点：

• Markdown 格式直接粘贴会错乱
• 图片无法直接粘贴（变成相机图标）
• 需要一张张手动替换

解决方案：

1. 用 Python 脚本下载文章图片 → 本地编号
2. 转换 Markdown 为 HTML（本地图片路径）
3. 用 Playwright CLI 自动化发布流程：
   • 打开网站创建新文章
   • 粘贴 HTML 内容
   • 自动删除占位符图标
   • 自动上传对应图片替换
4. 全流程固化为 Skill，以后只需给文章路径

---

🐍 实战案例 3：AI 自动化测试 Web APP

流程：

1. AI 阅读代码，学习项目功能
2. AI 编写中文测试用例文档
3. AI 使用 Playwright CLI 打开浏览器
4. AI 按测试用例全自动执行测试
5. 定时运行，持续监控

示例：简历润色美化 Web APP 测试 → 注册 → 登录 → 上传简历 → 完成测试 → 通过

结合 OpenClaw 定时任务，还可以实现定时自动测试，修改出 bug 时 AI 自动发现并告警。

---

📊 核心收益总结

能力	说明
🏃 代替重复操作	AI 自动操作浏览器，0 人工介入
💰 节省 Token	按需加载 + Skills 固化，省 10 倍
⚡ 0 Token 自动化	固定流程脚本化，完全不需要 AI
🧠 知识沉淀	Skills 让经验可积累、可复用
🧪 自动测试	对 Web APP 进行 AI 自动化测试

---

Playwright文档：https://playwright.dev/docs/intro
结论：Playwright CLI 的按需加载设计 + Skills 的知识沉淀 + AI Agent 的智能决策，组成了一套高效、低成本、易上手的浏览器 AI 自动化解决方案。