Playwright Browser Automation

{
  "name": "playwright-skill",
  "version": "4.0.2",
  "description": "General-purpose browser automation with Playwright for Claude Code with auto-detection and smart test management",
  "author": "lackeyjb",
  "main": "run.js",
  "scripts": {
    "setup": "npm install && npx playwright install chromium",
    "install-all-browsers": "npx playwright install chromium firefox webkit"
  },
  "keywords": [
    "playwright",
    "automation",
    "browser-testing",
    "web-automation",
    "claude-skill",
    "general-purpose"
  ],
  "dependencies": {
    "playwright": "^1.48.0"
  },
  "engines": {
    "node": ">=14.0.0"
  },
  "license": "MIT"
}

#!/usr/bin/env node
/**
 * Universal Playwright Executor for Claude Code
 *
 * Executes Playwright automation code from:
 * - File path: node run.js script.js
 * - Inline code: node run.js 'await page.goto("...")'
 * - Stdin: cat script.js | node run.js
 *
 * Ensures proper module resolution by running from skill directory.
 */

const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');

// Change to skill directory for proper module resolution
process.chdir(__dirname);

/**
 * Check if Playwright is installed
 */
function checkPlaywrightInstalled() {
  try {
    require.resolve('playwright');
    return true;
  } catch (e) {
    return false;
  }
}

/**
 * Install Playwright if missing
 */
function installPlaywright() {
  console.log('📦 Playwright not found. Installing...');
  try {
    execSync('npm install', { stdio: 'inherit', cwd: __dirname });
    execSync('npx playwright install chromium', { stdio: 'inherit', cwd: __dirname });
    console.log('✅ Playwright installed successfully');
    return true;
  } catch (e) {
    console.error('❌ Failed to install Playwright:', e.message);
    console.error('Please run manually: cd', __dirname, '&& npm run setup');
    return false;
  }
}

/**
 * Get code to execute from various sources
 */
function getCodeToExecute() {
  const args = process.argv.slice(2);

  // Case 1: File path provided
  if (args.length > 0 && fs.existsSync(args[0])) {
    const filePath = path.resolve(args[0]);
    console.log(`📄 Executing file: ${filePath}`);
    return fs.readFileSync(filePath, 'utf8');
  }

  // Case 2: Inline code provided as argument
  if (args.length > 0) {
    console.log('⚡ Executing inline code');
    return args.join(' ');
  }

  // Case 3: Code from stdin
  if (!process.stdin.isTTY) {
    console.log('📥 Reading from stdin');
    return fs.readFileSync(0, 'utf8');
  }

  // No input
  console.error('❌ No code to execute');
  console.error('Usage:');
  console.error('  node run.js script.js          # Execute file');
  console.error('  node run.js "code here"        # Execute inline');
  console.error('  cat script.js | node run.js    # Execute from stdin');
  process.exit(1);
}

/**
 * Clean up old temporary execution files from previous runs
 */
function cleanupOldTempFiles() {
  try {
    const files = fs.readdirSync(__dirname);
    const tempFiles = files.filter(f => f.startsWith('.temp-execution-') && f.endsWith('.js'));

    if (tempFiles.length > 0) {
      tempFiles.forEach(file => {
        const filePath = path.join(__dirname, file);
        try {
          fs.unlinkSync(filePath);
        } catch (e) {
          // Ignore errors - file might be in use or already deleted
        }
      });
    }
  } catch (e) {
    // Ignore directory read errors
  }
}

/**
 * Wrap code in async IIFE if not already wrapped
 */
