test-browser_skill

Overview

This skill runs end-to-end browser tests on pages affected by the current PR or branch using the agent-browser CLI. It detects changed files, maps them to routes, starts or verifies the dev server, and exercises pages in headed or headless mode to catch integration, layout, and runtime issues. It always uses agent-browser commands and never the Chrome MCP tools.

How this skill works

The skill determines test scope from a PR number, branch name, or current diff against main, then maps changed files to a list of routes to test. It detects the development server port, verifies the server is running, and uses agent-browser to open pages, capture snapshots, interact with elements, and take screenshots. Failures are documented, human verification steps are prompted when required, and a concise test summary is produced.

When to use it

• After opening a PR that touches frontend views, components, or assets
• Before merging branches that change UI, layouts, or client-side controllers
• When visual regressions or JavaScript integration bugs are suspected
• When workflows touch external flows requiring human verification (OAuth, payments, email)
• To validate changes in monorepo or Next.js route updates

Best practices

• Always verify agent-browser is installed and run agent-browser install if not
• Ask if the user wants headed or headless mode; use --headed for visible debugging
• Detect the dev server port with explicit flag, CLAUDE.md, package.json, env files, then default to 3000
• Map changed files to routes conservatively and include at least the homepage when layout or stylesheet files changed
• Document failures with screenshots, reproduction steps, and ask how to proceed (fix, todo, or skip)

Example use cases

• Run tests for a PR that modifies a Rails view and associated Stimulus controller to verify interactive behavior
• Validate Next.js route changes after a branch update by mapping src/app changes to URLs
• Smoke test visual regressions after CSS changes by snapshotting key pages
• Confirm third-party flows with human verification prompts (OAuth sign-in, test email delivery)
• Run quick local QA before merging a feature branch using /test-browser --port 5000