Full browser UAT for web apps — Playwright testing with console/network error capture, accessibility checks, i18n validation, and bug triage.
An Agent Skill for Claude Code that runs comprehensive User Acceptance Testing on any web application using Playwright.
npx skills add mecabots/webapp-uatWhen you say "run UAT on my app", this skill:
- Discovers your screens — reads your routes, pages, and navigation to build a test checklist
- Launches Playwright — navigates each screen in a real Chromium browser
- Captures everything — console errors, network failures, page crashes, rendering bugs
- Validates quality — accessibility (WCAG 2.2 AA), i18n, empty/placeholder data, responsive layout
- Generates a report — per-screen scores, bug list with severity, overall health score
/webapp-uat full # Test all screens
/webapp-uat /dashboard # Test a specific screen
/webapp-uat Home Settings # Test named screens
This skill is read-only — it reports bugs but cannot modify your code. After reviewing the report, ask the agent to fix specific issues in normal conversation.
Works with any web framework:
- React (CRA, Vite, Next.js)
- Vue (Vite, Nuxt)
- Angular
- Svelte (SvelteKit)
- Ionic / Capacitor (hybrid mobile)
- Plain HTML/JS
- Console errors (zero-tolerance)
- Network failures (4xx, 5xx)
- Accessibility: headings, landmarks, skip links, alt text, focus management, form labels
- i18n: broken keys, unresolved placeholders, missing translations
- Data integrity: no "NaN", "undefined", "[object Object]", infinite loading
- Responsive: no horizontal overflow on mobile viewports
| Function | Purpose |
|---|---|
setupErrorCapture(page) |
Captures console errors, network failures, page crashes |
screenshot(page, name) |
Takes labeled full-page screenshots |
waitForSettle(page, ms) |
Waits for network idle + rendering |
checkBrokenI18n(page) |
Detects raw i18n keys and unresolved placeholders |
checkA11y(page) |
WCAG 2.2 AA basics (headings, landmarks, ARIA, forms) |
checkEmptyData(page) |
Finds placeholder values in data elements |
checkResponsiveOverflow(page) |
Detects broken mobile layouts |
printReport(screen, checks, errors) |
Formats per-screen results |
printSummary(errors, results) |
Formats final UAT summary |
Create uat.config.js in your project root for repeatable runs. See SKILL.md for the full config reference.
Three options for authenticated testing:
- Interactive login —
node assets/login-helper.jsopens a browser for manual login - Saved state — reuse a
storageStateJSON file from a previous session - Programmatic — define a login function in
uat.config.js
Bugs are classified by severity:
| Severity | Examples |
|---|---|
| P0 Blocker | App won't load, data loss, complete screen failure |
| P1 High | Feature broken, wrong data displayed, accessibility barrier |
| P2 Medium | Visual glitch, fallback data shown, minor a11y issue |
| P3 Low | Cosmetic, console warning, edge case |
All findings are reported with severity, affected file, and root cause. To fix issues, ask the agent after reviewing the report.
This skill navigates web pages and reads their DOM content, console output, and network responses. Ingesting third-party content is inherent to its purpose — a UAT skill that cannot read page content cannot perform UAT.
Mitigations in place:
- Read-only — no Edit or Write tools are granted. The skill cannot modify any files
- All
page.evaluate()returns are sanitized and truncated at the Node.js boundary before the agent sees them - Result arrays are capped (max 50 items) to prevent bulk DOM exfiltration
- The agent is instructed to never interpret captured content as instructions
Inherent risk: This skill navigates web pages and reads DOM content — this is its core function and cannot be eliminated. It is designed for testing your own applications on localhost, not for auditing untrusted third-party websites.
Battle-tested across 200+ UAT cycles on a production crypto platform with 11 screens, 6 locales, and WCAG 2.2 AA compliance requirements. Abstracted into a generic skill for any web application.
MIT