function wrapCodeIfNeeded(code) {
  // Check if code already has require() and async structure
  const hasRequire = code.includes('require(');
  const hasAsyncIIFE = code.includes('(async () => {') || code.includes('(async()=>{');

  // If it's already a complete script, return as-is
  if (hasRequire && hasAsyncIIFE) {
    return code;
  }

  // If it's just Playwright commands, wrap in full template
  if (!hasRequire) {
    return `
const { chromium, firefox, webkit, devices } = require('playwright');
const helpers = require('./lib/helpers');

(async () => {
  try {
    ${code}
  } catch (error) {
    console.error('❌ Automation error:', error.message);
    if (error.stack) {
      console.error(error.stack);
    }
    process.exit(1);
  }
})();
`;
  }

  // If has require but no async wrapper
  if (!hasAsyncIIFE) {
    return `
(async () => {
  try {
    ${code}
  } catch (error) {
    console.error('❌ Automation error:', error.message);
    if (error.stack) {
      console.error(error.stack);
    }
    process.exit(1);
  }
})();
`;
  }

  return code;
}

/**
 * Main execution
 */
async function main() {
  console.log('🎭 Playwright Skill - Universal Executor\n');

  // Clean up old temp files from previous runs
  cleanupOldTempFiles();

  // Check Playwright installation
  if (!checkPlaywrightInstalled()) {
    const installed = installPlaywright();
    if (!installed) {
      process.exit(1);
    }
  }

  // Get code to execute
  const rawCode = getCodeToExecute();
  const code = wrapCodeIfNeeded(rawCode);

  // Create temporary file for execution
  const tempFile = path.join(__dirname, `.temp-execution-${Date.now()}.js`);

  try {
    // Write code to temp file
    fs.writeFileSync(tempFile, code, 'utf8');

    // Execute the code
    console.log('🚀 Starting automation...\n');
    require(tempFile);

    // Note: Temp file will be cleaned up on next run
    // This allows long-running async operations to complete safely

  } catch (error) {
    console.error('❌ Execution failed:', error.message);
    if (error.stack) {
      console.error('\n📋 Stack trace:');
      console.error(error.stack);
    }
    process.exit(1);
  }
}

// Run main function
main().catch(error => {
  console.error('❌ Fatal error:', error.message);
  process.exit(1);
});

