这篇文章参考抖音博主技术爬爬虾的 12 分钟视频，并结合 Playwright 官方文档核对了安装命令、参数和适用场景。本文记录的是 Playwright CLI + Skill 的基础工作流。
Playwright CLI 是面向编码 Agent 的浏览器自动化命令行工具。Agent 可以通过简短命令打开网页、读取页面结构、点击元素、输入内容并保存截图。对于步骤固定、需要反复执行的浏览器操作，还可以把流程整理成脚本或 Skill，减少重复手动操作。
一、工具准备
- Node.js 18 或更高版本：提供 npm 和 CLI 运行环境。
- Playwright CLI：负责启动和操作浏览器。
- 浏览器：支持 Chrome、Edge、Firefox 和 WebKit。
- 编码 Agent：Claude Code、Codex 或其他能够执行终端命令并读取 Skill 的工具。
- Skill：向 Agent 说明 Playwright CLI 的命令、操作顺序和注意事项。
Playwright CLI 能减少机械操作，但并不适合所有任务。首次搭建、页面变化、登录验证和异常处理仍需要人工检查。
二、操作步骤
（一）安装 Playwright CLI
下载并安装 Node.js 后，在终端执行：
playwright-cli --help 能正常输出命令列表，就说明 CLI 已安装成功。（二）打开浏览器
执行以下命令，以有界面模式打开 Google：
--headed 表示显示浏览器窗口，适合第一次调试和观察 Agent 的操作过程。不加该参数时，Playwright CLI 默认以无头模式在后台运行。运行模式 | 参数 | 浏览器界面 | 适用场景 |
有头模式 | --headed | 显示 | 首次运行、调试和观察操作过程 |
无头模式 | 默认，不添加参数 | 不显示 | 后台自动化、固定脚本和 CI |
（三）区分 Snapshot 和 Screenshot
Playwright CLI 提供两种不同的页面记录方式：
snapshot保存页面的可访问性结构和元素引用。Agent 可以根据其中的元素编号继续点击、输入和选择，它是自动化操作时更常用的信息。
screenshot将当前页面保存为 PNG 图片，适合检查布局、视觉结果或记录任务完成状态。
CLI 会把这些结果保存到本地文件中，Agent 再根据任务需要读取，而不是每一步都向上下文传入全部页面信息。
（四）保存登录状态
默认情况下，Cookie 和本地存储会在同一次浏览器会话的多条命令之间保留，但关闭浏览器后会丢失。需要跨重启保存状态时，可以使用：
--persistent 会把 Cookie、登录状态和本地存储写入磁盘。下次启动相同会话时可以继续使用，不必每次重新登录。持久化目录可能包含账号登录信息，不要提交到 Git，也不要把它分享给其他人。目录位置以终端实际输出为准。
（五）为 Agent 安装 Skill
在准备存放自动化项目的目录中打开终端。例如在 D 盘创建
project-playwright 文件夹，然后执行：注意参数是复数形式
--skills。安装完成后，重新打开 Claude Code、Codex 或其他编码 Agent，使其重新加载项目中的 Skill。不同 Agent 和 Playwright CLI 版本生成的目录可能不同，因此不要固定写成
.claude/.codex。应以安装命令在终端中输出的实际路径为准。三、实战
- 打开某平台的某个视频或者商品提取前200条热门评论。如果这是重复性的工作可以把执行流程、步骤、经验、踩过的坑总结成一套可复用的skill。
- 把自己的文章发布到各个平台，根据不同平台的发布规范和流程总结出一套可复用的skill。
- 给 web-app 项目搭建一套自动化测试脚本。
- 结合抖音skill和小红书skill执行自动化任务。
四、总结
Playwright CLI + Skill 的核心不是让 AI 替代所有浏览器操作，而是给编码 Agent 一套简洁、可重复执行的浏览器控制方式。与 Playwright MCP 相比，CLI 不需要持续加载大型工具定义和冗长的页面结构，因此通常能降低浏览器自动化对上下文的占用。不过，实际节省程度会受到页面复杂度、操作次数和 Agent 行为影响，不能统一概括为固定的四倍。
在流程还不稳定时，Agent 仍要负责探索页面、确定元素和处理异常；当步骤已经固定后，再把操作整理成脚本或 Skill，部分任务才可以在较少甚至没有 AI 参与的情况下重复运行。