playwright

name	playwright
version	1.0.0
category	workspace-hub
applies-to	["Codex","codex","gemini"]
invocation	/playwright
description	Playwright CLI recipes for E2E testing, screenshots, PDF export, and accessibility audits. Use instead of browser MCP tools for deterministic, token-efficient browser automation.
type	reference
triggers	["playwright","screenshot","pdf export","e2e test","browser automation","accessibility audit","headless browser"]
related_skills	["webapp-testing"]

Playwright CLI Skill

Token-efficient browser automation via npx playwright CLI. Prefer this over MCP browser tools for deterministic, scriptable tasks.

Quick Start

# Install (one-time) — only chromium needed for most tasks
npx playwright install chromium

Decision Matrix: Playwright CLI vs Chrome MCP

Use Case	Tool	Why
Page screenshot	Playwright CLI	Single command, ~27K tokens vs ~114K MCP
PDF export	Playwright CLI	Native npx playwright pdf command
E2E test suite	Playwright CLI	npx playwright test with config file
Accessibility audit	Playwright CLI	Scriptable, repeatable, CI-friendly
UI visual audit	Playwright CLI	gsd-ui-auditor already uses this pattern
Interactive exploration	Chrome MCP	Stateful browsing, clicking, form filling
Live debugging	Chrome MCP	Real-time DOM inspection, console access
Multi-step navigation	Chrome MCP	When path is unknown, needs human-like exploration

Rule of thumb: If the task is scriptable and deterministic, use Playwright CLI. If the task requires interactive exploration or unknown navigation, use Chrome MCP.

Recipes

1. Page Screenshot

# Basic screenshot
npx playwright screenshot <url> <output.png>

# Full-page (scrollable area)
npx playwright screenshot --full-page <url> <output.png>

# Mobile viewport
npx playwright screenshot --device "iPhone 12" <url> <output-mobile.png>

# Dark mode
npx playwright screenshot --color-scheme dark <url> <output-dark.png>

# Wait for dynamic content
npx playwright screenshot --wait-for-selector ".loaded" <url> <output.png>
npx playwright screenshot --wait-for-timeout 3000 <url> <output.png>

# Multi-viewport capture (desktop + mobile + tablet)
npx playwright screenshot --full-page <url> desktop.png
npx playwright screenshot --device  <url> mobile.png
npx playwright screenshot --device  <url> tablet.png