{
  "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.",
  "metadata": {
    "version": "4.0.0",
    "author": "Claude Assistant",
    "tags": "[testing, automation, browser, e2e, playwright, web-testing]"
  },
  "content": "General-purpose browser automation skill. I'll write custom Playwright code for any automation task you request and execute it via the universal executor.\r\n\r\n**CRITICAL WORKFLOW - Follow these steps in order:**\r\n\r\n1. **Auto-detect dev servers** - For localhost testing, ALWAYS run server detection FIRST:\r\n   ```bash\r\n   cd $SKILL_DIR && node -e \"require('./lib/helpers').detectDevServers().then(servers => console.log(JSON.stringify(servers)))\"\r\n   ```\r\n   - If **1 server found**: Use it automatically, inform user\r\n   - If **multiple servers found**: Ask user which one to test\r\n   - If **no servers found**: Ask for URL or offer to help start dev server\r\n\r\n2. **Write scripts to /tmp** - NEVER write test files to skill directory; always use `/tmp/playwright-test-*.js`\r\n\r\n3. **Use visible browser by default** - Always use `headless: false` unless user specifically requests headless mode\r\n\r\n4. **Parameterize URLs** - Always make URLs configurable via environment variable or constant at top of script\r\n\r\n\r\nFor quick one-off tasks, you can execute code inline without creating files:\r\n\r\n```bash",
  "name": "Playwright Browser Automation",
  "id": "playwright-skill_playwright",
  "sections": {
    "Execution Pattern": "**Step 1: Detect dev servers (for localhost testing)**\r\n\r\n```bash\r\ncd $SKILL_DIR && node -e \"require('./lib/helpers').detectDevServers().then(s => console.log(JSON.stringify(s)))\"\r\n```\r\n\r\n**Step 2: Write test script to /tmp with URL parameter**\r\n\r\n```javascript\r\n// /tmp/playwright-test-page.js\r\nconst { chromium } = require('playwright');\r\n\r\n// Parameterized URL (detected or user-provided)\r\nconst TARGET_URL = 'http://localhost:3001'; // <-- Auto-detected or from user\r\n\r\n(async () => {\r\n  const browser = await chromium.launch({ headless: false });\r\n  const page = await browser.newPage();\r\n\r\n  await page.goto(TARGET_URL);\r\n  console.log('Page loaded:', await page.title());\r\n\r\n  await page.screenshot({ path: '/tmp/screenshot.png', fullPage: true });\r\n  console.log('📸 Screenshot saved to /tmp/screenshot.png');\r\n\r\n  await browser.close();\r\n})();\r\n```\r\n\r\n**Step 3: Execute from skill directory**\r\n\r\n```bash\r\ncd $SKILL_DIR && node run.js /tmp/playwright-test-page.js\r\n```",
    "Common Patterns": "### Test a Page (Multiple Viewports)\r\n\r\n```javascript\r\n// /tmp/playwright-test-responsive.js\r\nconst { chromium } = require('playwright');\r\n\r\nconst TARGET_URL = 'http://localhost:3001'; // Auto-detected\r\n\r\n(async () => {\r\n  const browser = await chromium.launch({ headless: false, slowMo: 100 });\r\n  const page = await browser.newPage();\r\n\r\n  // Desktop test\r\n  await page.setViewportSize({ width: 1920, height: 1080 });\r\n  await page.goto(TARGET_URL);\r\n  console.log('Desktop - Title:', await page.title());\r\n  await page.screenshot({ path: '/tmp/desktop.png', fullPage: true });\r\n\r\n  // Mobile test\r\n  await page.setViewportSize({ width: 375, height: 667 });\r\n  await page.screenshot({ path: '/tmp/mobile.png', fullPage: true });\r\n\r\n  await browser.close();\r\n})();\r\n```\r\n\r\n### Test Login Flow\r\n\r\n```javascript\r\n// /tmp/playwright-test-login.js\r\nconst { chromium } = require('playwright');\r\n\r\nconst TARGET_URL = 'http://localhost:3001'; // Auto-detected\r\n\r\n(async () => {\r\n  const browser = await chromium.launch({ headless: false });\r\n  const page = await browser.newPage();\r\n\r\n  await page.goto(`${TARGET_URL}/login`);\r\n\r\n  await page.fill('input[name=\"email\"]', 'test@example.com');\r\n  await page.fill('input[name=\"password\"]', 'password123');\r\n  await page.click('button[type=\"submit\"]');\r\n\r\n  // Wait for redirect\r\n  await page.waitForURL('**/dashboard');\r\n  console.log('✅ Login successful, redirected to dashboard');\r\n\r\n  await browser.close();\r\n})();\r\n```\r\n\r\n### Fill and Submit Form\r\n\r\n```javascript\r\n// /tmp/playwright-test-form.js\r\nconst { chromium } = require('playwright');\r\n\r\nconst TARGET_URL = 'http://localhost:3001'; // Auto-detected\r\n\r\n(async () => {\r\n  const browser = await chromium.launch({ headless: false, slowMo: 50 });\r\n  const page = await browser.newPage();\r\n\r\n  await page.goto(`${TARGET_URL}/contact`);\r\n\r\n  await page.fill('input[name=\"name\"]', 'John Doe');\r\n  await page.fill('input[name=\"email\"]', 'john@example.com');\r\n  await page.fill('textarea[name=\"message\"]', 'Test message');\r\n  await page.click('button[type=\"submit\"]');\r\n\r\n  // Verify submission\r\n  await page.waitForSelector('.success-message');\r\n  console.log('✅ Form submitted successfully');\r\n\r\n  await browser.close();\r\n})();\r\n```\r\n\r\n### Check for Broken Links\r\n\r\n```javascript\r\nconst { chromium } = require('playwright');\r\n\r\n(async () => {\r\n  const browser = await chromium.launch({ headless: false });\r\n  const page = await browser.newPage();\r\n\r\n  await page.goto('http://localhost:3000');\r\n\r\n  const links = await page.locator('a[href^=\"http\"]').all();\r\n  const results = { working: 0, broken: [] };\r\n\r\n  for (const link of links) {\r\n    const href = await link.getAttribute('href');\r\n    try {\r\n      const response = await page.request.head(href);\r\n      if (response.ok()) {\r\n        results.working++;\r\n      } else {\r\n        results.broken.push({ url: href, status: response.status() });\r\n      }\r\n    } catch (e) {\r\n      results.broken.push({ url: href, error: e.message });\r\n    }\r\n  }\r\n\r\n  console.log(`✅ Working links: ${results.working}`);\r\n  console.log(`❌ Broken links:`, results.broken);\r\n\r\n  await browser.close();\r\n})();\r\n```\r\n\r\n### Take Screenshot with Error Handling\r\n\r\n```javascript\r\nconst { chromium } = require('playwright');\r\n\r\n(async () => {\r\n  const browser = await chromium.launch({ headless: false });\r\n  const page = await browser.newPage();\r\n\r\n  try {\r\n    await page.goto('http://localhost:3000', {\r\n      waitUntil: 'networkidle',\r\n      timeout: 10000\r\n    });\r\n\r\n    await page.screenshot({\r\n      path: '/tmp/screenshot.png',\r\n      fullPage: true\r\n    });\r\n\r\n    console.log('📸 Screenshot saved to /tmp/screenshot.png');\r\n  } catch (error) {\r\n    console.error('❌ Error:', error.message);\r\n  } finally {\r\n    await browser.close();\r\n  }\r\n})();\r\n```\r\n\r\n### Test Responsive Design\r\n\r\n```javascript\r\n// /tmp/playwright-test-responsive-full.js\r\nconst { chromium } = require('playwright');\r\n\r\nconst TARGET_URL = 'http://localhost:3001'; // Auto-detected\r\n\r\n(async () => {\r\n  const browser = await chromium.launch({ headless: false });\r\n  const page = await browser.newPage();\r\n\r\n  const viewports = [\r\n    { name: 'Desktop', width: 1920, height: 1080 },\r\n    { name: 'Tablet', width: 768, height: 1024 },\r\n    { name: 'Mobile', width: 375, height: 667 }\r\n  ];\r\n\r\n  for (const viewport of viewports) {\r\n    console.log(`Testing ${viewport.name} (${viewport.width}x${viewport.height})`);\r\n\r\n    await page.setViewportSize({\r\n      width: viewport.width,\r\n      height: viewport.height\r\n    });\r\n\r\n    await page.goto(TARGET_URL);\r\n    await page.waitForTimeout(1000);\r\n\r\n    await page.screenshot({\r\n      path: `/tmp/${viewport.name.toLowerCase()}.png`,\r\n      fullPage: true\r\n    });\r\n  }\r\n\r\n  console.log('✅ All viewports tested');\r\n  await browser.close();\r\n})();\r\n```",
    "Example Usage": "```\r\nUser: \"Test if the marketing page looks good\"\r\n\r\nClaude: I'll test the marketing page across multiple viewports. Let me first detect running servers...\r\n[Runs: detectDevServers()]\r\n[Output: Found server on port 3001]\r\nI found your dev server running on http://localhost:3001\r\n\r\n[Writes custom automation script to /tmp/playwright-test-marketing.js with URL parameterized]\r\n[Runs: cd $SKILL_DIR && node run.js /tmp/playwright-test-marketing.js]\r\n[Shows results with screenshots from /tmp/]\r\n```\r\n\r\n```\r\nUser: \"Check if login redirects correctly\"\r\n\r\nClaude: I'll test the login flow. First, let me check for running servers...\r\n[Runs: detectDevServers()]\r\n[Output: Found servers on ports 3000 and 3001]\r\nI found 2 dev servers. Which one should I test?\r\n- http://localhost:3000\r\n- http://localhost:3001\r\n\r\nUser: \"Use 3001\"\r\n\r\n[Writes login automation to /tmp/playwright-test-login.js]\r\n[Runs: cd $SKILL_DIR && node run.js /tmp/playwright-test-login.js]\r\n[Reports: ✅ Login successful, redirected to /dashboard]\r\n```",
    "Advanced Usage": "For comprehensive Playwright API documentation, see [API_REFERENCE.md](API_REFERENCE.md):\r\n\r\n- Selectors & Locators best practices\r\n- Network interception & API mocking\r\n- Authentication & session management\r\n- Visual regression testing\r\n- Mobile device emulation\r\n- Performance testing\r\n- Debugging techniques\r\n- CI/CD integration",
    "Setup (First Time)": "```bash\r\ncd $SKILL_DIR\r\nnpm run setup\r\n```\r\n\r\nThis installs Playwright and Chromium browser. Only needed once.",
    "Notes": "- Each automation is custom-written for your specific request\r\n- Not limited to pre-built scripts - any browser task possible\r\n- Auto-detects running dev servers to eliminate hardcoded URLs\r\n- Test scripts written to `/tmp` for automatic cleanup (no clutter)\r\n- Code executes reliably with proper module resolution via `run.js`\r\n- Progressive disclosure - API_REFERENCE.md loaded only when advanced features needed",
    "Inline Execution (Simple Tasks)": "cd $SKILL_DIR && node run.js \"\r\nconst browser = await chromium.launch({ headless: false });\r\nconst page = await browser.newPage();\r\nawait page.goto('http://localhost:3001');\r\nawait page.screenshot({ path: '/tmp/quick-screenshot.png', fullPage: true });\r\nconsole.log('Screenshot saved');\r\nawait browser.close();\r\n\"\r\n```\r\n\r\n**When to use inline vs files:**\r\n- **Inline**: Quick one-off tasks (screenshot, check if element exists, get page title)\r\n- **Files**: Complex tests, responsive design checks, anything user might want to re-run",
    "Troubleshooting": "**Playwright not installed:**\r\n```bash\r\ncd $SKILL_DIR && npm run setup\r\n```\r\n\r\n**Module not found:**\r\nEnsure running from skill directory via `run.js` wrapper\r\n\r\n**Browser doesn't open:**\r\nCheck `headless: false` and ensure display available\r\n\r\n**Element not found:**\r\nAdd wait: `await page.waitForSelector('.element', { timeout: 10000 })`",
    "Available Helpers": "Optional utility functions in `lib/helpers.js`:\r\n\r\n```javascript\r\nconst helpers = require('./lib/helpers');\r\n\r\n// Detect running dev servers (CRITICAL - use this first!)\r\nconst servers = await helpers.detectDevServers();\r\nconsole.log('Found servers:', servers);\r\n\r\n// Safe click with retry\r\nawait helpers.safeClick(page, 'button.submit', { retries: 3 });\r\n\r\n// Safe type with clear\r\nawait helpers.safeType(page, '#username', 'testuser');\r\n\r\n// Take timestamped screenshot\r\nawait helpers.takeScreenshot(page, 'test-result');\r\n\r\n// Handle cookie banners\r\nawait helpers.handleCookieBanner(page);\r\n\r\n// Extract table data\r\nconst data = await helpers.extractTableData(page, 'table.results');\r\n```\r\n\r\nSee `lib/helpers.js` for full list.",
    "How It Works": "1. You describe what you want to test/automate\r\n2. I auto-detect running dev servers (or ask for URL if testing external site)\r\n3. I write custom Playwright code in `/tmp/playwright-test-*.js` (won't clutter your project)\r\n4. I execute it via: `cd $SKILL_DIR && node run.js /tmp/playwright-test-*.js`\r\n5. Results displayed in real-time, browser window visible for debugging\r\n6. Test files auto-cleaned from /tmp by your OS",
    "Tips": "- **CRITICAL: Detect servers FIRST** - Always run `detectDevServers()` before writing test code for localhost testing\r\n- **Use /tmp for test files** - Write to `/tmp/playwright-test-*.js`, never to skill directory or user's project\r\n- **Parameterize URLs** - Put detected/provided URL in a `TARGET_URL` constant at the top of every script\r\n- **DEFAULT: Visible browser** - Always use `headless: false` unless user explicitly asks for headless mode\r\n- **Headless mode** - Only use `headless: true` when user specifically requests \"headless\" or \"background\" execution\r\n- **Slow down:** Use `slowMo: 100` to make actions visible and easier to follow\r\n- **Wait strategies:** Use `waitForURL`, `waitForSelector`, `waitForLoadState` instead of fixed timeouts\r\n- **Error handling:** Always use try-catch for robust automation\r\n- **Console output:** Use `console.log()` to track progress and show what's happening"
  }
}

