Browser QA — Automated Visual Testing & Interaction
## When to Use
Best use case
Browser QA — Automated Visual Testing & Interaction is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
## When to Use
Teams using Browser QA — Automated Visual Testing & Interaction should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/browser-qa/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How Browser QA — Automated Visual Testing & Interaction Compares
| Feature / Agent | Browser QA — Automated Visual Testing & Interaction | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
## When to Use
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Browser QA — Automated Visual Testing & Interaction ## When to Use - After deploying a feature to staging/preview - When you need to verify UI behavior across pages - Before shipping — confirm layouts, forms, interactions actually work - When reviewing PRs that touch frontend code - Accessibility audits and responsive testing ## How It Works Uses the browser automation MCP (claude-in-chrome, Playwright, or Puppeteer) to interact with live pages like a real user. ### Phase 1: Smoke Test ``` 1. Navigate to target URL 2. Check for console errors (filter noise: analytics, third-party) 3. Verify no 4xx/5xx in network requests 4. Screenshot above-the-fold on desktop + mobile viewport 5. Check Core Web Vitals: LCP < 2.5s, CLS < 0.1, INP < 200ms ``` ### Phase 2: Interaction Test ``` 1. Click every nav link — verify no dead links 2. Submit forms with valid data — verify success state 3. Submit forms with invalid data — verify error state 4. Test auth flow: login → protected page → logout 5. Test critical user journeys (checkout, onboarding, search) ``` ### Phase 3: Visual Regression ``` 1. Screenshot key pages at 3 breakpoints (375px, 768px, 1440px) 2. Compare against baseline screenshots (if stored) 3. Flag layout shifts > 5px, missing elements, overflow 4. Check dark mode if applicable ``` ### Phase 4: Accessibility ``` 1. Run axe-core or equivalent on each page 2. Flag WCAG AA violations (contrast, labels, focus order) 3. Verify keyboard navigation works end-to-end 4. Check screen reader landmarks ``` ## Output Format ```markdown ## QA Report — [URL] — [timestamp] ### Smoke Test - Console errors: 0 critical, 2 warnings (analytics noise) - Network: all 200/304, no failures - Core Web Vitals: LCP 1.2s ✓, CLS 0.02 ✓, INP 89ms ✓ ### Interactions - [✓] Nav links: 12/12 working - [✗] Contact form: missing error state for invalid email - [✓] Auth flow: login/logout working ### Visual - [✗] Hero section overflows on 375px viewport - [✓] Dark mode: all pages consistent ### Accessibility - 2 AA violations: missing alt text on hero image, low contrast on footer links ### Verdict: SHIP WITH FIXES (2 issues, 0 blockers) ``` ## Integration Works with any browser MCP: - `mChild__claude-in-chrome__*` tools (preferred — uses your actual Chrome) - Playwright via `mcp__browserbase__*` - Direct Puppeteer scripts Pair with `/canary-watch` for post-deploy monitoring.
Related Skills
visualization-best-practices
Visualization Best Practices - Auto-activating skill for Data Analytics. Triggers on: visualization best practices, visualization best practices Part of the Data Analytics skill category.
performing-visual-regression-testing
This skill enables Claude to execute visual regression tests using tools like Percy, Chromatic, and BackstopJS. It captures screenshots, compares them against baselines, and analyzes visual differences to identify unintended UI changes. Use this skill when the user requests visual testing, UI change verification, or regression testing for a web application or component. Trigger phrases include "visual test," "UI regression," "check visual changes," or "/visual-test".
tensorboard-visualizer
Tensorboard Visualizer - Auto-activating skill for ML Training. Triggers on: tensorboard visualizer, tensorboard visualizer Part of the ML Training skill category.
performing-security-testing
This skill automates security vulnerability testing. It is triggered when the user requests security assessments, penetration tests, or vulnerability scans. The skill covers OWASP Top 10 vulnerabilities, SQL injection, XSS, CSRF, authentication issues, and authorization flaws. Use this skill when the user mentions "security test", "vulnerability scan", "OWASP", "SQL injection", "XSS", "CSRF", "authentication", or "authorization" in the context of application or API testing.
preprocessing-data-with-automated-pipelines
Process automate data cleaning, transformation, and validation for ML tasks. Use when requesting "preprocess data", "clean data", "ETL pipeline", or "data transformation". Trigger with relevant phrases based on skill purpose.
performance-testing
This skill enables Claude to design, execute, and analyze performance tests using the performance-test-suite plugin. It is activated when the user requests load testing, stress testing, spike testing, or endurance testing, and when discussing performance metrics such as response time, throughput, and error rates. It identifies performance bottlenecks related to CPU, memory, database, or network issues. The plugin provides comprehensive reporting, including percentiles, graphs, and recommendations.
performing-penetration-testing
This skill enables automated penetration testing of web applications. It uses the penetration-tester plugin to identify vulnerabilities, including OWASP Top 10 threats, and suggests exploitation techniques. Use this skill when the user requests a "penetration test", "pentest", "vulnerability assessment", or asks to "exploit" a web application. It provides comprehensive reporting on identified security flaws.
neurodivergent-visual-org
Creates ADHD-friendly visual organizational tools using Mermaid diagrams optimized for neurodivergent thinking patterns. Auto-detects overwhelm, provides compassionate task breakdowns with realistic time estimates. Use when creating visual task breakdowns, decision trees, or organizational diagrams for neurodivergent users or accessibility-focused projects. Trigger with 'neurodivergent', 'visual', 'org'.
automating-mobile-app-testing
This skill enables automated testing of mobile applications on iOS and Android platforms using frameworks like Appium, Detox, XCUITest, and Espresso. It generates end-to-end tests, sets up page object models, and handles platform-specific elements. Use this skill when the user requests mobile app testing, test automation for iOS or Android, or needs assistance with setting up device farms and simulators. The skill is triggered by terms like "mobile testing", "appium", "detox", "xcuitest", "espresso", "android test", "ios test".
load-testing-apis
Execute comprehensive load and stress testing to validate API performance and scalability. Use when validating API performance under load. Trigger with phrases like "load test the API", "stress test API", or "benchmark API performance".
testing-load-balancers
This skill enables Claude to test load balancing strategies. It validates traffic distribution across backend servers, tests failover scenarios when servers become unavailable, verifies sticky sessions, and assesses health check functionality. Use this skill when the user asks to "test load balancer", "validate traffic distribution", "test failover", "verify sticky sessions", or "test health checks". It is specifically designed for testing load balancing configurations using the `load-balancer-tester` plugin.
managing-database-testing
This skill manages database testing by generating test data, wrapping tests in transactions, and validating database schemas. It is used to create robust and reliable database interactions. Claude uses this skill when the user requests database testing utilities, including test data generation, transaction management, schema validation, or migration testing. Trigger this skill by mentioning "database testing," "test data factories," "transaction rollback," "schema validation," or using the `/db-test` or `/dbt` commands.