引言
在 AI 工具高速迭代的今天，如何让 AI 真正替代人工完成繁琐的浏览器操作，同时又不消耗大量 token？视频由”爬爬虾”出品，系统介绍了一套以 Playwright CLI + Skill 为核心、配合 Claude Code 或 Codex 的浏览器自动化框架，不仅大幅降低 token 消耗，甚至能实现零 token 全自动化工作流。
–熟练掌握 Playwright CLI 安装、设置、配置以及如何集成到 Claude:
Playwright CLI 完整中文指南——安装、配置、与 Claude Code 集成
什么是 Playwright CLI？
Playwright CLI 是微软于 2026 年初开源的命令行浏览器自动化工具，专为 AI Agent 场景设计，核心优势是按需加载——不将整个 DOM 塞入上下文，大幅节省 token。
架构对比：MCP vs Playwright CLI
适用场景
抓取电商评论、价格监控、定期报告生成
自动将文章发布到各平台，处理图片上传
对 Web App 进行端到端测试，定时巡检
表单填写、重复操作、数据录入等日常任务
环境准备
安装 Node.js
前往 nodejs.org 下载对应操作系统的安装包，推荐使用 LTS 版本（v18+）。
node –version
npm –version
安装 Playwright CLI
npm install -g @playwright/mcp@latest
# 或使用 npx 直接运行（无需全局安装）
npx @playwright/mcp@latest –help
安装浏览器
推荐使用 Chrome，Edge 也可。确保已安装并可被系统识别。
npx playwright install chromium
验证安装
npx @playwright/mcp@latest “打开 google.com” –headed
# 如成功，控制台输出网页摘要，而非完整 DOM
项目目录初始化
mkdir my-automation && cd my-automation
# 初始化 npm（可选，用于管理脚本依赖）
npm init -y
# 安装 Claude Code Skill（浏览器自动化技能文档）
npx @anthropic-ai/claude-code –skill playwright
核心命令参考
基础导航
npx @playwright/mcp@latest “goto https://example.com” –headed
# 持久化登录状态（Cookie、LocalStorage 等写入磁盘）
npx @playwright/mcp@latest “goto https://x.com” –headed –persistent
# 无头模式（后台静默运行，节省内存）
npx @playwright/mcp@latest “goto https://example.com”
重要参数说明
| 参数 | 说明 | 使用场景 |
|---|---|---|
| –headed | 有头模式，可见浏览器窗口 | 调试、开发阶段 |
| –persistent | 持久化 Cookie 与登录状态到本地磁盘 | 需要登录的网站，避免重复认证 |
| –screenshot | 截图保存为本地 PNG，AI 按需读取 | 验证页面状态、调试 |
| –snapshot | 输出详细 DOM 快照文件路径 | 需要精确元素定位时 |
| –timeout | 设置操作超时时间（毫秒） | 网络慢或页面加载慢时 |
按需加载原理（节省 token 的关键）
执行命令后，Playwright CLI 只返回简洁摘要，并附上快照文件路径。AI 根据任务需要自行决定是否读取完整快照或截图，而不是像 MCP 那样将所有内容强制塞入上下文。
常用操作命令
playwright_click “button[data-testid=’submit’]”
# 输入文本
playwright_fill “input[name=’search’]” “搜索关键词”
# 截图（存本地，AI 按需读取）
playwright_screenshot –path “/tmp/screenshot.png”
# 执行 JavaScript
playwright_evaluate “document.querySelectorAll(‘.review’).length”
# 等待元素出现
playwright_wait_for_selector “.results-loaded”
接入 Claude Code
创建项目目录，安装 Skill
# 安装 Playwright CLI 的配套 Skill
npx playwright-skill install –target .claude
# Skill 文件结构：
# .claude/
# skills/
# playwright-cli/
# SKILL.md ← AI 读取的说明文档
启动 Claude Code，验证 Skill 加载
claude
# 在 Claude Code 内验证
> 你有哪些 skills？
# 预期输出：列出 playwright-cli skill
适配 Codex（可选）
mv .claude .codex
# 在 Codex 内验证
/skills # 应可见 playwright-cli
目录结构总览
├── .claude/
│ └── skills/
│ ├── playwright-cli/
│ │ └── SKILL.md ← Playwright CLI 使用说明
│ └── scrape-reviews/ ← 自定义 Skill（后续创建）
│ └── SKILL.md
├── scripts/ ← AI 生成的自动化脚本
│ └── scrape-reviews.ps1
└── outputs/ ← 任务输出结果
└── reviews.csv
CLI + Skill 取代 MCP 的原因
MCP 是将工具能力直接嵌入 AI 上下文的协议，每次调用都携带大量元数据。而 CLI + Skill 模式中，Skill 充当说明文档（AI 读一次即记住），CLI 作为命令执行层，两者配合实现轻量、高效、可沉淀的自动化框架。
Skill 文件结构与编写规范
Skill 是一个 Markdown 文件（SKILL.md），告诉 AI 如何使用特定工具或执行特定流程。
name: playwright-cli
description: 使用 Playwright CLI 进行浏览器自动化
version: 1.0.0
—
## 工具说明
Playwright CLI 是命令行浏览器自动化工具。
按需加载机制，大幅节省 token 消耗。
## 安装
npm install -g @playwright/mcp@latest
## 常用命令
– goto <url> –headed –persistent
– click <selector>
– fill <selector> <text>
– screenshot –path <file>
– evaluate <js>
## 注意事项
– 始终添加合理延迟确保页面加载
– 优先使用 –persistent 避免重复登录
– 调试时使用 –headed 查看页面状态
自定义业务 Skill 示例
name: scrape-reviews
description: 抓取电商商品评论并导出 CSV
—
## 流程
1. 打开商品页面（–headed –persistent）
2. 等待页面加载完成（selector: .product-title）
3. 点击”查看全部评价”按钮
4. 等待评论列表渲染（等待 2 秒）
5. 执行 JS 抓取评论数据
6. 翻页循环直到获取目标数量
7. 保存为 CSV 文件
## 已知问题与解决方案
– 评论懒加载：需滚动到底部触发加载
– 翻页按钮可能被遮挡：先滚动到可见区域
– 反爬限制：每次操作间隔 1-2 秒
## 输出格式
CSV 字段：id, author, rating, content, date
让 AI 自动生成 Skill
> 创建一个新的 skill，把刚才打开网站、
> 查看评论并保存的全过程，包括遇到的坑，
> 都提炼保存到 .claude/skills/scrape-reviews/ 下。
> 以后我只说”保存评论”，你就能调用这个 skill 完成任务。
实战案例
电商评论抓取 → CSV 导出
目标：获取某商品前 100 条评论，导出为 CSV 文件。
第一阶段：AI 探索执行（无 Skill）
> 查看这个商品的前 100 条评论
> 然后保存到 reviews.csv
AI 自行探索，消耗 41% 上下文才完成任务
第二阶段：沉淀 Skill，重试相同任务
> 把刚才的流程提炼成 skill，存到 .claude/skills/scrape-reviews/
# 2. 清空上下文，重试
> 使用 scrape-reviews skill，抓取相同商品的评论
有 Skill 指导后，仅用 5% 上下文完成，效率提升 10 倍
第三阶段：固化脚本，零 token 执行
> 把刚才所有 playwright cli 命令汇总成一个脚本，
> 执行脚本就能获取前 100 条评论并保存为 CSV。
> 注意每一步都要有合理的延时，脚本写完先自行测试。
# 直接运行脚本（零 token，零 AI 参与）
./scrape-reviews.ps1 # Windows PowerShell
bash scrape-reviews.sh # macOS / Linux
脚本直接运行，完全不需要 AI，token 消耗归零
Markdown 文章自动发布到 X 平台
痛点：X 不支持 Markdown 直接粘贴，图片需手动一张张替换，极为繁琐。
下载图片并转换格式
> 1. 把文章里的图片下载到 ./images/ 从 001 开始编号
> 2. 转换成只使用本地图片路径的 markdown
> 3. 运行 pandoc 转换成 HTML（每张图独立段落）
AI 自动化发布流程
> 1. 打开 X，创建新文章草稿
> 2. 粘贴 HTML 内容
> 3. 找到所有照相机占位符图标
> 4. 逐个删除占位符，从 images/ 按顺序上传真实图片
> 5. 图标数量与图片数量相等，按顺序替换
固化成 Skill，一键发布
> 放到 .claude/skills/publish-to-x/
> 以后我只要给你一个文章路径，
> 告诉你用这个 skill，你就能自动发布
# 之后每次只需：
> 使用 publish-to-x skill 发布 ./article.md
Web App 自动化测试
场景：对自己开发的简历润色 Web App 进行端到端测试。
让 AI 阅读代码，生成测试文档
> 写一个中文测试文档（每步做什么）
> 然后用 playwright cli 打开网页，
> 根据测试用例完成完整测试流程
AI 自动执行测试
定时巡检（进阶）
# 设置每小时/每天自动测试一次
# 一旦出现 Bug 立即通知开发者
> 使用 open-cloud agent，每天凌晨 2 点
> 自动运行完整测试套件，有问题发送通知
完整工作流总结
环境准备
安装 Node.js、Playwright CLI、Chrome 浏览器
接入 Agent + 安装 Skill
选择 Claude Code 或 Codex，安装 Playwright CLI Skill 到项目目录
布置任务，AI 自行探索
用自然语言描述任务，让 AI 第一次自行摸索完成，允许试错
提炼 Skill，知识沉淀
让 AI 将执行经验（含踩坑解决方案）固化为新 Skill，避免重复试错
Skill 指导下重试
相同任务在 Skill 指导下执行，上下文消耗从 41% 降至 5%，效率提升 10 倍
固化脚本，零 token 运行
对完全固定的流程，让 AI 生成独立脚本，此后直接执行，无需 AI 参与
三种执行模式对比
| 模式 | token 消耗 | 灵活性 | 适用场景 |
|---|---|---|---|
| AI 探索（无 Skill） | ~41% 上下文 | 最高 | 首次执行新任务 |
| AI + Skill 指导 | ~5% 上下文 | 高 | 重复但可能变化的任务 |
| 零 AI 固定脚本 | 0 | 固定 | 完全固定、高频执行任务 |
视频:关于Playwright CLI + Skill
核心工具：Playwright CLI 是什么？
Playwright CLI 是微软于 2026 年初开源的新一代浏览器自动化命令行工具，与传统 Playwright MCP 方案相比，最核心的优势在于按需加载机制：
- MCP 方式：将整个网页 DOM 结构塞入 AI 上下文，token 消耗极大。
- Playwright CLI 方式：只返回简洁的网页摘要，详细结构以快照文件形式存储在本地磁盘，由 AI 按需读取——截图同样如此，以 PNG 文件形式存于本地，而非直接塞入上下文。
根据官方基准测试，Playwright CLI 比 MCP 方案减少约 四倍的 token 消耗。
基础安装步骤：
- 安装 Node.js
- 命令行执行安装 Playwright CLI
- 确保本机已安装 Chrome 浏览器（Edge 亦可）
关键参数说明：
-headed：使用有头浏览器，方便调试时看到页面-persistent：将 Cookie、登录状态等持久化到本地磁盘，避免每次重新登录
接入 AI Agent：Claude Code 与 Codex
Playwright CLI 是全新工具，AI 并不原生了解其命令语法，因此需要搭配 Skill（技能文档） 一起使用——CLI 作为技术底座，Skill 作为说明手册，两者配合可完全取代传统 MCP 方式。
接入方式：
- Claude Code：在项目文件夹中安装 Skill，将其放入
.claude目录，启动 Claude Code 后即可读取 Playwright CLI 技能。 - Codex：将同一 Skill 目录改名为
.codex即可适配，通过/skills命令确认加载成功。
这也代表了当下一个重要技术趋势：CLI + Skill 取代 MCP 成为更轻量、更高效的 AI Agent 工具集成方式。
实战案例一：电商评论抓取与 Skill 沉淀
任务： 抓取某商品前 100 条评论，导出为 CSV 文件。
第一次执行（无 Skill）： AI 自行摸索，尝试多种方案，消耗了 41% 的上下文窗口才完成任务。
优化路径一——将流程沉淀为 Skill： 让 AI 将整个执行过程（包括踩过的坑）提炼为一个新 Skill，下次执行时 AI 充分吸取经验，仅用 5% 的上下文即完成相同任务——效率提升近 十倍。
优化路径二——生成零 token 固定脚本： 对于完全固定的流程，可让 AI 将所有 Playwright CLI 命令汇总成一个可独立运行的脚本（如 Windows PowerShell 脚本），此后直接执行脚本，无需 AI 参与，token 消耗归零，效果完全相同。
实战案例二：Markdown 文章自动发布到 X 平台
背景痛点： 将 Markdown 格式文章发布到 X（原 Twitter）时，格式混乱，图片无法直接粘贴，需手动一张张替换，极为繁琐。
自动化方案：
- 用 Codex 编写 Python 脚本，将文章中的图片下载到本地并编号；
- 使用 Pandoc 将 Markdown 转换为 HTML 格式（每张图独立段落）；
- 让 AI 使用 Playwright CLI 打开 X 编辑器，粘贴 HTML 内容，自动逐张删除占位符、上传真实图片；
- 将整个流程固化为一个 Skill，此后只需提供文章路径，AI 即可一键完成全流程发布。
相关 Skill 源代码已上传至作者 GitHub 仓库，供参考移植（Windows 版本，其他系统可让 AI 参考改写）。
实战案例三：Web App 自动化测试
场景： 作者开发了一个简历润色美化网页 APP，希望对其进行自动化测试。
流程：
- 让 AI 阅读项目代码，梳理主体功能流程；
- AI 编写中文测试文档，列出逐步操作用例；
- 使用 Playwright CLI 自动执行：注册账号→登录→上传测试简历→完成主体流程测试；
- 测试结论：通过。
进阶用法： 配合支持定时任务的 Agent 框架（如 Open Cloud），可让 AI 定时自动测试系统，一旦出现 Bug 立即告警，大幅节省人工测试成本。
完整工作流程总结
| 步骤 | 内容 |
|---|---|
| 1 | 安装 Node.js、Playwright CLI、Chrome 浏览器 |
| 2 | 选择 AI Agent（Claude Code / Codex），安装 Playwright CLI Skill |
| 3 | 给 AI 布置复杂任务，让其自行摸索执行 |
| 4 | 让 AI 将执行经验提炼为新 Skill，避免重复踩坑 |
| 5 | 重试相同任务，token 消耗降低约十倍 |
| 6 | 对固定流程，让 AI 生成独立脚本，实现零 token 全自动执行 |
结论与核心要点
本视频展示的 CLI + Skill 浏览器自动化框架，是一套兼顾灵活性与经济性的 AI 自动化方案。其核心思想是：将 AI 的探索成本一次性转化为可复用的知识资产，让后续执行越来越高效、越来越廉价。
核心要点：
- Playwright CLI 通过按需加载机制，比 MCP 节省约四倍 token
- Skill 是将 AI 试错经验固化的关键机制，可实现十倍效率提升
- 固定流程脚本化后可完全脱离 AI，实现零 token 自动化
- 同一框架可应用于数据抓取、内容发布、自动化测试等多种场景
- CLI + Skill 正在成为替代 MCP 的新一代 AI 工具集成趋势
相关参考资料
- Playwright 官方文档：https://playwright.dev/
- Microsoft Playwright CLI（开源项目）：https://github.com/microsoft/playwright
- Claude Code 官方文档：https://docs.anthropic.com/claude-code
- OpenAI Codex CLI：https://github.com/openai/codex
- Pandoc 文档转换工具：https://pandoc.org/