---
name: Playwright Browser Automation
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.
version: 4.0.0
author: Claude Assistant
tags: [testing, automation, browser, e2e, playwright, web-testing]
---

**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:
- Plugin system: `~/.claude/plugins/marketplaces/playwright-skill/skills/playwright-skill`
- Manual global: `~/.claude/skills/playwright-skill`
- Project-specific: `<project>/.claude/skills/playwright-skill`

# 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:
   ```bash
   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)

```bash
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)**

```bash
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**

```javascript
// /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**

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

## Common Patterns

### Test a Page (Multiple Viewports)

```javascript
// /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

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

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

(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@example.com');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button[type="submit"]');

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

  await browser.close();
})();
```

### Fill and Submit Form

```javascript
// /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

```javascript
const { chromium } = require('playwright');

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

  await page.goto('http://localhost:3000');

  const links = await page.locator('a[href^="http"]').all();
  const results = { working: 0, broken: [] };

  for (const link of links) {
    const href = await link.getAttribute('href');
    try {
      const response = await page.request.head(href);
      if (response.ok()) {
        results.working++;
      } else {
        results.broken.push({ url: href, status: response.status() });
      }
    } catch (e) {
      results.broken.push({ url: href, error: e.message });
    }
  }

  console.log(`✅ Working links: ${results.working}`);
  console.log(`❌ Broken links:`, results.broken);

  await browser.close();
})();
```

### Take Screenshot with Error Handling

```javascript
const { chromium } = require('playwright');

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

  try {
    await page.goto('http://localhost:3000', {
      waitUntil: 'networkidle',
      timeout: 10000
    });

    await page.screenshot({
      path: '/tmp/screenshot.png',
      fullPage: true
    });

    console.log('📸 Screenshot saved to /tmp/screenshot.png');
  } catch (error) {
    console.error('❌ Error:', error.message);
  } finally {
    await browser.close();
  }
})();
```

### Test Responsive Design

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

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

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

  const viewports = [
    { name: 'Desktop', width: 1920, height: 1080 },
    { name: 'Tablet', width: 768, height: 1024 },
    { name: 'Mobile', width: 375, height: 667 }
  ];

  for (const viewport of viewports) {
    console.log(`Testing ${viewport.name} (${viewport.width}x${viewport.height})`);

    await page.setViewportSize({
      width: viewport.width,
      height: viewport.height
    });

    await page.goto(TARGET_URL);
    await page.waitForTimeout(1000);

    await page.screenshot({
      path: `/tmp/${viewport.name.toLowerCase()}.png`,
      fullPage: true
    });
  }

  console.log('✅ All viewports tested');
  await browser.close();
})();
```

