webapp-testing

Web Application Testing

"Testing leads to failure, and failure leads to understanding." -- Burt Rutan

When to Use

• Setting up end-to-end (E2E) testing for web applications
• Writing or reviewing Playwright or Cypress test suites
• Implementing component testing for React, Vue, or Angular components
• Adding visual regression testing to CI/CD pipelines
• Performing accessibility (a11y) audits and automated checks
• Designing test strategies for web applications
• Debugging flaky or slow tests

Testing Strategy Layers

The Testing Pyramid for Web Apps

1. Unit tests (many, fast): Pure logic, utilities, state management, data transforms
2. Component tests (moderate): Render components in isolation, test interactions
3. Integration tests (moderate): Test connected components, API integration, routing
4. E2E tests (few, slow): Critical user journeys through the real application
5. Visual regression (targeted): Screenshot comparison for UI-heavy pages

What to Test at Each Layer

• Unit: Validation logic, formatters, reducers, computed values, utility functions
• Component: Rendering, user interactions, conditional UI, error states, loading states
• Integration: Form submissions, navigation flows, authenticated routes, data fetching
• E2E: Sign-up flow, checkout process, critical business workflows

Playwright

Setup and Configuration

• Install: npm init playwright@latest
• Configure playwright.config.ts with multiple projects for cross-browser testing
• Use webServer config to auto-start your dev server before tests
• Set baseURL to avoid repeating full URLs in every test

Writing Effective Playwright Tests

// Use descriptive test names that explain the user journey
test('user can add item to cart and proceed to checkout', async ({ page }) => {
  await page.goto('/products');
  await page.getByRole('button', { name: 'Add to Cart' }).first().click();
  await page.getByRole('link', { name: 'Cart' }).click();
  await expect(page.getByText('1 item')).toBeVisible();
  await page.getByRole('button', { name: 'Checkout' }).click();
  await expect(page).toHaveURL(/.*checkout/);
});