Part 5: End-to-End Testing

Introduction

End-to-end (E2E) tests validate complete user workflows through your entire system—from the browser UI through APIs, services, and databases. While slower than unit or integration tests, E2E tests provide the highest confidence that your application works from a user's perspective.

In my TypeScript microservices, E2E tests have caught issues that lower-level tests missed: UI/API integration bugs, authentication flows, complex user journeys, and cross-service interactions.

Why E2E Testing?

E2E tests verify:

• Complete user workflows - Login, checkout, data submission

• UI/API integration - Frontend correctly calls backend

• Cross-service communication - Microservices work together

• Real browser behavior - JavaScript execution, rendering, events

• Visual regressions - UI looks correct

When to Write E2E Tests

I write E2E tests for:

• Critical business workflows (user registration, payment)

• Complex multi-step processes

• Features involving multiple services

• User-facing functionality

I don't write E2E tests for:

• Every possible scenario (too slow and brittle)

• Logic already covered by unit tests

• Edge cases (handle those in unit/integration tests)

Playwright for E2E Testing

I use Playwright for its reliability, speed, and excellent TypeScript support.

Installation:

npm install --save-dev @playwright/test
npx playwright install

playwright.config.ts:

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],

  webServer: {
    command: 'npm run start:test',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

Basic E2E Test Example

User Registration Flow

e2e/user-registration.spec.ts:

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

test.describe('User Registration', () => {
  test('should register new user successfully', async ({ page }) => {
    // Navigate to registration page
    await page.goto('/register');

    // Fill form
    await page.fill('input[name="email"]', '[email protected]');
    await page.fill('input[name="name"]', 'New User');
    await page.fill('input[name="password"]', 'SecureP@ss123');
    await page.fill('input[name="confirmPassword"]', 'SecureP@ss123');

    // Submit form
    await page.click('button[type="submit"]');

    // Wait for redirect to dashboard
    await page.waitForURL('/dashboard');

    // Verify welcome message
    await expect(page.locator('h1')).toContainText('Welcome, New User');
  });

  test('should show error for existing email', async ({ page }) => {
    await page.goto('/register');

    // Use email that already exists
    await page.fill('input[name="email"]', '[email protected]');
    await page.fill('input[name="name"]', 'Test User');
    await page.fill('input[name="password"]', 'SecureP@ss123');
    await page.fill('input[name="confirmPassword"]', 'SecureP@ss123');

    await page.click('button[type="submit"]');

    // Verify error message
    await expect(page.locator('.error-message')).toContainText(
      'Email already exists'
    );

    // Should stay on registration page
    await expect(page).toHaveURL('/register');
  });

  test('should validate password match', async ({ page }) => {
    await page.goto('/register');

    await page.fill('input[name="email"]', '[email protected]');
    await page.fill('input[name="name"]', 'Test User');
    await page.fill('input[name="password"]', 'SecureP@ss123');
    await page.fill('input[name="confirmPassword"]', 'DifferentP@ss456');

    await page.click('button[type="submit"]');

    await expect(page.locator('.error-message')).toContainText(
      'Passwords do not match'
    );
  });

  test('should validate email format', async ({ page }) => {
    await page.goto('/register');

    await page.fill('input[name="email"]', 'invalid-email');
    await page.fill('input[name="name"]', 'Test User');
    await page.fill('input[name="password"]', 'SecureP@ss123');

    // Trigger validation by blurring the field
    await page.locator('input[name="name"]').click();

    await expect(page.locator('input[name="email"]')).toHaveAttribute(
      'aria-invalid',
      'true'
    );
  });
});

Testing Authentication Flow

e2e/authentication.spec.ts:

// e2e/authentication.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Authentication', () => {
  test('should login with valid credentials', async ({ page }) => {
    await page.goto('/login');

    await page.fill('input[name="email"]', '[email protected]');
    await page.fill('input[name="password"]', 'SecureP@ss123');
    await page.click('button[type="submit"]');

    await page.waitForURL('/dashboard');
    
    // Verify authenticated state
    await expect(page.locator('[data-testid="user-menu"]')).toBeVisible();
    await expect(page.locator('[data-testid="user-email"]')).toContainText(
      '[email protected]'
    );
  });

  test('should show error for invalid credentials', async ({ page }) => {
    await page.goto('/login');

    await page.fill('input[name="email"]', '[email protected]');
    await page.fill('input[name="password"]', 'WrongPassword');
    await page.click('button[type="submit"]');

    await expect(page.locator('.error-message')).toContainText(
      'Invalid credentials'
    );
  });

  test('should logout successfully', async ({ page }) => {
    // Login first
    await page.goto('/login');
    await page.fill('input[name="email"]', '[email protected]');
    await page.fill('input[name="password"]', 'SecureP@ss123');
    await page.click('button[type="submit"]');
    await page.waitForURL('/dashboard');

    // Logout
    await page.click('[data-testid="user-menu"]');
    await page.click('[data-testid="logout-button"]');

    // Should redirect to login
    await page.waitForURL('/login');

    // Verify logged out state
    await expect(page.locator('[data-testid="user-menu"]')).not.toBeVisible();
  });

  test('should redirect unauthenticated users to login', async ({ page }) => {
    // Try to access protected page without logging in
    await page.goto('/dashboard');

    // Should redirect to login
    await page.waitForURL('/login');
    
    // Should have return URL parameter
    expect(page.url()).toContain('returnUrl=%2Fdashboard');
  });

  test('should return to original page after login', async ({ page }) => {
    // Try to access protected page
    await page.goto('/dashboard');
    
    // Redirected to login
    await page.waitForURL(/\/login/);

    // Login
    await page.fill('input[name="email"]', '[email protected]');
    await page.fill('input[name="password"]', 'SecureP@ss123');
    await page.click('button[type="submit"]');

    // Should return to dashboard
    await page.waitForURL('/dashboard');
  });
});