## Inline Execution (Simple Tasks)

For quick one-off tasks, you can execute code inline without creating files:

```bash
# Take a quick screenshot
cd $SKILL_DIR && node run.js "
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
await page.goto('http://localhost:3001');
await page.screenshot({ path: '/tmp/quick-screenshot.png', fullPage: true });
console.log('Screenshot saved');
await browser.close();
"
```

**When to use inline vs files:**
- **Inline**: Quick one-off tasks (screenshot, check if element exists, get page title)
- **Files**: Complex tests, responsive design checks, anything user might want to re-run

## Available Helpers

Optional utility functions in `lib/helpers.js`:

```javascript
const helpers = require('./lib/helpers');

// Detect running dev servers (CRITICAL - use this first!)
const servers = await helpers.detectDevServers();
console.log('Found servers:', servers);

// Safe click with retry
await helpers.safeClick(page, 'button.submit', { retries: 3 });

// Safe type with clear
await helpers.safeType(page, '#username', 'testuser');

// Take timestamped screenshot
await helpers.takeScreenshot(page, 'test-result');

// Handle cookie banners
await helpers.handleCookieBanner(page);

// Extract table data
const data = await helpers.extractTableData(page, 'table.results');
```

See `lib/helpers.js` for full list.

## Advanced Usage

