E2E Testing

Problem

Critical user journeys like checkout, signup, or data submission break in production despite passing unit tests. Network timing issues, browser-specific quirks, or third-party service failures cause workflows to fail in ways that isolated tests can’t detect.

Solution

Test complete user workflows through the actual UI and backend integration to verify the system works end-to-end. This catches issues at integration points that unit tests miss.

Example

This example demonstrates an end-to-end test that simulates a complete user checkout flow from browsing products to order confirmation.

test('user can complete checkout', async () => {
  // Navigate to products page
  await page.goto('/products');
  // Simulate user adding item to cart
  await page.click('[data-testid="add-to-cart"]');
  // Click checkout button
  await page.click('[data-testid="checkout"]');
  // Fill in checkout form
  await page.fill('#email', 'user@example.com');
  // Submit the order
  await page.click('[data-testid="submit"]');
  // Verify user reached confirmation page
  await expect(page).toHaveURL('/confirmation');
});

Benefits

• Catches integration issues that unit and component tests miss.
• Verifies complete user journeys work in real browser environments.
• Tests actual user interactions including network requests and timing.
• Provides confidence that critical workflows function correctly.
• Can catch browser-specific bugs and compatibility issues.

Tradeoffs

• Significantly slower than unit tests, making them unsuitable for rapid feedback.
• Flaky tests due to timing issues, network conditions, or test environment.
• Expensive to write and maintain compared to unit tests.
• Requires additional infrastructure for browsers and test environments.
• Failures can be hard to debug without clear error messages.