openpave-playwright

Browser automation skill for OpenPAVE - take screenshots, generate PDFs, record test code, manage login sessions, and run end-to-end tests using Playwright.

Installation

# Install the skill
pave install ~/pave-apps/openpave-playwright

# Install Playwright and browsers (if not already)
npm install -g playwright
npx playwright install

Prerequisites

• Playwright: npm install -g playwright or available via npx
• Browsers: Run npx playwright install to install Chromium, Firefox, and WebKit
• System deps (Linux): Run npx playwright install-deps for missing libraries

Session Management (Login & Auth)

Playwright can save and reuse login sessions (cookies + localStorage). This lets you take authenticated screenshots of sites like LinkedIn, GitHub, etc.

Login Workflow

# Step 1: Log in to a site (browser opens, you log in, close it)
playwright login https://linkedin.com
# -> Session saved as "linkedin" (derived from hostname)

# Step 1b: Or specify a custom session name
playwright login https://linkedin.com --session my-linkedin

# Step 2: Use the session for screenshots, PDFs, or browsing
playwright screenshot https://linkedin.com/feed --session linkedin
playwright pdf https://linkedin.com/in/someone --session linkedin
playwright open https://linkedin.com --session linkedin

# Step 3: List all saved sessions
playwright sessions

# Step 4: Delete a session
playwright sessions delete linkedin

How It Works

1. playwright login <url> opens an interactive browser via codegen. You log in normally (enter username, password, 2FA, etc.), then close the browser window.
2. Playwright saves all cookies and localStorage to ~/.pave/playwright/sessions/<name>.json.
3. --session <name> on any command loads that session file before navigating, so you appear logged in.
4. Sessions auto-refresh: using --session both loads the existing state AND saves updated state after the command completes (cookies may get refreshed).

Session Storage

Sessions are stored in: ~/.pave/playwright/sessions/

Each session is a JSON file containing cookies and localStorage entries. You can also use raw Playwright storage state files:

# Use raw file paths instead of named sessions
playwright screenshot https://example.com --load-storage ./my-auth.json
playwright codegen https://example.com --save-storage ./my-auth.json

Usage

Screenshots

# Basic screenshot
playwright screenshot https://example.com

# Save to specific file
playwright screenshot https://example.com tmp/example.png

# Full-page screenshot
playwright screenshot https://example.com --full-page

# Authenticated screenshot
playwright screenshot https://linkedin.com/feed --session linkedin

# Mobile device emulation
playwright screenshot https://example.com --device "iPhone 13"

# Specific browser
playwright screenshot https://example.com --browser firefox

# Custom viewport
playwright screenshot https://example.com --viewport 1920x1080

# Dark mode
playwright screenshot https://example.com --color-scheme dark

# Wait for content to load
playwright screenshot https://example.com --wait-for-selector ".main-content"
playwright screenshot https://example.com --wait-for-timeout 3000

# Ignore HTTPS errors
playwright screenshot https://self-signed.example.com --ignore-https-errors

# Custom locale and timezone
playwright screenshot https://example.com --lang ja-JP --timezone Asia/Tokyo

# Through a proxy
playwright screenshot https://example.com --proxy-server http://proxy:3128

# Save network activity
playwright screenshot https://example.com --save-har tmp/network.har

PDF Generation

# Generate PDF (uses Chromium)
playwright pdf https://example.com

# Save to specific file
playwright pdf https://example.com tmp/page.pdf

# Specific paper format
playwright pdf https://example.com --paper-format A4
playwright pdf https://example.com --paper-format Letter

# Authenticated PDF
playwright pdf https://linkedin.com/in/someone --session linkedin

# Wait for dynamic content
playwright pdf https://example.com --wait-for-timeout 2000

Code Generation

# Open codegen UI
playwright codegen https://example.com

# Generate Python code
playwright codegen https://example.com --target python

# With a logged-in session
playwright codegen https://linkedin.com --session linkedin

# Save generated code to file
playwright codegen https://example.com --output tmp/test.spec.js

Browser Management

# Open a URL in a browser
playwright open https://example.com

# Open with session
playwright open https://github.com --session github

# Install all browsers
playwright install

# Install specific browser
playwright install chromium
playwright install firefox
playwright install webkit

# Install with system dependencies
playwright install --with-deps

# Remove browsers
playwright uninstall
playwright uninstall --all

Testing

# Run all tests
playwright test

# Run in headed mode
playwright test --headed

# Filter tests by name
playwright test --grep "login"

# Debug mode
playwright test --debug

# UI mode
playwright test --ui

Utilities

# Show version
playwright version

# Clear caches
playwright clear-cache

Commands

Command	Description
screenshot <url> [file]	Capture page screenshot (PNG)
pdf <url> [file]	Save page as PDF
login <url>	Log in interactively and save session
sessions [delete <name>]	List or delete saved sessions
codegen [url]	Generate test code interactively
open [url]	Open page in browser
test [filter...]	Run Playwright tests
install [browser...]	Install browsers
install-deps [browser...]	Install system dependencies
uninstall	Remove installed browsers
show-report [path]	Open HTML test report
show-trace [path]	Open trace viewer
clear-cache	Clear build and test caches
version	Show Playwright version

Common Options

These options work on screenshot, pdf, codegen, and open:

Option	Description
--session <name>	Use a named session (stored in ~/.pave/playwright/sessions/)
--load-storage <file>	Load auth state from file
--save-storage <file>	Save auth state to file
-b, --browser <name>	Browser: chromium, firefox, webkit
--channel <channel>	Chrome channel: chrome, chrome-beta, msedge-dev
-d, --device <name>	Emulate device (e.g. "iPhone 13")
--viewport <WxH>	Viewport size (e.g. 1280x720)
--color-scheme <scheme>	Color scheme: light, dark
--lang <locale>	Language (e.g. en-GB, ja-JP)
--timezone <tz>	Timezone (e.g. Asia/Hong_Kong)
--geolocation <lat,lng>	Geolocation coordinates
--user-agent <string>	Custom user agent string
--ignore-https-errors	Ignore HTTPS certificate errors
--proxy-server <proxy>	HTTP/SOCKS proxy
--proxy-bypass <domains>	Comma-separated domains to bypass proxy
--user-data-dir <dir>	Persistent browser profile directory
--timeout <ms>	Navigation timeout
--save-har <file>	Record network activity to HAR file

Output

Screenshots and PDFs are saved to tmp/ by default. Use --json for machine-readable output:

{
  "success": true,
  "url": "https://example.com",
  "path": "tmp/screenshot-example.com-1234567890.png",
  "size": 45678,
  "sizeHuman": "44.6 KB",
  "session": "linkedin"
}

Notes

• PDF generation only works with Chromium (Playwright limitation)
• codegen/login open interactive browser windows; require a display
• Sessions are stored as JSON in ~/.pave/playwright/sessions/
• --session both loads and saves -- cookies get refreshed automatically
• Output files default to tmp/ directory (PAVE convention)
• Paper formats for PDF: Letter, Legal, Tabloid, Ledger, A0-A6

License

MIT