For comprehensive Playwright API documentation, see [API_REFERENCE.md](API_REFERENCE.md):

- Selectors & Locators best practices
- Network interception & API mocking
- Authentication & session management
- Visual regression testing
- Mobile device emulation
- Performance testing
- Debugging techniques
- CI/CD integration

## Tips

- **CRITICAL: Detect servers FIRST** - Always run `detectDevServers()` before writing test code for localhost testing
- **Use /tmp for test files** - Write to `/tmp/playwright-test-*.js`, never to skill directory or user's project
- **Parameterize URLs** - Put detected/provided URL in a `TARGET_URL` constant at the top of every script
- **DEFAULT: Visible browser** - Always use `headless: false` unless user explicitly asks for headless mode
- **Headless mode** - Only use `headless: true` when user specifically requests "headless" or "background" execution
- **Slow down:** Use `slowMo: 100` to make actions visible and easier to follow
- **Wait strategies:** Use `waitForURL`, `waitForSelector`, `waitForLoadState` instead of fixed timeouts
- **Error handling:** Always use try-catch for robust automation
- **Console output:** Use `console.log()` to track progress and show what's happening

## Troubleshooting

**Playwright not installed:**
```bash
cd $SKILL_DIR && npm run setup
```

**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 })`

## Example Usage

```
User: "Test if the marketing page looks good"

