npx skills add ...
npx skills add davila7/claude-code-templates --skill playwright-skill
npx skills add davila7/claude-code-templates --skill playwright-skill
Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing.
The same skill content is published under more than one repo. The install counts are split across them; any of these commands works.
IMPORTANT - Path Resolution:
This skill can be installed in different locations (plugin system, manual installation, global, or project-specific). Before executing any commands, determine the skill directory based on where you loaded this SKILL.md file, and use that path in all commands below. Replace $SKILL_DIR with the actual discovered path.
Common installation paths:
~/.claude/plugins/marketplaces/playwright-skill/skills/playwright-skill~/.claude/skills/playwright-skill<project>/.claude/skills/playwright-skillGeneral-purpose browser automation skill. I'll write custom Playwright code for any automation task you request and execute it via the universal executor.
CRITICAL WORKFLOW - Follow these steps in order:
Auto-detect dev servers - For localhost testing, ALWAYS run server detection FIRST:
Write scripts to /tmp - NEVER write test files to skill directory; always use /tmp/playwright-test-*.js
Use visible browser by default - Always use headless: false unless user specifically requests headless mode
Parameterize URLs - Always make URLs configurable via environment variable or constant at top of script
/tmp/playwright-test-*.js (won't clutter your project)cd $SKILL_DIR && node run.js /tmp/playwright-test-*.jsThis installs Playwright and Chromium browser. Only needed once.
Step 1: Detect dev servers (for localhost testing)
Step 2: Write test script to /tmp with URL parameter
Step 3: Execute from skill directory
For quick one-off tasks, you can execute code inline without creating files:
When to use inline vs files:
Optional utility functions in lib/helpers.js:
See lib/helpers.js for full list.
Configure custom headers for all HTTP requests via environment variables. Useful for:
Single header (common case):
Multiple headers (JSON format):
Headers are automatically applied when using helpers.createContext():
For scripts using raw Playwright API, use the injected getContextOptionsWithHeaders():
For comprehensive Playwright API documentation, see API_REFERENCE.md:
detectDevServers() before writing test code for localhost testingPW_HEADER_NAME/PW_HEADER_VALUE env vars to identify automated traffic to your backend/tmp/playwright-test-*.js, never to skill directory or user's projectTARGET_URL constant at the top of every scriptheadless: false unless user explicitly asks for headless modeheadless: true when user specifically requests "headless" or "background" executionslowMo: 100 to make actions visible and easier to followwaitForURL, waitForSelector, waitForLoadState instead of fixed timeoutsconsole.log() to track progress and show what's happeningPlaywright not installed:
Module not found:
Ensure running from skill directory via run.js wrapper
Browser doesn't open:
Check headless: false and ensure display available
Element not found:
Add wait: await page.waitForSelector('.element', { timeout: 10000 })
/tmp for automatic cleanup (no clutter)run.js