选项

自动化浏览器交互、测试网页并使用 Playwright 测试。

...展开全部
106
更新时间 2026-06-29

关于playwright-cli

“playwright-cli ”技能旨在以高效且可脚本化的方式实现浏览器交互自动化、网页测试,并与 Playwright 测试进行集成。它允许开发人员和测试人员直接通过命令行界面 (CLI) 模拟用户操作,例如点击、输入、导航以及与页面元素交互。 这省去了复杂的代码配置,不仅能加快测试执行速度,还能更好地与持续测试工作流集成。通过提供一套强大的命令,该技能在确保对浏览环境的高精度控制的同时,简化了浏览器自动化任务。

常见问题

“playwright-cli ” 能做什么?

借助“playwright-cli ”,您可以自动化浏览器交互、浏览页面、与页面元素交互、截屏、操作存储空间等。它支持多种用于鼠标、键盘操作和网络路由的命令,以及其他功能。

使用“playwright-cli ”有哪些先决条件?

'playwright-cli' 需要 Bash 作为执行命令的环境。此外,某些操作还需使用 'npx' 和 'npm' 等工具,因此必须在您的机器上安装 Node.js 及必要的包。

“playwright-cli ”能否管理多个浏览器标签页?

是的,'playwright-cli' 包含用于管理标签页的命令,例如打开新标签页、关闭标签页、在标签页之间切换以及列出所有活动标签页。您可以通过简单的 CLI 命令轻松并行控制多个浏览器标签页。

'playwright-cli' 如何处理 Cookie 和本地存储?

'playwright-cli' 允许您通过列出、设置、获取和删除数据的命令来管理 Cookie、localStorage 和 sessionStorage。这使得能够测试涉及带状态浏览会话的场景。

'playwright-cli' 有哪些局限性?

'playwright-cli' 主要设计用于自动化测试和浏览器交互。它可能不支持所有 Playwright 功能,也不一定适合更复杂、程序化程度更高的工作流。此外,该工具专为命令行使用而设计,根据您的环境不同,可能需要进行额外配置。

在 GitHub 上查看

Browser Automation with playwright-cli

Quick start

# open new browserplaywright-cli open# navigate to a pageplaywright-cli goto https://playwright.dev# interact with the page using refs from the snapshotplaywright-cli click e15playwright-cli type "page.click"playwright-cli press Enter# take a screenshot (rarely used, as snapshot is more common)playwright-cli screenshot# close the browserplaywright-cli close

Commands

Core

playwright-cli open# open and navigate right awayplaywright-cli open https://example.com/playwright-cli goto https://playwright.devplaywright-cli type "search query"playwright-cli click e3playwright-cli dblclick e7# --submit presses Enter after filling the elementplaywright-cli fill e5 "[email protected]"  --submitplaywright-cli drag e2 e8# drop files or data onto an element (from outside the page)playwright-cli drop e4 --path=./image.pngplaywright-cli drop e4 --data="text/plain=hello world"playwright-cli hover e4playwright-cli select e9 "option-value"playwright-cli upload ./document.pdfplaywright-cli check e12playwright-cli uncheck e12playwright-cli snapshotplaywright-cli eval "document.title"playwright-cli eval "el => el.textContent" e5# get element id, class, or any attribute not visible in the snapshotplaywright-cli eval "el => el.id" e5playwright-cli eval "el => el.getAttribute('data-testid')" e5playwright-cli dialog-acceptplaywright-cli dialog-accept "confirmation text"playwright-cli dialog-dismissplaywright-cli resize 1920 1080playwright-cli close

Navigation

playwright-cli go-backplaywright-cli go-forwardplaywright-cli reload

Keyboard

playwright-cli press Enterplaywright-cli press ArrowDownplaywright-cli keydown Shiftplaywright-cli keyup Shift

Mouse

playwright-cli mousemove 150 300playwright-cli mousedownplaywright-cli mousedown rightplaywright-cli mouseupplaywright-cli mouseup rightplaywright-cli mousewheel 0 100

Save as

playwright-cli screenshotplaywright-cli screenshot e5playwright-cli screenshot --filename=page.pngplaywright-cli pdf --filename=page.pdf

Tabs