Testing Complex Workflows

E-commerce Checkout Flow

e2e/checkout.spec.ts:

// e2e/checkout.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Checkout Flow', () => {
  test.beforeEach(async ({ page }) => {
    // Login before each test
    await page.goto('/login');
    await page.fill('input[name="email"]', '[email protected]');
    await page.fill('input[name="password"]', 'SecureP@ss123');
    await page.click('button[type="submit"]');
    await page.waitForURL('/dashboard');
  });

  test('should complete full checkout process', async ({ page }) => {
    // Navigate to products
    await page.goto('/products');

    // Add product to cart
    await page.click('[data-testid="product-1"] button:has-text("Add to Cart")');
    
    // Verify cart badge updates
    await expect(page.locator('[data-testid="cart-count"]')).toContainText('1');

    // Go to cart
    await page.click('[data-testid="cart-icon"]');
    await page.waitForURL('/cart');

    // Verify product in cart
    await expect(page.locator('[data-testid="cart-item-1"]')).toBeVisible();
    await expect(page.locator('[data-testid="cart-total"]')).toContainText('$29.99');

    // Proceed to checkout
    await page.click('button:has-text("Checkout")');
    await page.waitForURL('/checkout');

    // Fill shipping information
    await page.fill('input[name="addressLine1"]', '123 Main St');
    await page.fill('input[name="city"]', 'San Francisco');
    await page.fill('input[name="state"]', 'CA');
    await page.fill('input[name="zipCode"]', '94105');

    // Continue to payment
    await page.click('button:has-text("Continue to Payment")');

    // Fill payment information (test mode)
    await page.fill('input[name="cardNumber"]', '4242424242424242');
    await page.fill('input[name="expiry"]', '12/25');
    await page.fill('input[name="cvc"]', '123');

    // Place order
    await page.click('button:has-text("Place Order")');

    // Wait for confirmation
    await page.waitForURL(/\/orders\/[a-z0-9-]+/);

    // Verify order confirmation
    await expect(page.locator('h1')).toContainText('Order Confirmed');
    await expect(page.locator('[data-testid="order-number"]')).toBeVisible();
    
    // Verify cart is empty
    await expect(page.locator('[data-testid="cart-count"]')).toContainText('0');
  });

  test('should update cart quantity', async ({ page }) => {
    await page.goto('/products');
    await page.click('[data-testid="product-1"] button:has-text("Add to Cart")');
    
    await page.goto('/cart');
    
    // Increase quantity
    await page.click('[data-testid="cart-item-1"] button[aria-label="Increase quantity"]');
    
    // Verify quantity updated
    await expect(page.locator('[data-testid="cart-item-1-quantity"]')).toContainText('2');
    
    // Verify total updated
    await expect(page.locator('[data-testid="cart-total"]')).toContainText('$59.98');
  });

  test('should remove item from cart', async ({ page }) => {
    await page.goto('/products');
    await page.click('[data-testid="product-1"] button:has-text("Add to Cart")');
    
    await page.goto('/cart');
    
    // Remove item
    await page.click('[data-testid="cart-item-1"] button[aria-label="Remove"]');
    
    // Verify cart is empty
    await expect(page.locator('[data-testid="empty-cart-message"]')).toBeVisible();
    await expect(page.locator('[data-testid="cart-count"]')).toContainText('0');
  });
});

