End-to-End Testing

E2E Testing

Master end-to-end testing with Playwright - from user journeys to performance monitoring and accessibility validation

E2E Testing Categories

User Journey Testing

Complete user workflows from start to finish

  • Complete todo workflow
  • Form submission flows
  • Navigation between pages
  • Mobile responsive flows

Cross-Browser Testing

Ensure compatibility across different browsers

  • Chrome, Firefox, Safari testing
  • Mobile browser testing
  • Feature compatibility
  • Performance across browsers

Performance Testing

Load time, interaction metrics, and optimization

  • Core Web Vitals monitoring
  • Page load performance
  • JavaScript execution time
  • Memory usage tracking

Accessibility Testing

Automated accessibility checks and workflows

  • Screen reader navigation
  • Keyboard-only workflows
  • ARIA attributes validation
  • Color contrast testing

Interactive Examples

Code Example

// user-journey.test.ts
import { expect, test } from '@playwright/test';

test('complete user workflow', async ({ page }) => {
  // Navigate to app
  await page.goto('/');
  await page.getByRole('link', { name: 'Todo Manager' }).click();
  
  // Add new todo
  await page.getByRole('textbox', { name: /add todo/i }).fill('Buy groceries');
  await page.getByRole('button', { name: /add/i }).click();
  
  // Mark as complete
  await page.getByRole('checkbox').check();
  
  // Verify completion
  await expect(page.getByText('Buy groceries')).toHaveClass(/line-through/);
});

Key Concepts

  • Complete Workflows: Test entire user journeys from start to finish
  • State Persistence: Verify data persists across page navigation
  • Error Recovery: Test graceful handling of failures and edge cases

Live E2E Test Examples

This project includes comprehensive E2E tests that you can run and explore

Homepage Tests

Basic navigation and content verification

Coverage:

NavigationContent renderingResponsive design
e2e/homepage.spec.ts

Smoke Tests

Critical functionality verification

Coverage:

Page loadingError handling404 pages
e2e/smoke-test.spec.ts

API Integration

Frontend-backend communication testing

Coverage:

API responsesError handlingAuthentication
e2e/api.spec.ts

Performance Tests

Core Web Vitals and loading performance

Coverage:

Load timesJavaScript performanceMemory usage
e2e/performance.spec.ts

Accessibility Tests

Automated accessibility validation

Coverage:

ARIA attributesKeyboard navigationScreen readers
e2e/accessibility.spec.ts

Advanced Scenarios

Complex user workflows and edge cases

Coverage:

Network failuresConcurrent actionsBrowser navigation
e2e/advanced-scenarios.spec.ts

E2E Testing Best Practices

Test Real User Scenarios

Focus on actual user workflows and business-critical paths

Stable Selectors

Use data-testid attributes and semantic selectors for reliability

Performance Monitoring

Continuously monitor Core Web Vitals and loading performance

Cross-Platform Testing

Test across different browsers, devices, and screen sizes

Running E2E Tests

Quick Start

Get started with E2E testing in this project with these simple commands

// basic-e2e.test.ts
import { expect, test } from '@playwright/test';

test('homepage loads correctly', async ({ page }) => {
  await page.goto('/');
  
  await expect(page.getByRole('heading', { name: 'Sveltest' })).toBeVisible();
  await expect(page.getByText('Modern testing patterns')).toBeVisible();
});

Configuration

E2E tests are configured with Playwright for maximum reliability and cross-browser support

  • Chromium, Firefox, and WebKit support
  • Mobile device emulation
  • Automatic screenshots on failure
  • Parallel test execution

Explore More Testing Patterns

Continue your testing journey with our comprehensive documentation and component examples

View Documentation Component Showcase