mcpField
P
playwright-cli

playwright-cli

github.com/willboosterTesting & quality63 installs
Repository

About playwright-cli

playwright-cli is a command-line browser automation skill for developers and agents. It combines page interaction with snapshots, session controls, storage handling, network routing, and debugging commands.

Key features

  1. 01Navigate and interact with pages
  2. 02Target elements with refs or locators
  3. 03Manage tabs and browser sessions
  4. 04Save snapshots, screenshots, and PDFs
  5. 05Inspect network and console output
  6. 06Control storage and mock requests

Use cases

  1. 01Automate form submission in a browser
  2. 02Compare page snapshots before and after actions
  3. 03Debug browser behavior with console and network data

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/willbooster/agent-skills --skill playwright-cli

After installing, type/playwright-cliin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
element-attributes.md
playwright-tests.md
request-mocking.md
running-code.md
session-management.md
storage-state.md
test-generation.md
tracing.md
video-recording.md

Details

From the project README

Browser Automation with playwright-cli

Quick start

# 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

Commands

Core
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
Navigation
bunx @playwright/[email protected] go-back
bunx @playwright/[email protected] go-forward
bunx @playwright/[email protected] reload
Keyboard
bunx @playwright/[email protected] press Enter
bunx @playwright/[email protected] press ArrowDown
bunx @playwright/[email protected] keydown Shift
bunx @playwright/[email protected] keyup Shift
Mouse
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
Save as
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
Tabs
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
Storage
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
Network
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
DevTools
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 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.

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

Open parameters

# 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

Snapshots

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

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

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

Targeting elements

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

# get snapshot with refs
bunx @playwright/[email protected] snapshot

# interact using a ref
bunx @playwright/[email protected] click e15

You can also use css selectors or Playwright locators.

# 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')"

Browser Sessions

# 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

Example: Form submission

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

Example: Multi-tab workflow

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

Example: Debugging with DevTools

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

Specific tasks

Comments

Markdown supported