browser

Files (1)

• SKILL.md

SKILL.md (first lines)

# 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:

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

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

### Mode C — Persistent test (for web apps)

If the user is building a web app and wants E2E tests:

```bash
# Scaffold Playwright test framework
npm init playwright@latest

# Generates playwright.config.ts and tests/ directory
# Run with:
npx playwright test
```

Then write test specs in `tests/*.spec.ts`.

### Mode D — Form fill + auth flow

Same pattern as Mode B, plus `page.fill` / `page.click` for the login form. Credentials come from env, never from hardcoded strings or the command line:

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

const loginUrl = process.argv[2];
const targetUrl = process.argv[3];
if (!loginUrl || !targetUrl) {
  console.error('usage: node devkit-browser-auth.mjs <login_url> <target_url>');
  process.exit(2);
}

const browser = await chromium.launch();
let exitCode = 0;
try {
  const page = await browser.newPage();
  await page.goto(loginUrl);
  await page.fill('input[name="email"]', process.env.EMAIL);
  await page.fill('input[name="password"]', process.env.PASSWORD);
  await page.click('button[type="submit"]');
  await page.waitForURL('**/dashboard');

  await page.goto(targetUrl);
  const content = await page.content();
  console.log(content);
} catch (err) {
  console.error('auth flow failed:', err.message);
  exitCode = 1;

From 5uck1ess/devkit, MIT.

More from 5uck1ess/devkit