screenshot

Web Page Screenshot

Capture screenshots and PDFs of web pages using Playwright.

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 and Validate

Extract from the user's request:

• URL — required; validated below
• Output path — default ./screenshot-{timestamp}.png in cwd
• Capture mode — viewport (default), full-page, element selector
• Device / viewport — optional emulation or custom size
• Format — PNG (default) or PDF

Validate the URL (see Rules for the full list): only http(s), no private/reserved IPs or cloud metadata, no @. On rejection, report the exact reason and stop — never silently skip in a batch.

Step 3: Execute

Choose the command that matches the capture mode. Always quote the URL and output path.

Viewport screenshot:

npx playwright screenshot "{url}" "{output}"

Full-page screenshot:

npx playwright screenshot --full-page "{url}" "{output}"

Custom viewport (format is W,H with no spaces, e.g. 1280,800):

npx playwright screenshot --viewport-size=1280,800 "{url}" "{output}"

Device emulation:

npx playwright screenshot --device="{device}" "{url}" "{output}"

PDF output:

npx playwright pdf "{url}" "{output}.pdf"

Element selector (Playwright CLI doesn't expose this directly, so write a script file and pass args via process.argv — never interpolate user strings into node -e):

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

const [, , url, selector, output] = process.argv;
if (!url || !selector || !output) {
  console.error('usage: node devkit-shot-element.mjs <url> <selector> <output>');
  process.exit(2);
}

const browser = await chromium.launch();
try {
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle', timeout: 30000 });
  await page.locator(selector).screenshot({ path: output });
  console.log(output);
} catch (err) {
  console.error('screenshot failed:', err.message);
  process.exit(1);
} finally {
  try { await browser.close(); } catch (e) { /* suppress close errors */ }
}
EOF

node /tmp/devkit-shot-element.mjs "$URL" "$SELECTOR" "$OUTPUT"