🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
BytesAgain β€Ί Skills β€Ί Browser QA
πŸ¦€ ClawHub

Browser QA

by @djc00p

Automate visual testing and UI interaction verification. 4-phase methodology: smoke test (console errors, network status, Web Vitals), interaction test (form...

Versionv1.0.1
Downloads604
Installs4
Stars⭐ 1
#legal#automation
TERMINAL
clawhub install browser-qa

πŸ“– About This Skill

name: browser-qa description: "Automate visual testing and UI interaction verification. 4-phase methodology: smoke test (console errors, network status, Web Vitals), interaction test (forms, auth, user journeys), visual regression (breakpoints, dark mode), accessibility audit (WCAG AA, keyboard nav). Trigger phrases: browser test, visual testing, UI verification, QA checklist, pre-ship testing." metadata: {"clawdbot":{"emoji":"πŸ§ͺ","requires":{"bins":[],"env":[]},"os":["linux","darwin","win32"]}}

Browser QA β€” Automated Visual Testing & Interaction

Structured QA methodology for verifying UI behavior, visual consistency, and accessibility.

Quick Start

1. Phase 1: Smoke Test β€” Navigate page, check for console errors, verify Core Web Vitals 2. Phase 2: Interaction Test β€” Click links, submit forms, verify user flows (login, checkout) 3. Phase 3: Visual Regression β€” Screenshot key pages at 3 breakpoints (375px, 768px, 1440px) 4. Phase 4: Accessibility β€” Run axe-core, verify keyboard nav, check screen reader landmarks

Key Concepts

  • Smoke Test: Detects hard-breaking errors before interaction testing wastes time
  • Interaction Test: Verifies critical user journeys (auth, forms, checkout)
  • Visual Regression: Detects layout shifts, missing elements, viewport overflow issues
  • Accessibility: WCAG AA compliance, keyboard navigation, screen reader support

    • Common Usage

    Phase 1: Smoke Test

    1. Navigate to target URL
2. Check for console errors (filter analytics noise)
3. Verify no 4xx/5xx in network requests
4. Screenshot above-the-fold (desktop + mobile)
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 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 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

    ## 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, low contrast footer links
    • Verdict: SHIP WITH FIXES (2 issues, 0 blockers)

    References

  • references/tools.md β€” browser automation tools (claude-in-chrome, Playwright, Puppeteer)
  • references/wcag.md β€” WCAG AA checklist and common violations

    • Adapted from everything-claude-code by @affaan-m (MIT)

    πŸ’‘ Examples

    1. Phase 1: Smoke Test β€” Navigate page, check for console errors, verify Core Web Vitals 2. Phase 2: Interaction Test β€” Click links, submit forms, verify user flows (login, checkout) 3. Phase 3: Visual Regression β€” Screenshot key pages at 3 breakpoints (375px, 768px, 1440px) 4. Phase 4: Accessibility β€” Run axe-core, verify keyboard nav, check screen reader landmarks