Web App Testing

​

Overview

​

What This Skill Provides

• Deep Audit Approach: Systematically discover and test all routes
• E2E Testing Principles: Critical user flow testing
• Playwright Expertise: Browser automation and best practices
• Visual Testing: Screenshot comparison strategies
• API Testing: Backend endpoint validation
• CI Integration: Pipeline setup for automated testing
• Automated Scripts: Browser testing with Python/Playwright

​

Key Concepts

​

Deep Audit Approach

1. Map - List all routes/APIs
2. Scan - Verify they respond
3. Test - Cover critical paths

​

Testing Pyramid for Web

        /\          E2E (Few)
       /  \         Critical user flows
      /----\
     /      \       Integration (Some)
    /--------\      API, data flow
   /          \
  /------------\    Component (Many)
                    Individual UI pieces

​

Runtime Scripts

​

Use Cases

​

When to Use This Skill

• Testing web application user flows
• Automating browser-based tests
• Verifying all routes respond correctly
• Implementing E2E test suites
• Setting up CI/CD testing pipelines
• Visual regression testing

​

Example Scenarios

1. Full Audit: “Test all routes in this Next.js application”
2. Critical Flow: “Add E2E tests for the checkout process”
3. Visual Testing: “Detect visual regressions in the UI”
4. Accessibility: “Check WCAG compliance across all pages”

​

E2E Test Principles

​

What to Test

​

Best Practices

​

Playwright Principles

​

Core Concepts

​

Configuration

​

Visual Testing

​

When to Use

​

Strategy

• Baseline screenshots
• Compare on changes
• Review visual diffs
• Update intentional changes

​

API Testing Principles

​

Coverage Areas

​

Test Organization

​

File Structure

tests/
├── e2e/           # Full user flows
├── integration/   # API, data
├── component/     # UI units
└── fixtures/      # Shared data

​

Naming Convention

​

CI Integration

​

Pipeline Steps

1. Install dependencies
2. Install browsers
3. Run tests
4. Upload artifacts (traces, screenshots)

​

Parallelization

​

Anti-Patterns to Avoid

​

Related Skills

• testing-patterns: General testing principles
• tdd-workflow: Test-first development
• web-design-guidelines: UI/UX testing standards
• clean-code: Test code quality

​

Which Agents Use This Skill

• test-engineer: Primary user for E2E testing
• qa-automation-engineer: Automated test development

​

Example Test

import { test, expect } from '@playwright/test';

test('user can complete checkout', async ({ page }) => {
  // Arrange
  await page.goto('/products');
  
  // Act
  await page.click('[data-testid="add-to-cart"]');
  await page.click('[data-testid="checkout"]');
  await page.fill('[data-testid="email"]', '[email protected]');
  await page.click('[data-testid="submit"]');
  
  // Assert
  await expect(page.locator('[data-testid="success"]')).toBeVisible();
});

​

Tools Available

• Read, Write, Edit: For test files
• Glob, Grep: For discovering routes and components
• Bash: For running Playwright commands