Playwright CLI 配合 Claude Code 使用指南

一、安装指令

# 全局安装 Playwright CLI
npm install -g @playwright/cli@latest
# 安装浏览器
playwright-cli install-browser
# 安装 Claude Code 技能配置
playwright-cli install --skills

二、核心操作指令

基础页面操作

# 有头模式打开页面（可见浏览器窗口）
playwright-cli open https://xxx --headed
# 无头模式打开页面（后台运行）
playwright-cli open https://xxx
# 获取页面元素结构快照
playwright-cli snapshot
# 页面截图
playwright-cli screenshot

元素交互指令

# 点击元素（eXX为自动分配的元素编号）
playwright-cli click eXX
# 填充输入框
playwright-cli fill eXX "内容"
# 勾选/取消勾选
playwright-cli check eXX
playwright-cli uncheck eXX

其他常用指令

# 键盘输入
playwright-cli type eXX "文本"
# 鼠标悬停
playwright-cli hover eXX
# 页面后退/前进
playwright-cli go-back
playwright-cli go-forward
# 查看控制台日志
playwright-cli console

三、配合 Claude Code 说明

1. 执行playwright-cli install --skills后，Claude Code 自动识别指令规则
2. 用自然语言描述需求，AI 自主调用 CLI 完成浏览器操作
3. 页面快照、截图保存至本地文件，不占用 Token
4. 调试用有头模式，批量任务用无头模式