playwright-cli tab-listplaywright-cli tab-newplaywright-cli tab-new https://example.com/pageplaywright-cli tab-closeplaywright-cli tab-close 2playwright-cli tab-select 0

Storage

playwright-cli state-saveplaywright-cli state-save auth.jsonplaywright-cli state-load auth.json# Cookiesplaywright-cli cookie-listplaywright-cli cookie-list --domain=example.complaywright-cli cookie-get session_idplaywright-cli cookie-set session_id abc123playwright-cli cookie-set session_id abc123 --domain=example.com --httpOnly --secureplaywright-cli cookie-delete session_idplaywright-cli cookie-clear# LocalStorageplaywright-cli localstorage-listplaywright-cli localstorage-get themeplaywright-cli localstorage-set theme darkplaywright-cli localstorage-delete themeplaywright-cli localstorage-clear# SessionStorageplaywright-cli sessionstorage-listplaywright-cli sessionstorage-get stepplaywright-cli sessionstorage-set step 3playwright-cli sessionstorage-delete stepplaywright-cli sessionstorage-clear

Network

playwright-cli route "**/*.jpg" --status=404playwright-cli route "https://api.example.com/**" --body='{"mock": true}'playwright-cli route-listplaywright-cli unroute "**/*.jpg"playwright-cli unroute

DevTools

playwright-cli consoleplaywright-cli console warningplaywright-cli requestsplaywright-cli request 5playwright-cli run-code "async page => await page.context().grantPermissions(['geolocation'])"playwright-cli run-code --filename=script.jsplaywright-cli tracing-startplaywright-cli tracing-stopplaywright-cli video-start video.webmplaywright-cli video-chapter "Chapter Title" --description="Details" --duration=2000playwright-cli video-stop# annotate each subsequent action (click, type, ...) with a callout naming the action and highlighting the targetplaywright-cli video-show-actions --duration=600 --position=top-rightplaywright-cli video-hide-actions# launch the dashboard for UI review / design feedback — user annotates the page, you receive the annotated screenshot, snapshot, and notesplaywright-cli show --annotate# generate a Playwright locator for an element from its ref or selectorplaywright-cli generate-locator e5 --raw# show a persistent highlight overlay for an element, optionally with a custom styleplaywright-cli highlight e5playwright-cli highlight e5 --style="outline: 3px dashed red"# hide a single element highlight, or all page highlights when no target is givenplaywright-cli highlight e5 --hideplaywright-cli highlight --hide

Raw output

The global --raw option strips page status, generated code, and snapshot sections from the output, returning only the result value. Use it to pipe command output into other tools. Commands that don't produce output return nothing.

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.jsonplaywright-cli --raw snapshot > before.ymlplaywright-cli click e5playwright-cli --raw snapshot > after.ymldiff before.yml after.ymlTOKEN=$(playwright-cli --raw cookie-get session_id)playwright-cli --raw localstorage-get theme

For structured output wrapping every reply as JSON, pass --json

playwright-cli list --json

Open parameters

# Use specific browser when creating sessionplaywright-cli open --browser=chromeplaywright-cli open --browser=firefoxplaywright-cli open --browser=webkitplaywright-cli open --browser=msedge# Use persistent profile (by default profile is in-memory)playwright-cli open --persistent# Use persistent profile with custom directoryplaywright-cli open --profile=/path/to/profile# Connect to browser via Playwright Extensionplaywright-cli attach --extension=chrome# Connect to a running Chrome or Edge by channel nameplaywright-cli attach --cdp=chromeplaywright-cli attach --cdp=msedge# Connect to a running browser via CDP endpointplaywright-cli attach --cdp=http://localhost:9222# Start with config fileplaywright-cli open --config=my-config.json# Close the browserplaywright-cli close# Detach from an attached browser (leaves the external browser running)playwright-cli -s=msedge detach# Delete user data for the default sessionplaywright-cli delete-data

URLs with & on Windows

On Windows, cmd.exe and PowerShell treat & as a command separator, so URLs with multiple query parameters get truncated before playwright-cli runs. Escape & with ^& in cmd.exe, or use --% in PowerShell:

playwright-cli goto "https://example.com/?a=1^&b=2"
playwright-cli --% goto "https://example.com/?a=1&b=2"

Snapshots

