AgentSkillsCN

playwright-cli

通过Playwright CLI进行浏览器自动化,用于导航页面、与元素互动、截屏以及通过Shell命令测试Web应用。当用户提到“playwright”、“浏览器自动化”、“截屏”、“浏览器测试”、“无头浏览器”、“Web测试”、“填写表单”、“e2e测试”或需要从命令行自动化浏览器工作流时,就使用此技能。这是预装的CLI工具——请勿通过npx或npm安装任何东西。先调用此技能,再使用playwright-cli的Bash命令。

SKILL.md
--- frontmatter
name: playwright-cli
description: >-
  Browser automation via Playwright CLI for navigating pages, interacting with
  elements, capturing screenshots, and testing web applications through shell
  commands. Use when user mentions "playwright", "browser automation",
  "take a screenshot", "browser testing", "headless browser", "web testing",
  "fill out a form", "e2e test", or needs to automate browser workflows
  from the command line. This is a pre-installed CLI tool — do NOT install
  anything via npx or npm. Invoke this skill first, then use playwright-cli
  bash commands.
allowed-tools: Bash(playwright-cli:*)

Playwright CLI

Automate browsers through shell commands via the Bash tool.

Core Workflow

Every interaction follows this pattern:

  1. Open a page: playwright-cli open <url>
  2. Snapshot to discover elements: playwright-cli snapshot
  3. Interact using refs from the snapshot: playwright-cli click <ref>
  4. Verify the result: playwright-cli screenshot or playwright-cli snapshot

Always run snapshot before interacting — element refs come exclusively from snapshot output and become stale after navigation.

Command Reference

Navigation

CommandDescription
open <url>Open URL in new page
goto <url>Navigate current page
go-back / go-forwardBrowser back/forward
reloadReload current page
closeClose the browser

Interaction

CommandDescription
click <ref>Click an element
dblclick <ref>Double-click an element
fill <ref> <text>Clear field, then type text
type <text>Type into focused element (appends)
check <ref> / uncheck <ref>Toggle checkbox
select <ref> <values>Select dropdown option(s)
hover <ref>Hover over element
drag <start> <end>Drag between elements
upload <ref> <paths>Upload file(s) to file input
eval "<js>"Evaluate JavaScript on page
eval "<js>" <ref>Evaluate JavaScript on element
dialog-accept [text]Accept dialog (optional prompt text)
dialog-dismissDismiss dialog
resize <w> <h>Resize browser window

Output

CommandDescription
screenshot [ref] [--filename=f]Capture PNG screenshot (page or element)
snapshot [--filename=f]Accessibility tree — structured, token-efficient
pdf [--filename=f]Generate PDF of the page

Important: --filename resolves relative to the working directory, NOT outputDir. When using --filename, always prepend the project's outputDir value (check .playwright/cli.config.json; defaults to .playwright-cli). Example: playwright-cli screenshot --filename=<outputDir>/my-screenshot.png

Tabs

CommandDescription
tab listList open tabs
tab create [url]Open new tab
tab select <index>Switch to tab
tab close [index]Close tab

Keyboard

bash
playwright-cli press Enter          # Enter, Tab, Escape, ArrowDown, etc.
playwright-cli keydown Shift         # Hold key down
playwright-cli keyup Shift           # Release key

Mouse

bash
playwright-cli mousemove 150 300     # Move to coordinates
playwright-cli mousedown [button]    # Press button (left/right)
playwright-cli mouseup [button]      # Release button
playwright-cli mousewheel 0 100      # Scroll (deltaX deltaY)

Sessions

  • Default session — all commands share one session automatically
  • Named sessionsplaywright-cli -s=<name> open <url> for parallel browsers
  • List sessionsplaywright-cli list
  • Close oneplaywright-cli -s=<name> close
  • Close allplaywright-cli close-all
  • Force killplaywright-cli kill-all
  • Persistent profileplaywright-cli open <url> --persistent
  • Custom profileplaywright-cli open <url> --profile=/path/to/dir
  • Delete dataplaywright-cli delete-data or playwright-cli -s=<name> delete-data
  • Environment variablePLAYWRIGHT_CLI_SESSION=my-project

Configuration

bash
playwright-cli open <url> --browser=chromium    # chromium (default), firefox, webkit, chrome, msedge
playwright-cli open <url> --headed              # Visible browser window
playwright-cli open <url> --config=config.json  # Custom config file
playwright-cli open <url> --extension           # Connect via browser extension

Create .playwright/cli.config.json in the project for persistent settings:

json
{ "browser": { "browserName": "chromium", "launchOptions": { "headless": true } }, "outputDir": ".playwright-cli", "timeouts": { "action": 5000, "navigation": 60000 } }

Other options: network.allowedOrigins, network.blockedOrigins, saveVideo. Environment variables use PLAYWRIGHT_MCP_ prefix (e.g., PLAYWRIGHT_MCP_BROWSER=firefox).

Common Pitfalls

  • Interacting without snapshot — refs are unknown until snapshot runs
  • Stale refs after navigation — re-run snapshot after goto, link clicks, or form submissions
  • fill vs typefill clears the field first; type appends to current content
  • Stuck sessions — run playwright-cli kill-all to force-close all browsers

Resources