Claude: I'll test the marketing page across multiple viewports. Let me first detect running servers...
[Runs: detectDevServers()]
[Output: Found server on port 3001]
I found your dev server running on http://localhost:3001

[Writes custom automation script to /tmp/playwright-test-marketing.js with URL parameterized]
[Runs: cd $SKILL_DIR && node run.js /tmp/playwright-test-marketing.js]
[Shows results with screenshots from /tmp/]
```

```
User: "Check if login redirects correctly"

Claude: I'll test the login flow. First, let me check for running servers...
[Runs: detectDevServers()]
[Output: Found servers on ports 3000 and 3001]
I found 2 dev servers. Which one should I test?
- http://localhost:3000
- http://localhost:3001

User: "Use 3001"

[Writes login automation to /tmp/playwright-test-login.js]
[Runs: cd $SKILL_DIR && node run.js /tmp/playwright-test-login.js]
[Reports: ✅ Login successful, redirected to /dashboard]
```

## Notes

- Each automation is custom-written for your specific request
- Not limited to pre-built scripts - any browser task possible
- Auto-detects running dev servers to eliminate hardcoded URLs
- Test scripts written to `/tmp` for automatic cleanup (no clutter)
- Code executes reliably with proper module resolution via `run.js`
- Progressive disclosure - API_REFERENCE.md loaded only when advanced features needed