The Playwright CLI skill provides browser automation capabilities for web testing, form filling, screenshots, and data extraction. Automate browser interactions with a simple command-line interface.
Overview This skill covers:
Core workflow - Navigate, interact, and snapshot pagesForm automation - Fill inputs, click buttons, submit formsTesting - Verify functionality and capture statesData extraction - Extract information from web pagesScreenshots & PDFs - Capture page content
Quick Start playwright-cli install --skills playwright-cli install-browser
Core Commands Navigation playwright-cli open https://example.com
Opens the specified URL in the browser. playwright-cli go-back playwright-cli go-forward playwright-cli reload
Navigate browser history and reload pages. playwright-cli tab-list playwright-cli tab-new https://example.com playwright-cli tab-select 0 playwright-cli tab-close
Manage multiple browser tabs. Interaction Click & Type
Forms
Mouse & Keyboard
# Click element by ref playwright-cli click e3 # Double click playwright-cli dblclick e7 # Type text playwright-cli type "search query" # Fill input field playwright-cli fill e5 "[email protected] "
# Check/uncheck checkbox playwright-cli check e12 playwright-cli uncheck e12 # Select dropdown option playwright-cli select e9 "option-value" # Upload file playwright-cli upload ./document.pdf
# Mouse actions playwright-cli hover e4 playwright-cli drag e2 e8 playwright-cli mousemove 150 300 # Keyboard actions playwright-cli press Enter playwright-cli press ArrowDown playwright-cli keydown Shift playwright-cli keyup Shift
Snapshot
JavaScript Evaluation
Run Playwright Code
# Snapshot current page playwright-cli snapshot # Save snapshot to file playwright-cli snapshot --filename=after-click.yaml
Capture Content Screenshots
PDFs
Video Recording
# Full page screenshot playwright-cli screenshot # Specific element playwright-cli screenshot e5 # Save to file playwright-cli screenshot --filename=page.png
playwright-cli pdf --filename=page.pdf
# Start recording playwright-cli video-start # Stop and save playwright-cli video-stop video.webm
Navigate to Form
playwright-cli open https://example.com/form playwright-cli snapshot
Fill Form Fields
# From snapshot, find element refs playwright-cli fill e1 "[email protected] " playwright-cli fill e2 "password123" playwright-cli check e3 # Accept terms
Submit & Verify
playwright-cli click e4 # Submit button playwright-cli snapshot playwright-cli screenshot --filename=after-submit.png
Example: Multi-Tab Workflow # Open first page playwright-cli open https://example.com # Open new tab playwright-cli tab-new https://example.com/other # List tabs playwright-cli tab-list # Switch back to first tab playwright-cli tab-select 0 # Snapshot playwright-cli snapshot # Close current tab playwright-cli tab-close
Storage Management Cookies playwright-cli cookie-list playwright-cli cookie-list --domain=example.com playwright-cli cookie-get session_id
Local & Session Storage LocalStorage
SessionStorage
playwright-cli localstorage-list playwright-cli localstorage-get theme playwright-cli localstorage-set theme dark playwright-cli localstorage-delete theme playwright-cli localstorage-clear
playwright-cli sessionstorage-list playwright-cli sessionstorage-get step playwright-cli sessionstorage-set step 3 playwright-cli sessionstorage-delete step playwright-cli sessionstorage-clear
State Persistence # Save cookies, localStorage, sessionStorage playwright-cli state-save playwright-cli state-save auth.json
Network Mocking Block Resources
Manage Routes
# Block images playwright-cli route "**/*.jpg" --status=404 # Mock API response playwright-cli route "https://api.example.com/**" --body= '{"mock": true}'
Console Logs
Network Activity
Tracing
# Show all console messages playwright-cli console # Show only warnings playwright-cli console warning
# Show network requests playwright-cli network
# Start tracing playwright-cli tracing-start # Perform actions... playwright-cli click e5 playwright-cli fill e7 "test" # Stop and save trace playwright-cli tracing-stop
Browser Configuration Browser Selection
Session Configuration
Named Sessions
# Open with specific browser playwright-cli open --browser=chrome https://example.com playwright-cli open --browser=firefox https://example.com playwright-cli open --browser=webkit https://example.com playwright-cli open --browser=msedge https://example.com
Dialogs # Accept dialog playwright-cli dialog-accept # Accept with text playwright-cli dialog-accept "confirmation text" # Dismiss dialog playwright-cli dialog-dismiss
When to Use This Skill Load this skill when:
Testing web applications
Filling forms automatically
Taking screenshots for documentation
Extracting data from web pages
Debugging browser interactions
Automating repetitive web tasks
Best Practices
Snapshot After Significant Changes
Always snapshot after navigation or major interactions to get updated element references.
Use Named Sessions for Isolation
Use named sessions to run multiple browser instances simultaneously without conflicts.
Save State for Authentication
Use state-save after logging in to reuse authentication across sessions.
Enable Tracing for Debugging
Start tracing before reproducing issues to capture detailed execution traces.
Skill Structure .github/skills/playwright-cli/ ├── SKILL.md # Quick reference └── references/ ├── request-mocking.md # Network interception ├── running-code.md # Execute Playwright code ├── session-management.md # Multi-session patterns ├── storage-state.md # Cookies & localStorage ├── test-generation.md # Generate tests ├── tracing.md # Debug traces └── video-recording.md # Record sessions
References Use playwright-cli snapshot frequently to get updated element references. Element refs (like e5) change after page updates.