After each command, playwright-cli provides a snapshot of the current browser state.

> playwright-cli 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)

You can also take a snapshot on demand using playwright-cli snapshot command. All the options below can be combined as needed.

# default - save to a file with timestamp-based nameplaywright-cli snapshot# save to file, use when snapshot is a part of the workflow resultplaywright-cli snapshot --filename=after-click.yaml# snapshot an element instead of the whole pageplaywright-cli snapshot "#main"# limit snapshot depth for efficiency, take a partial snapshot afterwardsplaywright-cli snapshot --depth=4playwright-cli snapshot e34# include each element's bounding box as [box=x,y,width,height]playwright-cli snapshot --boxes

Targeting elements

By default, use refs from the snapshot to interact with page elements.

# get snapshot with refsplaywright-cli snapshot# interact using a refplaywright-cli click e15

You can also use css selectors or Playwright locators.

# css selectorplaywright-cli click "#main > button.submit"# role locatorplaywright-cli click "getByRole('button', { name: 'Submit' })"# test idplaywright-cli click "getByTestId('submit-button')"

Browser Sessions

# create new browser session named "mysession" with persistent profileplaywright-cli -s=mysession open example.com --persistent# same with manually specified profile directory (use when requested explicitly)playwright-cli -s=mysession open example.com --profile=/path/to/profileplaywright-cli -s=mysession click e6playwright-cli -s=mysession close  # stop a named browserplaywright-cli -s=mysession delete-data  # delete user data for persistent sessionplaywright-cli list# Close all browsersplaywright-cli close-all# Forcefully kill all browser processesplaywright-cli kill-all

Installation

If global playwright-cli command is not available, try a local version via npx playwright-cli:

npx --no-install playwright-cli --version

When local version is available, use npx playwright-cli in all commands. Otherwise, install playwright-cli as a global command:

npm install -g @playwright/cli@latest

Example: Form submission

playwright-cli open https://example.com/formplaywright-cli snapshotplaywright-cli fill e1 "[email protected]"playwright-cli fill e2 "password123"playwright-cli click e3playwright-cli snapshotplaywright-cli close

Example: Multi-tab workflow

playwright-cli open https://example.complaywright-cli tab-new https://example.com/otherplaywright-cli tab-listplaywright-cli tab-select 0playwright-cli snapshotplaywright-cli close

Example: Debugging with DevTools

playwright-cli open https://example.complaywright-cli click e4playwright-cli fill e7 "test"playwright-cli consoleplaywright-cli requestsplaywright-cli close
playwright-cli open https://example.complaywright-cli tracing-startplaywright-cli click e4playwright-cli fill e7 "test"playwright-cli tracing-stopplaywright-cli close

Example: Interactive session

Ask the user for UI review or design feedback. The user draws boxes on the live page and types comments; you receive the annotated screenshot, the snapshot of the marked region, and the user's notes. Use this whenever the user asks for "UI review", "design feedback", or to "ask the user what they think / want / mean":

playwright-cli open https://example.complaywright-cli show --annotate

Specific tasks

  • Running and Debugging Playwright tests references/playwright-tests.md
  • Request mocking references/request-mocking.md
  • Running Playwright code references/running-code.md
  • Browser session management references/session-management.md
  • Spec-driven testing (plan / generate / heal) references/spec-driven-testing.md
  • Storage state (cookies, localStorage) references/storage-state.md
  • Test generation references/test-generation.md
  • Tracing references/tracing.md
  • Video recording references/video-recording.md
  • Inspecting element attributes references/element-attributes.md

安装 playwright-cli

下载技能文件并将其解压到 .claude/skills/ 目录中。

下载ZIP

克隆仓库并复制技能文件到您的项目中。

git clone https://github.com/microsoft/playwright-cli/blob/main/skills/playwright-cli/SKILL.md # Copy SKILL.md to your .claude/skills/ directory

复制 复制
快速设置: 将技能文件夹复制到 .claude/skills/ 目录下,Claude 会自动检测并使用该技能

相关技能

frontend-testing-best-practices
更新时间 2026-07-07
Playwright Browser Automation
更新时间 2026-06-29
playwright-generate-test
更新时间 2026-06-29
playwright-expert
更新时间 2026-06-29
OR