Page Object Model

For better maintainability, use Page Object Model pattern:

pages/login.page.ts:

// e2e/pages/login.page.ts
import { Page } from '@playwright/test';

export class LoginPage {
  constructor(private readonly page: Page) {}

  async goto() {
    await this.page.goto('/login');
  }

  async login(email: string, password: string) {
    await this.page.fill('input[name="email"]', email);
    await this.page.fill('input[name="password"]', password);
    await this.page.click('button[type="submit"]');
  }

  async getErrorMessage() {
    return this.page.locator('.error-message').textContent();
  }

  async isLoginFormVisible() {
    return this.page.locator('form[data-testid="login-form"]').isVisible();
  }
}

pages/dashboard.page.ts:

// e2e/pages/dashboard.page.ts
import { Page, expect } from '@playwright/test';

export class DashboardPage {
  constructor(private readonly page: Page) {}

  async goto() {
    await this.page.goto('/dashboard');
  }

  async waitForLoad() {
    await this.page.waitForURL('/dashboard');
  }

  async getUserEmail() {
    return this.page.locator('[data-testid="user-email"]').textContent();
  }

  async logout() {
    await this.page.click('[data-testid="user-menu"]');
    await this.page.click('[data-testid="logout-button"]');
  }

  async expectToBeVisible() {
    await expect(this.page.locator('h1')).toContainText('Dashboard');
  }
}

Using Page Objects:

// e2e/auth-pom.spec.ts
import { test, expect } from '@playwright/test';
import { LoginPage } from './pages/login.page';
import { DashboardPage } from './pages/dashboard.page';

test.describe('Authentication with POM', () => {
  test('should login successfully', async ({ page }) => {
    const loginPage = new LoginPage(page);
    const dashboardPage = new DashboardPage(page);

    await loginPage.goto();
    await loginPage.login('[email protected]', 'SecureP@ss123');
    
    await dashboardPage.waitForLoad();
    await dashboardPage.expectToBeVisible();
    
    const email = await dashboardPage.getUserEmail();
    expect(email).toBe('[email protected]');
  });
});

Test Fixtures and Setup

fixtures/auth.fixture.ts:

// e2e/fixtures/auth.fixture.ts
import { test as base } from '@playwright/test';
import { LoginPage } from '../pages/login.page';
import { DashboardPage } from '../pages/dashboard.page';

type AuthFixtures = {
  loginPage: LoginPage;
  dashboardPage: DashboardPage;
  authenticatedPage: Page;
};

export const test = base.extend<AuthFixtures>({
  loginPage: async ({ page }, use) => {
    await use(new LoginPage(page));
  },

  dashboardPage: async ({ page }, use) => {
    await use(new DashboardPage(page));
  },

  authenticatedPage: async ({ page }, use) => {
    // Auto-login for tests that need authentication
    const loginPage = new LoginPage(page);
    await loginPage.goto();
    await loginPage.login('[email protected]', 'SecureP@ss123');
    await page.waitForURL('/dashboard');
    await use(page);
  },
});

export { expect } from '@playwright/test';

Using fixtures:

// e2e/dashboard.spec.ts
import { test, expect } from './fixtures/auth.fixture';

test.describe('Dashboard', () => {
  test('should display user data', async ({ authenticatedPage }) => {
    // Already logged in via fixture
    await expect(authenticatedPage.locator('h1')).toContainText('Dashboard');
  });
});

Visual Regression Testing

Installation:

npm install --save-dev @playwright/test

Visual tests:

// e2e/visual.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Visual Regression', () => {
  test('login page should match snapshot', async ({ page }) => {
    await page.goto('/login');
    
    // Take screenshot and compare
    await expect(page).toHaveScreenshot('login-page.png');
  });

  test('dashboard should match snapshot', async ({ page }) => {
    // Login first
    await page.goto('/login');
    await page.fill('input[name="email"]', '[email protected]');
    await page.fill('input[name="password"]', 'SecureP@ss123');
    await page.click('button[type="submit"]');
    await page.waitForURL('/dashboard');

    // Take screenshot
    await expect(page).toHaveScreenshot('dashboard.png');
  });

  test('product card should match snapshot', async ({ page }) => {
    await page.goto('/products');
    
    // Screenshot specific element
    const productCard = page.locator('[data-testid="product-1"]');
    await expect(productCard).toHaveScreenshot('product-card.png');
  });
});

