coding: Command for Claude Code

Playwright CLI Skill

Drive a real Chromium browser from the bash_tool using Playwright (Node.js). No MCP server needed.

---

1. Environment Setup

Always run this check first. It's fast and idempotent.

# Check Node + npx availability
node --version && npx --version

# Check if playwright is available; install if not
if ! npx playwright --version 2>/dev/null; then
  echo "Installing Playwright..."
  npm install -D playwright 2>&1 | tail -5
  npx playwright install chromium 2>&1 | tail -10
fi

If npm install fails due to network restrictions, inform the user that Playwright must be pre-installed in their environment.

Working directory: Write scripts to /tmp/pw-scripts/ and run from there. For E2E test specs, use the project's tests/e2e/ directory structure.

---

2. Script Patterns

Write a Node.js script, save it, run it with node. Always use these boilerplate patterns:

Boilerplate (all scripts)

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

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

  try {
    // --- your task here ---
  } catch (err) {
    console.error('Error:', err.message);
    process.exit(1);
  } finally {
    await browser.close();
  }
})();

Screenshot

await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.screenshot({ path: '/tmp/pw-scripts/screenshot.png', fullPage: true });
console.log('Screenshot saved.');

PDF

await page.goto('https://example.com', { waitUntil: 'networkidle' });
await page.pdf({ path: '/tmp/pw-scripts/output.pdf', format: 'A4' });
console.log('PDF saved.');

Web Scraping

await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });

// Wait for a key element if needed
await page.waitForSelector('.content', { timeout: 10000 });

const data = await page.evaluate(() => {
  // Run in browser context — return serialisable data
  return Array.from(document.querySelectorAll('h2')).map(el => el.textContent.trim());
});

console.log(JSON.stringify(data, null, 2));