自动化浏览器交互、测试网页以及处理Playwright测试用例
npx skills add https://github.com/linxuan-sys/opencode-skills-chinese --skill playwright-cli이 명령을 Claude Code에 복사하여 붙여넣어 스킬을 설치하세요
| name | playwright-cli |
| description | 自动化浏览器交互、测试网页以及处理Playwright测试用例 |
| allowed-tools | Bash(playwright-cli:*) Bash(npx:*) Bash(npm:*) |
🔴 ⚠️ 【强制规则，必须遵守】⚠️ 🔴 🔴 所有调用
playwright-cli open的命令，必须默认加上--headed参数！ 🔴 仅用户明确要求使用无头模式时，才可去掉该参数！ 🔴 禁止后台静默运行浏览器，必须显示窗口！
# 打开新浏览器
playwright-cli open
# 跳转到指定页面
playwright-cli goto https://playwright.dev
# 使用快照中的元素引用与页面交互
playwright-cli click e15
playwright-cli type "page.click"
playwright-cli press Enter
# 截图（较少使用，快照功能更常用）
playwright-cli screenshot
# 关闭浏览器
playwright-cli close
playwright-cli open
# 打开浏览器并直接跳转到指定url
playwright-cli open https://example.com/
playwright-cli goto https://playwright.dev
playwright-cli type "搜索关键词"
playwright-cli click e3
playwright-cli dblclick e7
# --submit参数会在填充元素后自动按回车提交
playwright-cli fill e5 "user@example.com" --submit
playwright-cli drag e2 e8
playwright-cli hover e4
playwright-cli select e9 "选项值"
playwright-cli upload ./document.pdf
playwright-cli check e12
playwright-cli uncheck e12
playwright-cli snapshot
playwright-cli eval "document.title"
playwright-cli eval "el => el.textContent" e5
# 获取快照中不显示的元素id、class或其他属性
playwright-cli eval "el => el.id" e5
playwright-cli eval "el => el.getAttribute('data-testid')" e5
playwright-cli dialog-accept
playwright-cli dialog-accept "确认文本"
playwright-cli dialog-dismiss
playwright-cli resize 1920 1080
playwright-cli close
playwright-cli go-back
playwright-cli go-forward
playwright-cli reload
playwright-cli press Enter
playwright-cli press ArrowDown
playwright-cli keydown Shift
playwright-cli keyup Shift
playwright-cli mousemove 150 300
playwright-cli mousedown
playwright-cli mousedown right
playwright-cli mouseup
playwright-cli mouseup right
playwright-cli mousewheel 0 100
playwright-cli screenshot
playwright-cli screenshot e5
playwright-cli screenshot --filename=page.png
playwright-cli pdf --filename=page.pdf
playwright-cli tab-list
playwright-cli tab-new
playwright-cli tab-new https://example.com/page
playwright-cli tab-close
playwright-cli tab-close 2
playwright-cli tab-select 0
playwright-cli state-save
playwright-cli state-save auth.json
playwright-cli state-load auth.json
# Cookie操作
playwright-cli cookie-list
playwright-cli cookie-list --domain=example.com
playwright-cli cookie-get session_id
playwright-cli cookie-set session_id abc123
playwright-cli cookie-set session_id abc123 --domain=example.com --httpOnly --secure
playwright-cli cookie-delete session_id
playwright-cli cookie-clear
# LocalStorage操作
playwright-cli localstorage-list
playwright-cli localstorage-get theme
playwright-cli localstorage-set theme dark
playwright-cli localstorage-delete theme
playwright-cli localstorage-clear
# SessionStorage操作
playwright-cli sessionstorage-list
playwright-cli sessionstorage-get step
playwright-cli sessionstorage-set step 3
playwright-cli sessionstorage-delete step
playwright-cli sessionstorage-clear
playwright-cli route "**/*.jpg" --status=404
playwright-cli route "https://api.example.com/**" --body='{"mock": true}'
playwright-cli route-list
playwright-cli unroute "**/*.jpg"
playwright-cli unroute
playwright-cli console
playwright-cli console warning
playwright-cli network
playwright-cli run-code "async page => await page.context().grantPermissions(['geolocation'])"
playwright-cli run-code --filename=script.js
playwright-cli tracing-start
playwright-cli tracing-stop
playwright-cli video-start video.webm
playwright-cli video-chapter "章节标题" --description="详细说明" --duration=2000
playwright-cli video-stop
全局参数--raw会去掉页面状态、生成代码和快照部分的输出，仅返回结果值，适合将命令输出管道到其他工具使用。没有输出的命令执行后不会返回任何内容。
playwright-cli --raw eval "JSON.stringify(performance.timing)" | jq '.loadEventEnd - .navigationStart'
playwright-cli --raw eval "JSON.stringify([...document.querySelectorAll('a')].map(a => a.href))" > links.json
playwright-cli --raw snapshot > before.yml
playwright-cli click e5
playwright-cli --raw snapshot > after.yml
diff before.yml after.yml
TOKEN=$(playwright-cli --raw cookie-get session_id)
playwright-cli --raw localstorage-get theme
# 启动时指定使用的浏览器，可选值：chrome, firefox, webkit, msedge
playwright-cli open --browser=chrome
playwright-cli open --browser=firefox
playwright-cli open --browser=webkit
playwright-cli open --browser=msedge
# 使用持久化浏览器配置文件（默认使用内存中的临时配置，关闭后清空所有数据）
playwright-cli open --persistent
# 自定义持久化配置文件的存储目录
playwright-cli open --profile=/path/to/profile
# 通过扩展连接到浏览器
playwright-cli attach --extension
# 通过通道名连接到正在运行的Chrome或Edge
playwright-cli attach --cdp=chrome
playwright-cli attach --cdp=msedge
# 通过CDP端点连接到正在运行的浏览器
playwright-cli attach --cdp=http://localhost:9222
# 从指定配置文件启动
playwright-cli open --config=my-config.json
# 关闭浏览器
playwright-cli close
# 删除默认会话的用户数据
playwright-cli delete-data
每次命令执行后，playwright-cli都会返回当前浏览器状态的快照。
> playwright-cli goto https://example.com
### 页面信息
- 页面URL: https://example.com/
- 页面标题: Example Domain
### 快照
[Snapshot](.playwright-cli/page-2026-02-14T19-22-42-679Z.yml)
你也可以按需手动执行snapshot命令获取快照，所有参数可以组合使用：
# 默认保存到按时间戳命名的文件
playwright-cli snapshot
# 保存到指定文件，适合工作流结果中使用快照
playwright-cli snapshot --filename=after-click.yaml
# 仅快照指定元素而非整个页面
playwright-cli snapshot "#main"
# 限制快照的深度提升效率，之后可以对指定元素单独快照
playwright-cli snapshot --depth=4
playwright-cli snapshot e34
默认使用快照中的元素引用（比如e15这种形式）来和页面元素交互。
# 获取带元素引用的快照
playwright-cli snapshot
# 使用元素引用进行交互
playwright-cli click e15
你也可以使用css选择器或者Playwright内置选择器：
# css选择器
playwright-cli click "#main > button.submit"
# 角色选择器
playwright-cli click "getByRole('button', { name: 'Submit' })"
# 测试ID选择器
playwright-cli click "getByTestId('submit-button')"
# 创建名为mysession的新浏览器会话，使用持久化配置
playwright-cli -s=mysession open example.com --persistent
# 手动指定配置文件目录（需要时使用）
playwright-cli -s=mysession open example.com --profile=/path/to/profile
playwright-cli -s=mysession click e6
playwright-cli -s=mysession close # 停止指定名称的浏览器会话
playwright-cli -s=mysession delete-data # 删除持久化会话的用户数据
playwright-cli list
# 关闭所有浏览器
playwright-cli close-all
# 强制终止所有浏览器进程
playwright-cli kill-all
如果全局playwright-cli命令不可用，可以尝试通过npx使用本地版本：
npx --no-install playwright-cli --version
如果本地版本可用，所有命令都可以用npx playwright-cli代替。否则可以全局安装playwright-cli：
npm install -g @playwright/cli@latest
playwright-cli open https://example.com/form
playwright-cli snapshot
playwright-cli fill e1 "user@example.com"
playwright-cli fill e2 "password123"
playwright-cli click e3
playwright-cli snapshot
playwright-cli close
playwright-cli open https://example.com
playwright-cli tab-new https://example.com/other
playwright-cli tab-list
playwright-cli tab-select 0
playwright-cli snapshot
playwright-cli close
playwright-cli open https://example.com
playwright-cli click e4
playwright-cli fill e7 "test"
playwright-cli console
playwright-cli network
playwright-cli close
playwright-cli open https://example.com
playwright-cli tracing-start
playwright-cli click e4
playwright-cli fill e7 "test"
playwright-cli tracing-stop
playwright-cli close
任何时候只要涉及.pptx文件——无论是作为输入、输出还是两者兼有——就使用此技能。这包括：创建幻灯片、推介文件或演示文稿；读取、解析或提取任何.pptx文件中的文本（即使提取的内容将用于其他地方，比如邮件或摘要）；编辑、修改或更新现有演示文稿；合并或拆分幻灯片文件；处理模板、布局、演讲者备注或注释。只要用户提到"deck"、"slides"、"presentation"或引用.pptx文件名，无论他们后续打算如何处理内容，都要触发此技能。如果需要打开、创建或处理.pptx文件，使用此技能。
使用p5.js创建带有种子随机和交互式参数探索的算法艺术。当用户请求使用代码创建艺术、生成艺术、算法艺术、流场或粒子系统时使用此技能。创建原创算法艺术，而不是复制现有艺术家的作品，以避免侵犯版权。
引导用户完成结构化的文档协作工作流程。当用户想要编写文档、提案、技术规范、决策文档或类似结构化内容时使用。此工作流程帮助用户高效地传递上下文、通过迭代优化内容，并验证文档对读者是否有效。当用户提到编写文档、创建提案、起草规范或类似文档任务时触发。
当用户需要创建、读取、编辑或操作Word文档（.docx文件）时使用本技能。触发场景包括：任何提及'Word doc'、'word document'、'.docx'的内容，或生成带目录、标题、页码、信头格式的专业文档的需求。也适用于从.docx文件提取或重组内容、在文档中插入或替换图片、在Word文件中执行查找替换、处理修订或评论、或将内容转换为精美Word文档的场景。如果用户要求生成Word或.docx格式的'报告'、'备忘录'、'信件'、'模板'或类似交付物，使用本技能。请勿用于PDF、电子表格、Google Docs或与文档生成无关的通用编码任务。
当用户想要对PDF文件进行任何操作时使用此技能。这包括读取或从PDF中提取文本/表格、将多个PDF合并为一个、拆分PDF、旋转页面、添加水印、创建新PDF、填写PDF表单、加密/解密PDF、提取图片，以及对扫描版PDF进行OCR使其可搜索。如果用户提到.pdf文件或要求生成一个，使用此技能。
创建新技能、修改和改进现有技能，并衡量技能性能。当用户想要从头创建技能、编辑或优化现有技能、运行eval来测试技能、通过方差分析对技能性能进行基准测试，或优化技能描述以提高触发准确率时使用。