playwright-skill

IMPORTANT - Path Resolution: Determine the skill directory from where this SKILL.md was loaded. Replace $SKILL_DIR with that path in all commands below.

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

CRITICAL WORKFLOW

Follow these steps in order for every request:

1. Detect dev servers (localhost testing — run this first, always):

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

• 1 server found → use it automatically, inform user
• Multiple found → ask user which one
• None found → ask for URL or offer to start dev server

2. Write script to /tmp — never write to skill directory or user's project:

/tmp/playwright-test-<task>.js

3. Execute via run.js:

cd $SKILL_DIR && node run.js /tmp/playwright-test-<task>.js

Script Template

Every script must follow this structure:

const { chromium } = require('playwright');
const TARGET_URL = 'http://localhost:3001'; // detected or user-provided

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  try {
    // automation here
  } catch (e) {
    console.error('Error:', e.message);
  } finally {
    await browser.close();
  }
})();

Inline Execution

For quick one-off tasks, skip writing a file:

cd $SKILL_DIR && node run.js "
await page.goto('http://localhost:3001');
await page.screenshot({ path: '/tmp/shot.png', fullPage: true });
console.log('Done');
"

Use inline for: screenshots, element checks, page title. Use files for: multi-step flows, responsive tests, anything user might re-run.

Setup

cd $SKILL_DIR && npm run setup

Only needed once. Installs Playwright and Chromium.