browser-qa

Claude Browser QA

AI-powered QA agent for Claude Code. Intelligently browses your web app, discovers every screen and interactive element, tests them systematically, and automatically fixes bugs it finds.

What It Does

• Auto-discovers all navigation routes, forms, buttons, and interactive elements from the DOM
• CRUD lifecycle testing: Creates items, verifies them, edits, deletes — full data interaction
• Action verification: Every button click verified with pre/post state comparison
• Permutation testing: Tests all dropdown options, toggle states, form variations, tabs, and flow branches
• Expectations validation: Analyzes docs and code to build expectations, then validates each with dedicated subagents
• Verifies everything: DOM content, console errors, network failures, visual rendering, accessibility, performance
• Fixes bugs inline by spawning fix agents when issues are found, then re-tests to confirm
• Coverage tracking: 4-dimension coverage (elements, CRUD, actions, permutations) targeting ≥90%
• Targeted workflow testing: test a specific user journey end-to-end with --workflow
• Bug fix cycles: reproduce a known bug, fix it, and validate with --fix
• Records GIF of the test session (optional)

No project-specific configuration needed — it works on any web app.

Prerequisites

1. Claude Code installed
2. Claude in Chrome extension installed and connected
3. Your web app running locally (e.g., npm run dev)

Note: The skill will check for the Chrome extension at startup. If it's not connected, it will show setup instructions and stop — it won't proceed without it.

Install

Option 1: From the Narai Marketplace (recommended)

Add the Narai marketplace to Claude Code, then install the plugin:

/plugin marketplace add narailabs/narai-claude-plugins
/plugin install browser-qa@narai

This installs the plugin with automatic updates when new versions are released.

Option 2: Install plugin directly from GitHub

/plugin install narailabs/claude-browser-qa

Option 3: Manual install (copy into your project)

Copy the skill file into your project's .claude/skills/ directory:

# From your project root
mkdir -p .claude/skills/browser-qa/reference
curl -o .claude/skills/browser-qa/SKILL.md \
  https://raw.githubusercontent.com/narailabs/claude-browser-qa/main/skills/browser-qa/SKILL.md
# Also download reference files for full functionality
for f in testing-layers accessibility performance responsive fix-agents expectations-validation workflow-mode fix-mode interaction-protocol reporting; do
  curl -o .claude/skills/browser-qa/reference/$f.md \
    https://raw.githubusercontent.com/narailabs/claude-browser-qa/main/skills/browser-qa/reference/$f.md
done

Manual install note: With this method you won't get automatic updates. Re-run the commands to update.

Usage

# Broad testing (prompts for mode selection — Full recommended)
/browser-qa http://localhost:3000
/browser-qa http://localhost:5173 --mode full
/browser-qa http://localhost:8080 --mode full --record
/browser-qa http://localhost:3000 --focus "#settings"

# Targeted workflow testing
/browser-qa http://localhost:3000 --workflow "register a new user, then verify the dashboard loads"
/browser-qa http://localhost:3000 --workflow "add item to cart, go to checkout, fill shipping, submit"

# Bug fix cycles
/browser-qa http://localhost:3000 --fix "save button on settings throws a TypeError"
/browser-qa http://localhost:3000 --fix "submitting contact form returns a 500 error"

Modes

Mode	What It Does
full (default)	CRUD lifecycle + action verification + permutations + expectations validation + a11y + perf + responsive + dark mode. Targets ≥90% coverage.
functional	CRUD lifecycle + action verification + form validation + navigation testing. No permutations or a11y/perf/responsive.
smoke	Navigate each screen, verify DOM + console + network, take screenshots. No interactions.
workflow	Test a specific user journey (via --workflow), fix bugs, re-run to verify
fix	Reproduce and fix a known bug (via --fix), validate, regression check

If --mode is not explicitly set, the skill prompts you to choose (Full is recommended).

Options