/playwright-skill

name: playwright-skill
description: 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. Do NOT use for quick page debugging or network inspection (use chrome-devtools instead).

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

Playwright Browser Automation

General-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:**

1. **Auto-detect dev servers** - For localhost testing, ALWAYS run server detection FIRST:

   cd $SKILL_DIR && node -e "require('./lib/helpers').detectDevServers().then(servers => console.log(JSON.stringify(servers)))"

• If **1 server found**: Use it automatically, inform user
• If **multiple servers found**: Ask user which one to test
• If **no servers found**: Ask for URL or offer to help start dev server

2. **Write scripts to /tmp** - NEVER write test files to skill directory; always use `/tmp/playwright-test-*.js`

3. **Use visible browser by default** - Always use `headless: false` unless user specifically requests headless mode

4. **Parameterize URLs** - Always make URLs configurable via environment variable or constant at top of script

How It Works

1. You describe what you want to test/automate 2. I auto-detect running dev servers (or ask for URL if testing external site) 3. I write custom Playwright code in `/tmp/playwright-test-*.js` (won't clutter your project) 4. I execute it via: `cd $SKILL_DIR && node run.js /tmp/playwright-test-*.js` 5. Results displayed in real-time, browser window visible for debugging 6. Test files auto-cleaned from /tmp by your OS

Setup (First Time)

cd $SKILL_DIR
npm run setup

This installs Playwright and Chromium browser. Only needed once.

Execution Pattern

**Step 1: Detect dev servers (for localhost testing)**

cd $SKILL_DIR && node -e "require('./lib/helpers').detectDevServers().then(s => console.log(JSON.stringify(s)))"

**Step 2: Write test script to /tmp with URL parameter**

// /tmp/playwright-test-page.js
const { chromium } = require('playwright')

// Parameterized URL (detected or user-provided)
const TARGET_URL = 'http://localhost:3001' // <-- Auto-detected or from user

;(async () => {
  const browser = await chromium.launch({ headless: false })
  const page = await browser.newPage()

  await page.goto(TARGET_URL)
  console.log('Page loaded:', await page.title())

  await page.screenshot({ path: '/tmp/screenshot.png', fullPage: true })
  console.log('📸 Screenshot saved to /tmp/screenshot.png')

  await browser.close()
})()

**Step 3: Execute from skill directory**

cd $SKILL_DIR && node run.js /tmp/playwright-test-page.js

Common Patterns

Test a Page (Multiple Viewports)

// /tmp/playwright-test-responsive.js
const { chromium } = require('playwright')

const TARGET_URL = 'http://localhost:3001' // Auto-detected

;(async () => {
  const browser = await chromium.launch({ headless: false, slowMo: 100 })
  const page = await browser.newPage()

  // Desktop test
  await page.setViewportSize({ width: 1920, height: 1080 })
  await page.goto(TARGET_URL)
  console.log('Desktop - Title:', await page.title())
  await page.screenshot({ path: '/tmp/desktop.png', fullPage: true })

  // Mobile test
  await page.setViewportSize({ width: 375, height: 667 })
  await page.screenshot({ path: '/tmp/mobile.png', fullPage: true })

  await browser.close()
})()

Test Login Flow

// /tmp/playwright-test-login.js
const { chromium } = require('playwright')

const TARGET_URL = 'http://localhost:3001' // Auto-detected
// SECURITY: Use environment variables for credentials
const TEST_EMAIL = process.env.TEST_EMAIL || 'test@example.com'
const TEST_PASSWORD = process.env.TEST_PASSWORD || 'test-password'

;(async () => {
  const browser = await chromium.launch({ headless: false })
  const page = await browser.newPage()

  await page.goto(`${TARGET_URL}/login`)

  await page.fill('input[name="email"]', TEST_EMAIL)
  await page.fill('input[name="password"]', TEST_PASSWORD)
  await page.click('button[type="submit"]')

  // Wait for redirect
  await page.waitForURL('**/dashboard')
  console.log('✅ Login successful, redirected to dashboard')

  await browser.close()
})()

**Execute with credentials:**

TEST_EMAIL=user@example.com TEST_PASSWORD=secure123 \
  cd $SKILL_DIR && node run.js /tmp/playwright-test-login.js

Fill and Submit Form

// /tmp/playwright-test-form.js
const { chromium } = require('playwright')

const TARGET_URL = 'http://localhost:3001' // Auto-detected

;(async () => {
  const browser = await chromium.launch({ headless: false, slowMo: 50 })
  const page = await browser.newPage()

  await page.goto(`${TARGET_URL}/contact`)

  await page.fill('input[name="name"]', 'John Doe')
  await page.fill('input[name="email"]', 'john@example.com')
  await page.fill('textarea[name="message"]', 'Test message')
  await page.click('button[type="submit"]')

  // Verify submission
  await page.waitForSelector('.success-message')
  console.log('✅ Form submitted successfully')

  await browser.close()
})()

Check for Broken Links

const { chromium } = require('playwright')

;(async () => {
  con