browser

Browser Automation

Drive a real browser via Playwright to interact with pages — click, fill forms, extract data from SPAs, run multi-step flows, or record user interactions.

Use this skill for anything beyond simple article scraping: JS-heavy data extraction, form filling, multi-step auth flows, codegen recording, or E2E testing. For static article→markdown use scrape; for pure image capture use screenshot.

Step 1: Verify Playwright

Run npx playwright --version. If it fails, stop and tell the user: Playwright required — install with: npx playwright install chromium. Do not attempt workarounds.

Step 2: Parse the Request

• Target URL(s) — starting page (validate per Rules before launching)
• Actions — navigate, click, fill, extract, wait
• Data — what fields, what format (JSON usually)
• Auth — are credentials needed? Read from env, never hardcode
• Repeatability — one-off throwaway, or save script for reuse?

If the request is vague ("scrape this site"), clarify which fields, whether login is needed, and whether it'll be re-run.

Step 3: Choose the Right Mode

Mode A — Codegen (recording)

When the user wants to figure out selectors or hand off a repeatable flow:

npx playwright codegen {url}

Opens a browser. User interacts. Playwright prints the equivalent script. Best for:

• Complex pages where selectors aren't obvious
• Building reusable flows
• Teaching users how Playwright works

Mode B — Inline script (one-off)

Write the script to a file that reads args from process.argv, then pass values via shell variables:

cat > /tmp/devkit-browser-flow.mjs <<'EOF'
import { chromium } from 'playwright';

const url = process.argv[2];
if (!url) { console.error('usage: node devkit-browser-flow.mjs <url>'); process.exit(2); }

const browser = await chromium.launch();
let exitCode = 0;
try {
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });

  // Example: extract items from a JS-rendered list
  const data = await page.evaluate(() =>
    Array.from(document.querySelectorAll('.item')).map(el => ({
      title: el.querySelector('h3')?.textContent?.trim(),
      link: el.querySelector('a')?.href,
    }))
  );

  console.log(JSON.stringify(data, null, 2));
} catch (err) {
  console.error('flow failed:', err.message);
  exitCode = 1;
} finally {
  try { await browser.close(); } catch (e) { /* suppress close errors so the real error propagates */ }
}
process.exit(exitCode);
EOF

URL=https://example.com node /tmp/devkit-browser-flow.mjs "$URL"