关于 playwright-cli
playwright-cli 是面向开发者和 Agent 的命令行浏览器自动化技能,支持页面交互,并提供快照、会话、存储、网络路由和调试操作。
主要功能
- 01浏览页面并与其交互
- 02通过引用或定位器选择元素
- 03管理标签页和浏览器会话
- 04保存快照、截图和 PDF
- 05检查网络与控制台输出
- 06控制存储并模拟请求
适用场景
- 01自动提交浏览器表单
- 02比较操作前后的页面快照
- 03通过控制台和网络数据调试浏览器
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ willbooster/ agent-skills --skill playwright-cli安装后在 Claude Code 中输入/playwright-cli确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/element-attributes.mdplaywright-tests.mdrequest-mocking.mdrunning-code.mdsession-management.mdstorage-state.mdtest-generation.mdtracing.mdvideo-recording.md详细介绍
使用 playwright-cli 进行浏览器自动化
快速入门
# open new browser
bunx @playwright/[email protected] open
# navigate to a page
bunx @playwright/[email protected] goto https://playwright.dev
# interact with the page using refs from the snapshot
bunx @playwright/[email protected] click e15
bunx @playwright/[email protected] type "page.click"
bunx @playwright/[email protected] press Enter
# take a screenshot (rarely used, as snapshot is more common)
bunx @playwright/[email protected] screenshot
# close the browser
bunx @playwright/[email protected] close
命令
核心
bunx @playwright/[email protected] open
# open and navigate right away
bunx @playwright/[email protected] open https://example.com/
bunx @playwright/[email protected] goto https://playwright.dev
bunx @playwright/[email protected] type "search query"
bunx @playwright/[email protected] click e3
bunx @playwright/[email protected] dblclick e7
# --submit presses Enter after filling the element
bunx @playwright/[email protected] fill e5 "[email protected]" --submit
bunx @playwright/[email protected] drag e2 e8
bunx @playwright/[email protected] hover e4
bunx @playwright/[email protected] select e9 "option-value"
bunx @playwright/[email protected] upload ./document.pdf
bunx @playwright/[email protected] check e12
bunx @playwright/[email protected] uncheck e12
bunx @playwright/[email protected] snapshot
bunx @playwright/[email protected] eval "document.title"
bunx @playwright/[email protected] eval "el => el.textContent" e5
# get element id, class, or any attribute not visible in the snapshot
bunx @playwright/[email protected] eval "el => el.id" e5
bunx @playwright/[email protected] eval "el => el.getAttribute('data-testid')" e5
bunx @playwright/[email protected] dialog-accept
bunx @playwright/[email protected] dialog-accept "confirmation text"
bunx @playwright/[email protected] dialog-dismiss
bunx @playwright/[email protected] resize 1920 1080
bunx @playwright/[email protected] close
导航
bunx @playwright/[email protected] go-back
bunx @playwright/[email protected] go-forward
bunx @playwright/[email protected] reload
键盘
bunx @playwright/[email protected] press Enter
bunx @playwright/[email protected] press ArrowDown
bunx @playwright/[email protected] keydown Shift
bunx @playwright/[email protected] keyup Shift
鼠标
bunx @playwright/[email protected] mousemove 150 300
bunx @playwright/[email protected] mousedown
bunx @playwright/[email protected] mousedown right
bunx @playwright/[email protected] mouseup
bunx @playwright/[email protected] mouseup right
bunx @playwright/[email protected] mousewheel 0 100
另存为
bunx @playwright/[email protected] screenshot
bunx @playwright/[email protected] screenshot e5
bunx @playwright/[email protected] screenshot --filename=page.png
bunx @playwright/[email protected] pdf --filename=page.pdf
标签页
bunx @playwright/[email protected] tab-list
bunx @playwright/[email protected] tab-new
bunx @playwright/[email protected] tab-new https://example.com/page
bunx @playwright/[email protected] tab-close
bunx @playwright/[email protected] tab-close 2
bunx @playwright/[email protected] tab-select 0
存储
bunx @playwright/[email protected] state-save
bunx @playwright/[email protected] state-save auth.json
bunx @playwright/[email protected] state-load auth.json
# Cookies
bunx @playwright/[email protected] cookie-list
bunx @playwright/[email protected] cookie-list --domain=example.com
bunx @playwright/[email protected] cookie-get session_id
bunx @playwright/[email protected] cookie-set session_id abc123
bunx @playwright/[email protected] cookie-set session_id abc123 --domain=example.com --httpOnly --secure
bunx @playwright/[email protected] cookie-delete session_id
bunx @playwright/[email protected] cookie-clear
# LocalStorage
bunx @playwright/[email protected] localstorage-list
bunx @playwright/[email protected] localstorage-get theme
bunx @playwright/[email protected] localstorage-set theme dark
bunx @playwright/[email protected] localstorage-delete theme
bunx @playwright/[email protected] localstorage-clear
# SessionStorage
bunx @playwright/[email protected] sessionstorage-list
bunx @playwright/[email protected] sessionstorage-get step
bunx @playwright/[email protected] sessionstorage-set step 3
bunx @playwright/[email protected] sessionstorage-delete step
bunx @playwright/[email protected] sessionstorage-clear
网络
bunx @playwright/[email protected] route "**/*.jpg" --status=404
bunx @playwright/[email protected] route "https://api.example.com/**" --body='{"mock": true}'
bunx @playwright/[email protected] route-list
bunx @playwright/[email protected] unroute "**/*.jpg"
bunx @playwright/[email protected] unroute
开发者工具
bunx @playwright/[email protected] console
bunx @playwright/[email protected] console warning
bunx @playwright/[email protected] network
bunx @playwright/[email protected] run-code "async page => await page.context().grantPermissions(['geolocation'])"
bunx @playwright/[email protected] run-code --filename=script.js
bunx @playwright/[email protected] tracing-start
bunx @playwright/[email protected] tracing-stop
bunx @playwright/[email protected] video-start video.webm
bunx @playwright/[email protected] video-chapter "Chapter Title" --description="Details" --duration=2000
bunx @playwright/[email protected] video-stop
原始输出
全局选项 --raw 会从输出中移除页面状态、生成的代码和快照部分,仅返回结果值。可用它将命令输出传递给其他工具。没有输出的命令不会返回任何内容。
bunx @playwright/[email protected] --raw eval "JSON.stringify(performance.timing)" | jq '.loadEventEnd - .navigationStart'
bunx @playwright/[email protected] --raw eval "JSON.stringify([...document.querySelectorAll('a')].map(a => a.href))" > links.json
bunx @playwright/[email protected] --raw snapshot > before.yml
bunx @playwright/[email protected] click e5
bunx @playwright/[email protected] --raw snapshot > after.yml
diff before.yml after.yml
TOKEN=$(bunx @playwright/[email protected] --raw cookie-get session_id)
bunx @playwright/[email protected] --raw localstorage-get theme
打开参数
# Use specific browser when creating session
bunx @playwright/[email protected] open --browser=chrome
bunx @playwright/[email protected] open --browser=firefox
bunx @playwright/[email protected] open --browser=webkit
bunx @playwright/[email protected] open --browser=msedge
# Use persistent profile (by default profile is in-memory)
bunx @playwright/[email protected] open --persistent
# Use persistent profile with custom directory
bunx @playwright/[email protected] open --profile=/path/to/profile
# Connect to browser via extension
bunx @playwright/[email protected] attach --extension
# Connect to a running Chrome or Edge by channel name
bunx @playwright/[email protected] attach --cdp=chrome
bunx @playwright/[email protected] attach --cdp=msedge
# Connect to a running browser via CDP endpoint
bunx @playwright/[email protected] attach --cdp=http://localhost:9222
# Start with config file
bunx @playwright/[email protected] open --config=my-config.json
# Close the browser
bunx @playwright/[email protected] close
# Delete user data for the default session
bunx @playwright/[email protected] delete-data
快照
每条命令执行后,playwright-cli 都会提供当前浏览器状态的快照。
> bunx @playwright/[email protected] goto https://example.com
### Page
- Page URL: https://example.com/
- Page Title: Example Domain
### Snapshot
[Snapshot](.playwright-cli/page-2026-02-14T19-22-42-679Z.yml)
你也可以使用 playwright-cli snapshot 命令按需获取快照。以下所有选项都可以根据需要组合使用。
# default - save to a file with timestamp-based name
bunx @playwright/[email protected] snapshot
# save to file, use when snapshot is a part of the workflow result
bunx @playwright/[email protected] snapshot --filename=after-click.yaml
# snapshot an element instead of the whole page
bunx @playwright/[email protected] snapshot "#main"
# limit snapshot depth for efficiency, take a partial snapshot afterwards
bunx @playwright/[email protected] snapshot --depth=4
bunx @playwright/[email protected] snapshot e34
定位元素
默认情况下,使用快照中的引用与页面元素交互。
# get snapshot with refs
bunx @playwright/[email protected] snapshot
# interact using a ref
bunx @playwright/[email protected] click e15
你也可以使用 CSS 选择器或 Playwright 定位器。
# css selector
bunx @playwright/[email protected] click "#main > button.submit"
# role locator
bunx @playwright/[email protected] click "getByRole('button', { name: 'Submit' })"
# test id
bunx @playwright/[email protected] click "getByTestId('submit-button')"
浏览器会话
# create new browser session named "mysession" with persistent profile
bunx @playwright/[email protected] -s=mysession open example.com --persistent
# same with manually specified profile directory (use when requested explicitly)
bunx @playwright/[email protected] -s=mysession open example.com --profile=/path/to/profile
bunx @playwright/[email protected] -s=mysession click e6
bunx @playwright/[email protected] -s=mysession close # stop a named browser
bunx @playwright/[email protected] -s=mysession delete-data # delete user data for persistent session
bunx @playwright/[email protected] list
# Close all browsers
bunx @playwright/[email protected] close-all
# Forcefully kill all browser processes
bunx @playwright/[email protected] kill-all
示例:提交表单
bunx @playwright/[email protected] open https://example.com/form
bunx @playwright/[email protected] snapshot
bunx @playwright/[email protected] fill e1 "[email protected]"
bunx @playwright/[email protected] fill e2 "password123"
bunx @playwright/[email protected] click e3
bunx @playwright/[email protected] snapshot
bunx @playwright/[email protected] close
示例:多标签页工作流
bunx @playwright/[email protected] open https://example.com
bunx @playwright/[email protected] tab-new https://example.com/other
bunx @playwright/[email protected] tab-list
bunx @playwright/[email protected] tab-select 0
bunx @playwright/[email protected] snapshot
bunx @playwright/[email protected] close
示例:使用开发者工具进行调试
bunx @playwright/[email protected] open https://example.com
bunx @playwright/[email protected] click e4
bunx @playwright/[email protected] fill e7 "test"
bunx @playwright/[email protected] console
bunx @playwright/[email protected] network
bunx @playwright/[email protected] close
bunx @playwright/[email protected] open https://example.com
bunx @playwright/[email protected] tracing-start
bunx @playwright/[email protected] click e4
bunx @playwright/[email protected] fill e7 "test"
bunx @playwright/[email protected] tracing-stop
bunx @playwright/[email protected] close
特定任务
- 运行和调试 Playwright 测试 references/playwright-tests.md
- 请求模拟 references/request-mocking.md
- 运行 Playwright 代码 references/running-code.md
- 浏览器会话管理 references/session-management.md
- 存储状态(Cookie、localStorage) references/storage-state.md
- 测试生成 references/test-generation.md
- 追踪 references/tracing.md
- 视频录制 references/video-recording.md
- 检查元素属性 references/element-attributes.md
评论
支持 Markdown