browse

Browse

Role: worker. This command provides browser-based interaction for visual verification and e2e testing.

You have been invoked with the /browse command.

Worker constraints

1. Drive the browser only; do not edit source.
2. Capture evidence (screenshots/logs); do not assert pass/fail beyond what was observed.
3. Be concise. Report observations and artifacts, no preamble.

Parse Arguments

Arguments: $ARGUMENTS

• Positional: <url> (required) — the URL to navigate to
• --screenshot <path>: Save screenshot to this path (default: tmp/screenshots/<timestamp>.png)
• --click <selector>: CSS selector to click after page load
• --fill <selector> <value>: CSS selector and value for form input (can be repeated)
• --wait <ms>: Wait this many milliseconds after page load (default: 1000)
• --viewport <WxH>: Viewport dimensions (default: 1280x720)

Steps

1. Check Playwright availability

Run:

npx playwright --version 2>/dev/null

If Playwright is not available, ask the user:

Playwright is required for browser interaction. Run /project-init to set up this repo's tooling (installs Playwright + Chromium for frontend projects), or install it directly now:

npx playwright install chromium

Do not proceed until Playwright is confirmed available.

2. Ensure screenshot directory exists

mkdir -p tmp/screenshots

3. Execute browser action

Write a temporary Node.js script and execute it with node. Use Playwright's API directly for reliable, scriptable interaction.

Template (adapt based on parsed arguments):

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

(async () => {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    viewport: { width: VIEWPORT_WIDTH, height: VIEWPORT_HEIGHT }
  });
  const page = await context.newPage();

  try {
    await page.goto('URL', { waitUntil: 'networkidle', timeout: 30000 });
    await page.waitForTimeout(WAIT_MS);

    // -- Click actions (if --click provided) --
    // await page.click('SELECTOR');

    // -- Fill actions (if --fill provided) --
    // await page.fill('SELECTOR', 'VALUE');

    // -- Screenshot --
    await page.screenshot({ path: 'SCREENSHOT_PATH', fullPage: true });

    console.log('Screenshot saved to: SCREENSHOT_PATH');
    console.log('Page title:', await page.title());
    console.log('Page URL:', page.url());
  } catch (err) {
    console.error('Browser error:', err.message);
    // Take a screenshot of the error state if possible
    try {
      await page.screenshot({ path: 'SCREENSHOT_PATH', fullPage: true });
      console.log('Error-state screenshot saved to: SCREENSHOT_PATH');
    } catch {}
  } finally {
    await browser.close();
  }
})();