playwright-browser_skill

Overview

This skill automates browser tasks using Playwright to run scripts, capture screenshots, test UI, and verify flows. It executes Playwright code via a provided runner (run.js) and auto-installs Playwright on first use. Designed for headless default runs but supports headed mode for interactive debugging.

How this skill works

You write Playwright scripts to /tmp or provide inline code strings and execute them with node $SKILL_DIR/run.js. The runner injects useful variables (BASE_URL, CI_ARGS, EXTRA_HEADERS and playwright browser objects) for convenient scripting. Screenshots default to /tmp, and the runner handles installation and execution so you can focus on test logic rather than environment setup.

When to use it

• Automating end-to-end browser tests for web apps
• Taking screenshots for visual regression or documentation
• Verifying login flows and session persistence
• Testing responsive behavior across viewports and devices
• Running CI-compatible browser checks with safe args

Best practices

• Keep ephemeral scripts in /tmp for quick iterations and cleanup
• Use BASE_URL and injected headers to avoid hardcoding endpoints or secrets
• Run headless by default for CI; set { headless: false } and slowMo: 100 when debugging interactively
• Use CI_ARGS when running in containerized or sandboxed CI environments
• Persist auth state or use network mocking for stable, repeatable tests

Example use cases

• Headless smoke test: navigate to site, assert page title, and exit
• Interactive debug: launch chromium with headless: false and slowMo: 100 to watch actions
• Visual snapshot: load a page at different viewports and save screenshots to /tmp
• Login flow: fill credentials, submit, wait for navigation, and verify protected page content
• Responsive check: iterate device presets from devices to capture mobile and desktop layouts