Agent Skills: Browser Automation with playwright-cli

Interactive browser automation using playwright-cli bash commands. Use when user asks to "open a page", "take a screenshot", "check the layout", "verify the UI", "inspect element", "fill out a form", "click a button", "mock API responses", "record a trace", or "check console logs". Also use for debugging design issues, verifying responsive layouts, testing form interactions, inspecting cookies or localStorage, checking network requests, or tracing page performance. Do NOT use for writing Playwright test files (.spec.ts or .test.ts) or running test suites (npx playwright test).

UncategorizedID: jiyeol-lee/dotfiles/playwright-cli

Install this agent skill to your local

pnpm dlx add-skill https://github.com/jiyeol-lee/dotfiles/tree/HEAD/.opencode/skills/playwright-cli

Skill Files

Browse the full folder contents for playwright-cli.

Download Skill

Loading file tree…

.opencode/skills/playwright-cli/SKILL.md

Skill Metadata

Name
playwright-cli
Description
Interactive browser automation using playwright-cli bash commands. Use when user asks to "open a page", "take a screenshot", "check the layout", "verify the UI", "inspect element", "fill out a form", "click a button", "mock API responses", "record a trace", or "check console logs". Also use for debugging design issues, verifying responsive layouts, testing form interactions, inspecting cookies or localStorage, checking network requests, or tracing page performance. Do NOT use for writing Playwright test files (.spec.ts or .test.ts) or running test suites (npx playwright test).

Browser Automation with playwright-cli

Quick start

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

Installation Check

Before using any playwright-cli command, MUST first check if it is available:

playwright-cli --version
  • If the command succeeds: proceed with browser automation tasks.
  • If the command is not found or fails: inform the user that playwright-cli is not installed and STOP. Do NOT attempt to install it using npx, npm, or any other package manager. The user is responsible for installing it themselves.

Commands

Core

playwright-cli open
# open and navigate right away
playwright-cli open https://example.com/
playwright-cli goto https://playwright.dev
playwright-cli type "search query"
playwright-cli click e3
playwright-cli dblclick e7
# --submit presses Enter after filling the element
playwright-cli fill e5 "user@example.com"  --submit
playwright-cli drag e2 e8
playwright-cli hover e4
playwright-cli select e9 "option-value"
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
# get element id, class, or any attribute not visible in the snapshot
playwright-cli eval "el => el.id" e5
playwright-cli eval "el => el.getAttribute('data-testid')" e5
playwright-cli dialog-accept
playwright-cli dialog-accept "confirmation text"
playwright-cli dialog-dismiss
playwright-cli resize 1920 1080
playwright-cli close

Navigation

playwright-cli go-back
playwright-cli go-forward
playwright-cli reload

Keyboard

playwright-cli press Enter
playwright-cli press ArrowDown
playwright-cli keydown Shift
playwright-cli keyup Shift

Mouse

playwright-cli mousemove 150 300
playwright-cli mousedown
playwright-cli mousedown right
playwright-cli mouseup
playwright-cli mouseup right
playwright-cli mousewheel 0 100

Save as

playwright-cli screenshot
playwright-cli screenshot e5
playwright-cli screenshot --filename=page.png
playwright-cli pdf --filename=page.pdf

Tabs

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

Storage

playwright-cli state-save
playwright-cli state-save auth.json
playwright-cli state-load auth.json

# Cookies
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

Network

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

DevTools

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 "Chapter Title" --description="Details" --duration=2000
playwright-cli video-stop

Open parameters

# Use specific browser when creating session
playwright-cli open --browser=chrome
playwright-cli open --browser=firefox
playwright-cli open --browser=webkit
playwright-cli open --browser=msedge
# Connect to browser via extension
playwright-cli open --extension

# Use persistent profile (by default profile is in-memory)
playwright-cli open --persistent
# Use persistent profile with custom directory
playwright-cli open --profile=/path/to/profile

# Start with config file
playwright-cli open --config=my-config.json

# Close the browser
playwright-cli close
# Delete user data for the default session
playwright-cli delete-data

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 name
playwright-cli snapshot

# save to file, use when snapshot is a part of the workflow result
playwright-cli snapshot --filename=after-click.yaml

# snapshot an element instead of the whole page
playwright-cli snapshot "#main"

# limit snapshot depth for efficiency, take a partial snapshot afterwards
playwright-cli snapshot --depth=4
playwright-cli snapshot e34

Targeting elements

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

# get snapshot with refs
playwright-cli snapshot

# interact using a ref
playwright-cli click e15

You can also use css selectors or Playwright locators.

# css selector
playwright-cli click "#main > button.submit"

# role locator
playwright-cli click "getByRole('button', { name: 'Submit' })"

# test id
playwright-cli click "getByTestId('submit-button')"

Browser Sessions

# create new browser session named "mysession" with persistent profile
playwright-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/profile
playwright-cli -s=mysession click e6
playwright-cli -s=mysession close  # stop a named browser
playwright-cli -s=mysession delete-data  # delete user data for persistent session

playwright-cli list
# Close all browsers
playwright-cli close-all
# Forcefully kill all browser processes
playwright-cli kill-all

Installation

If playwright-cli --version fails, inform the user that playwright-cli is not installed and stop. Do NOT use npx, npm install -g, or any other package manager to install it. The user is responsible for installation.

Example: Form submission

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

Example: Multi-tab workflow

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

Example: Debugging with DevTools

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

Workflow Patterns

Basic Page Inspection

playwright-cli open https://example.com
playwright-cli snapshot
# Read snapshot to understand page structure and element refs
playwright-cli snapshot "#specific-section"  # Narrow down to specific area
playwright-cli close

Form Testing

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  # submit button
playwright-cli snapshot  # verify result page
playwright-cli close

API Mocking + UI Verification

playwright-cli open https://example.com
playwright-cli route "https://api.example.com/data" --body='{"items": [{"id": 1, "name": "Test"}]}'
playwright-cli goto https://example.com/dashboard
playwright-cli snapshot  # verify UI renders with mocked data
playwright-cli unroute
playwright-cli close

Authentication State Reuse

# First session: log in and save state
playwright-cli open https://example.com/login
playwright-cli fill e1 "user@example.com"
playwright-cli fill e2 "password"
playwright-cli click e3
playwright-cli state-save auth.json
playwright-cli close

# Subsequent sessions: load saved state
playwright-cli open https://example.com
playwright-cli state-load auth.json
playwright-cli goto https://example.com/dashboard
playwright-cli snapshot
playwright-cli close

Debugging a Failing UI

playwright-cli open https://example.com/broken-page
playwright-cli console  # check for JS errors
playwright-cli network  # check for failed requests
playwright-cli snapshot  # inspect current DOM state
playwright-cli screenshot --filename=debug.png  # visual capture
playwright-cli close

Constraints

  • This skill is for on-the-fly interactive browser automation via playwright-cli bash commands only
  • Do NOT write Playwright test code files (.spec.ts, .test.ts) using this skill
  • Do NOT use npx playwright test or any test runner command
  • Do NOT install playwright-cli via npx, npm, or any package manager — if not available, inform the user and stop
  • All commands MUST use the playwright-cli binary — never npx, npm, or any package manager prefix

Specific tasks