browser-qa

Drive a real browser to verify web UI behavior with screenshots and accessibility-tree evidence.

33|5|Updated Feb 28, 2026
One-click install
npx skills add https://github.com/kylesnowschwartz/ralph-ban --skill browser-qa-kylesnowschwartz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: browser-qa
Source: https://github.com/kylesnowschwartz/ralph-ban/tree/main/skills/browser-qa
Command: npx skills add https://github.com/kylesnowschwartz/ralph-ban --skill browser-qa-kylesnowschwartz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It eliminates uncertainty about whether a web UI change actually works by running end-to-end verification in a real browser and collecting proof of what happened.

Core Features & Use Cases

  • What it verifies: Confirms behavior for a specific scope (or infers scope from the latest changes) by navigating, interacting, and validating outcomes.
  • How it tests: Starts the project dev server, waits for readiness by polling the URL, then drives the UI via a detected browser driver (agent-browser, Playwright CLI, or Chrome via MCP).
  • Evidence it produces: Captures screenshots plus accessibility-tree snapshots before and after key actions, along with console output, saved in an oracle transcript directory for PASS/FAIL reporting.
  • Typical use cases: QA browser changes, validate critical user flows (login, checkout, dashboards), check responsive/layout behavior, and record reproducible failures with stable a11y evidence.

Quick Start

Use the browser-qa skill to verify a change scope called "checkout flow" by running it with the argument checkout flow.

Frequently Asked Questions about browser-qa

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run end-to-end QA for web UI changes and capture browser evidence?

End-to-end QA for web UI changes runs by auto-starting a dev server, driving a real browser through navigation and interactions, and capturing screenshots with accessibility-tree snapshots as deterministic evidence for PASS/FAIL reporting.

What's the best way to verify a checkout flow works after a UI change?

To verify a checkout flow, you run browser automation against a specific scope by starting the dev server, polling for readiness, interacting with the UI, and validating post-action assertions against observed UI state.

Does browser-qa work with Playwright or Chrome for UI verification?

UI verification works with Playwright CLI, agent-browser, or Chrome via MCP by detecting an available browser driver, applying interactions, and validating post-action assertions to confirm web app behavior.

How do I capture accessibility snapshots and screenshots during e2e testing?

Accessibility snapshots and screenshots are captured before and after key browser automation actions, alongside console output, and saved into an oracle transcript directory to record reproducible failures with stable a11y evidence.

Can I validate responsive layout behavior using a real browser without manual setup?

Responsive layout behavior is validated automatically by starting the project dev server, polling the URL for readiness, and driving the UI via a detected browser driver without requiring manual server lifecycle management.

Why does my dev server need readiness polling before running browser automation tests?

Dev server readiness polling ensures the URL is responsive before browser automation begins, preventing false UI verification failures and enabling robust server lifecycle management with teardown traps for reliable e2e QA.