From frontend-testing
Comprehensive web app testing with Playwright ensuring 100% UI coverage. Automatically crawls entire web app, analyzed the implementation code and captured ALL interactive elements, interacts with EVERY element to reveal hidden UI states, runs comprehensive quality checklist (Deployment, Code Quality, UX, SEO, Function & Layout), and provides concise UI/UX designer review focusing on critical issues only. Generates reports with checklist results and actionable fixes. Uses Claude for post-test design review.
npx claudepluginhub automata-network/claude-plugins --plugin frontend-testingThis skill is limited to using the following tools:
Advanced automated web application testing with Playwright. Automatically discover all pages and interactive elements in your web app, analyzed the implementation code to ensure no UI screens are missed. Capture screenshots with visual regression testing, simulate devices(mobile on iphone 15), perform interactive actions, and generate comprehensive reports with network analysis and code coverage.
Guides strict Test-Driven Development (TDD): write failing tests first for features, bugfixes, refactors before any production code. Enforces red-green-refactor cycle.
Guides systematic root cause investigation for bugs, test failures, unexpected behavior, performance issues, and build failures before proposing fixes.
Guides A/B test setup with mandatory gates for hypothesis validation, metrics definition, sample size calculation, and execution readiness checks.
Advanced automated web application testing with Playwright. Automatically discover all pages and interactive elements in your web app, analyzed the implementation code to ensure no UI screens are missed. Capture screenshots with visual regression testing, simulate devices(mobile on iphone 15), perform interactive actions, and generate comprehensive reports with network analysis and code coverage.
This skill now discovers and tests ALL these interactive element types:
<button>, [role="button"], [onclick], input buttons, submit buttons, class-based buttons<a href> elements (excluding anchors and javascript:)input[type="checkbox"] with check/uncheck actions and state trackinginput[type="radio"] with automatic selection testing<select> with option testing (tests up to 3 options per dropdown)[role="tab"], .tab, [class*="tab"] elements<details><summary>, [aria-expanded], .accordion elements[role="switch"], .toggle, .switch elements[data-toggle="modal"], [aria-haspopup="dialog"] elements[role="menuitem"], .menu-item elementsEach element type is:
Ask me to comprehensively test your web app:
A comprehensive checklist for reviewing frontend implementations to ensure high-quality user experience, proper SEO, and robust functionality.
| Item | Status | Verification Notes |
|---|---|---|
| API call has loading UI | ☐ | Loading indicators (spinners, skeletons, progress bars) displayed during async operations |
| API error has user-friendly message | ☐ | Error messages are clear, actionable, and non-technical for end users |
| All key events are tracking correctly | ☐ | Analytics events fire as expected for user interactions |
| No hardcoded constants that should be config/env variables | ☐ | API keys, endpoints, feature flags moved to environment variables |
| Meaningful naming for files, components, and variables | ☐ | Names are descriptive, follow conventions, and indicate purpose |
| Components small and reusable where possible | ☐ | Components follow single responsibility principle and are DRY |
| Network errors/Abort requests handled gracefully | ☐ | Timeout, abort, and network failure scenarios provide feedback |
| Item | Status | Verification Notes |
|---|---|---|
<title> tag set | ☐ | Unique, descriptive title for each page (50-60 characters) |
| Meta description | ☐ | Compelling description for each page (150-160 characters) |
| Open Graph tags (title, description, image) | ☐ | Social media preview tags configured correctly |
| Favicon included | ☐ | Favicon files present in all required sizes |
| Correct canonical link (if needed) | ☐ | Canonical URLs set to prevent duplicate content issues |
| Semantic HTML structure | ☐ | Proper heading hierarchy (h1-h6), semantic tags used appropriately |
| Item | Status | Verification Notes |
|---|---|---|
| All buttons, links, forms, modals, popovers, dropdowns behave correctly | ☐ | Interactive elements function as expected across scenarios |
| Form validation triggered correctly | ☐ | Client-side validation fires appropriately with clear error messages |
| Basic keyboard & touch area interactions work | ☐ | Tab navigation, Enter/Space keys, minimum 44×44px touch targets |
| No unintended overflow horizontally or vertically | ☐ | Content contained properly, no unexpected scrollbars |
| Consistent and proper spacing, element size, element radius, typography, and colors | ☐ | Design system tokens applied consistently |
| Dark mode supported (if applicable) | ☐ | Theme switching works without visual artifacts |
| Branding included | ☐ | Logo, colors, and brand elements present where appropriate |
| Data/Calculation correct | ☐ | All computed values, aggregations, and transformations are accurate |
| Sticky headers/footers behave properly | ☐ | Fixed/sticky elements don't overlap content or cause layout shift |
| Zoom behavior correct | ☐ | Page remains functional at 200% zoom, text reflows properly |
| Tooltips content display proper location and concise formal content | ☐ | Tooltips positioned correctly, content is brief and professional |
| Interactive component has the right default state and corner cases work fine | ☐ | Initial states correct, edge cases (empty, error, loading) handled |
| Concise title/description | ☐ | Headings and descriptions are clear and to the point |
| Title and content matched | ☐ | Page/section titles accurately reflect the content |
| Element vertical/horizontal alignment correct | ☐ | Visual alignment follows design specs (center, left, right, baseline) |
| Hide browser default scroll bar (if applicable) | ☐ | Custom scrollbar styling applied where needed |
| Item | Status | Verification Notes |
|---|---|---|
| Sufficient color contrast (WCAG AA minimum) | ☐ | Text and interactive elements meet 4.5:1 ratio |
| Focus indicators visible | ☐ | Clear focus states on all interactive elements |
| Alt text for images | ☐ | Descriptive alternative text provided for meaningful images |
| ARIA labels where needed | ☐ | Screen reader labels for icons, dynamic content |
| Form labels properly associated | ☐ | All inputs have visible or aria-label associations |
| Item | Status | Verification Notes |
|---|---|---|
| Images optimized and lazy-loaded | ☐ | Appropriate formats, compressed, loading="lazy" where applicable |
| Bundle size reasonable | ☐ | No unnecessary dependencies, code-splitting implemented |
| No unnecessary re-renders | ☐ | React/framework rendering optimized |
| Debounce/throttle on high-frequency events | ☐ | Scroll, resize, input handlers optimized |
| Item | Status | Verification Notes |
|---|---|---|
| Chrome/Edge (latest) | ☐ | Full functionality verified |
| Firefox (latest) | ☐ | Full functionality verified |
| Safari (latest) | ☐ | Full functionality verified |
| Mobile Safari (iOS) | ☐ | Touch interactions and layout correct |
| Chrome Mobile (Android) | ☐ | Touch interactions and layout correct |
| Responsive breakpoints (mobile, tablet, desktop) | ☐ | Layout adapts properly at all viewport sizes |
Leverage Claude for comprehensive pixel-perfect design analysis using post-test screenshots. This automated review process identifies critical design issues and ensures visual consistency across your application.
screenshots_for_review.jsonClaude examines every UI detail captured in screenshots:
Typography
Colors
Spacing
Visual Details
Accessibility
Claude provides CRITICAL ISSUES ONLY - focusing on blocking design/UX problems:
Issues that severely impact usability or accessibility:
Issues that significantly affect user experience:
Nice-to-have improvements:
Claude provides specific, actionable fixes rather than vague observations:
❌ Avoid: "Button text is too small" ✅ Good: "Button font-size: 16px (currently 12px) - fails touch target minimum"
❌ Avoid: "Colors need work" ✅ Good: "Insufficient color contrast: #666 on #999 (2.8:1) - needs 4.5:1 minimum. Suggest #444 on #999 (5.2:1)"
❌ Avoid: "Spacing seems off" ✅ Good: "Card padding: 24px (currently 16px) - inconsistent with sidebar cards which use 24px"
Claude validates consistency across all screens:
# 1. Run tests with screenshot capture
npm run test:e2e -- --screenshot
# 2. Screenshots exported to screenshots_for_review.json
# 3. Submit to Claude for review
# Upload screenshots_for_review.json to Claude
# 4. Claude generates review file
# design_review_feedback.md with prioritized issues
# 5. Address critical issues first
# Fix 🔴 Critical issues before deployment
# Schedule ⚠️ High Priority fixes for next sprint
| Item | Status | Verification Notes |
|---|---|---|
| Screenshots captured for all key screens | ☐ | Login, dashboard, forms, modals, empty states, error states |
| JSON export generated successfully | ☐ | screenshots_for_review.json created and readable |
| Claude review completed | ☐ | Feedback file received with prioritized issues |
| Critical issues identified | ☐ | All 🔴 Critical items documented |
| High priority issues documented | ☐ | All ⚠️ High Priority items listed |
| Fixes applied and verified | ☐ | Screenshots re-captured to confirm fixes |
| Design system consistency validated | ☐ | Colors, fonts, spacing match design tokens |
| Accessibility requirements met | ☐ | Contrast ratios, touch targets, readability verified |
Use this checklist during code review and QA phases. Check off items as they're verified, and add specific notes for any issues found or special considerations.
For Claude Design Review: Submit your screenshots_for_review.json to Claude with the prompt: "Please perform a pixel-perfect design review focusing on critical and high-priority issues only. Provide specific, actionable fixes."
When you ask me to test your web app, I will:
Setup & Analysis
Comprehensive Testing
Quality Checklist Validation
Picky Designer Review (Automatic)
screenshots_for_review.jsondesign_review.mdGenerate Reports
Everything happens automatically - you just provide the URL!
Complete Test Suite with Screenshot Capture:
python test_runner.py --url http://localhost:3000 --auto-discover --source-dir ./src --ui-coverage --before-after --parallel 4
100% UI Coverage Validation (Analyze Source Code):
python test_runner.py --url http://localhost:3000 --source-dir ./src --ui-coverage --before-after
Auto-Discovery + UI Coverage:
python test_runner.py --url http://localhost:3000 --auto-discover --source-dir ./src --ui-coverage --before-after
Auto-Discovery Mode (Crawl Entire App):
python test_runner.py --url http://localhost:3000 --auto-discover --max-depth 3 --max-pages 100
Auto-Discovery with Visual Regression:
python test_runner.py --url http://localhost:3000 --auto-discover --baseline ./baselines --parallel 4
Ultimate Test Suite (ALL Features):
python test_runner.py --url http://localhost:3000 --source-dir ./src --auto-discover --ui-coverage --before-after --baseline ./baselines --video --network-logs --parallel 4
Visual Regression Testing:
python test_runner.py --url http://localhost:3000 --baseline ./baselines
Parallel Execution:
python test_runner.py --config test_config.yaml --parallel 4
Device Testing:
python test_runner.py --url http://localhost:3000 --device iphone_13
Network Logging:
python test_runner.py --url http://localhost:3000 --network-logs --video
Configuration File:
base_url: "http://localhost:3000"
output_dir: "test_results"
baseline_dir: "baselines"
screenshot_format: "png"
enable_video: true
enable_network_logs: true
enable_coverage: true
device: "iphone_13"
max_parallel: 3
# Auto-discovery settings
auto_discover: true
max_depth: 3
max_pages: 100
# UI Coverage settings
source_dir: "./src"
enable_ui_coverage: true
before_after_screenshots: true
routes:
- route: "/"
name: "home"
description: "Homepage"
- route: "/login"
name: "login"
description: "Login page"
actions:
- type: "fill"
selector: "#username"
value: "testuser"
- type: "fill"
selector: "#password"
value: "testpass"
- type: "click"
selector: "#login-button"
- type: "wait"
ms: 2000
--config, -c Config file (JSON or YAML)
--url Base URL to test
--output, -o Output directory (default: test_results)
--baseline, -b Baseline directory for visual regression
--format, -f Screenshot format: png, jpeg, webp
--video Enable video recording
--network-logs Enable network logging
--coverage Enable code coverage tracking
--device, -d Device preset (use --list-devices to see all)
--network, -n Network preset (use --list-networks to see all)
--parallel, -p Max parallel tests (default: 1)
--auto-discover Automatically discover all pages and interactive elements
--max-depth Max crawl depth for auto-discovery (default: 3)
--max-pages Max pages to discover (default: 100)
--source-dir Source code directory for UI coverage analysis
--ui-coverage Enable UI coverage validation - compare code vs tests
--before-after Take before/after screenshots for each interaction
--list-devices List available device presets
--list-networks List available network presets
screenshots_for_review.json)After tests complete, I automatically review screenshots as a picky UI/UX designer:
design_review.md with actionable fixes onlyI automatically run and report on the following checklist:
<title> tag setPackages must be installed in your environment:
pip install playwright Pillow PyYAML
playwright install chromium
No API keys required! Claude (in your current session) reviews screenshots after test completion.
I'll help you install these if needed.
See EXAMPLES.md for common usage patterns including:
For detailed configuration options and advanced features, see GUIDE.md.