Mobile Testing

// e2e/mobile.spec.ts
import { test, expect, devices } from '@playwright/test';

test.use({
  ...devices['iPhone 13'],
});

test.describe('Mobile Experience', () => {
  test('should show mobile menu', async ({ page }) => {
    await page.goto('/');
    
    // Mobile menu should be visible
    await expect(page.locator('[data-testid="mobile-menu-button"]')).toBeVisible();
    
    // Desktop menu should be hidden
    await expect(page.locator('[data-testid="desktop-menu"]')).not.toBeVisible();
  });

  test('should navigate via mobile menu', async ({ page }) => {
    await page.goto('/');
    
    await page.click('[data-testid="mobile-menu-button"]');
    await page.click('a:has-text("Products")');
    
    await page.waitForURL('/products');
  });
});

Testing API Calls

Intercepting and mocking API calls:

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

test('should handle API errors gracefully', async ({ page }) => {
  // Mock API to return error
  await page.route('**/api/users', (route) => {
    route.fulfill({
      status: 500,
      contentType: 'application/json',
      body: JSON.stringify({ error: 'Internal server error' }),
    });
  });

  await page.goto('/users');

  // Verify error message displayed
  await expect(page.locator('[data-testid="error-message"]')).toContainText(
    'Failed to load users'
  );
});

test('should show loading state', async ({ page }) => {
  // Delay API response
  await page.route('**/api/users', async (route) => {
    await new Promise(resolve => setTimeout(resolve, 2000));
    await route.continue();
  });

  await page.goto('/users');

  // Verify loading spinner
  await expect(page.locator('[data-testid="loading-spinner"]')).toBeVisible();
});

E2E Testing Best Practices

1. Use Data Attributes for Selectors

// Good
await page.click('[data-testid="submit-button"]');

// Bad (brittle)
await page.click('.btn.btn-primary.mt-4');

2. Wait for Navigation Properly

// Good
await page.click('button:has-text("Submit")');
await page.waitForURL('/success');

// Bad
await page.click('button:has-text("Submit")');
await page.waitForTimeout(3000); // Flaky!

3. Test User-Visible Behavior

// Good - test what user sees
await expect(page.locator('h1')).toContainText('Welcome');

// Bad - test implementation
await expect(page.locator('.header-component .title-text')).toHaveClass('active');

4. Keep Tests Independent

// Good - each test is independent
test('test 1', async ({ page }) => {
  await setupTestData();
  // test logic
});

test('test 2', async ({ page }) => {
  await setupTestData();
  // test logic
});

// Bad - tests depend on each other
let userId;
test('create user', async ({ page }) => {
  userId = await createUser();
});

test('update user', async ({ page }) => {
  await updateUser(userId); // Depends on previous test!
});

5. Use Meaningful Test Data

// Good
await page.fill('input[name="email"]', '[email protected]');

// Bad
await page.fill('input[name="email"]', '[email protected]');

Common Pitfalls

1. Waiting for Elements

// Bad - may fail if element loads slowly
await page.click('button');

// Good - wait for element to be visible
await page.waitForSelector('button', { state: 'visible' });
await page.click('button');

// Better - Playwright auto-waits
await page.click('button'); // Waits automatically

2. Handling Flaky Tests

// Use built-in retry logic
test('flaky test', async ({ page }) => {
  await page.goto('/');
  
  // Use expect with retry
  await expect(async () => {
    const text = await page.textContent('.dynamic-content');
    expect(text).toContain('Expected text');
  }).toPass({ timeout: 10000 });
});

Key Takeaways

1. E2E tests verify complete workflows - From UI to database

2. Use Playwright for modern E2E testing - Fast, reliable, great DX

3. Page Object Model improves maintainability - Encapsulate page logic

4. Test critical user journeys - Not every edge case

5. Use fixtures for common setup - Authentication, test data

6. Visual regression catches UI bugs - Automated screenshot comparison

7. Keep tests fast and independent - Parallel execution, no dependencies

What's Next?

In Part 6: Performance and Load Testing, we'll cover:

• Load testing with k6

• Performance benchmarking

• Stress testing microservices

• Monitoring and metrics

• Performance regression testing

---

This article is part of the Software Testing 101 series.