The Complete Guide to Web Application Testing

• 🛍️Product Catalog — publicly viewable product listing
• 🔐Authentication — register and sign in with username/password
• 🛒Shopping Cart — add, update, and remove items (requires login)
• 📦Checkout — enter a shipping address and place an order
• 📋My Orders — view past orders, edit shipping address, or cancel

1. 1
   Install dependencies:

   npm install
2. 2
   Start the development server:

   npm run dev

   Open http://localhost:3000 in your browser.

Installed packages

// lib/price.ts
export function calculateTotalPrice(items: PriceableItem[]): number {
  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
}

// lib/price.test.ts
describe('calculateTotalPrice', () => {
  it('calculates the total for multiple items', () => {
    const items = [
      { price: 5, quantity: 2 },   // 10
      { price: 20, quantity: 1 },  // 20
      { price: 3, quantity: 4 },   // 12
    ];
    expect(calculateTotalPrice(items)).toBe(42);
  });

  it('handles decimal prices correctly', () => {
    const items = [
      { price: 1.5, quantity: 2 },  // 3.0
      { price: 0.99, quantity: 3 }, // 2.97
    ];
    expect(calculateTotalPrice(items)).toBeCloseTo(5.97);
  });
});

// lib/products.test.ts
jest.mock('./db');  // Replace the real SQLite database with a mock

import { getDb } from './db';
import { getProductById } from './products';

const mockDb = getDb as jest.MockedFunction<typeof getDb>;

describe('getProductById', () => {
  it('returns the matching product when found', () => {
    const fakeProduct = { id: 1, name: 'Headphones', price: 79.99, ... };
    mockDb.mockReturnValue({
      prepare: jest.fn().mockReturnValue({
        get: jest.fn().mockReturnValue(fakeProduct),
      }),
    } as any);

    const result = getProductById(1);
    expect(result).toEqual(fakeProduct);
  });
});

// lib/cartApi.test.ts
const mockFetch = jest.fn();
global.fetch = mockFetch;

function makeResponse(body: unknown, status = 200) {
  return {
    ok: status >= 200 && status < 300,
    json: jest.fn().mockResolvedValue(body),
  } as unknown as Response;
}

beforeEach(() => { mockFetch.mockReset(); });

describe('addToCart', () => {
  it('sends a POST request with the correct body', async () => {
    mockFetch.mockResolvedValue(makeResponse({ success: true }));

    await addToCart(42, 3);

    expect(mockFetch).toHaveBeenCalledWith('/api/cart', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ productId: 42, quantity: 3 }),
    });
  });
});

npm run test:jest

# Watch mode during development
npm run test:jest -- --watch

# Run a specific test file
npm run test:jest -- lib/price.test.ts

# Generate a coverage report
npm run test:jest -- --coverage

// app/page.test.tsx
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import HomePage from './page';

// Mock Next.js router — useRouter() would throw without this
jest.mock('next/navigation', () => ({
  useRouter: () => ({ push: jest.fn() }),
  usePathname: () => '/',
}));

// Replace global fetch with a Jest mock
const mockFetch = jest.fn();
global.fetch = mockFetch;

function makeResponse(body: unknown, status = 200) {
  return {
    ok: status >= 200 && status < 300,
    json: jest.fn().mockResolvedValue(body),
  } as unknown as Response;
}

beforeEach(() => {
  mockFetch.mockReset();
  mockFetch
    .mockResolvedValueOnce(makeResponse([]))                     // /api/products
    .mockResolvedValueOnce(makeResponse({ isLoggedIn: false })); // /api/auth/me
});

it('renders the product catalogue heading after data loads', async () => {
  render(<HomePage />);

  // Wait for the loading spinner to disappear
  await waitFor(() =>
    expect(screen.queryByText('Loading products...')).not.toBeInTheDocument()
  );

  expect(screen.getByRole('heading', { name: 'Product Catalog' })).toBeInTheDocument();
});

it('clicking "Add to Cart" calls the cart API and shows a success message', async () => {
  mockFetch.mockReset();
  mockFetch
    .mockResolvedValueOnce(makeResponse([product]))                                // /api/products
    .mockResolvedValueOnce(makeResponse({ isLoggedIn: true, username: 'alice' })) // /api/auth/me
    .mockResolvedValueOnce(makeResponse({ cartCount: 1 }));                       // POST /api/cart

  render(<HomePage />);

  await waitFor(() =>
    expect(screen.queryByText('Loading products...')).not.toBeInTheDocument()
  );

  await userEvent.click(screen.getByRole('button', { name: 'Add to Cart' }));

  expect(mockFetch).toHaveBeenCalledWith('/api/cart', expect.objectContaining({
    method: 'POST',
    body: JSON.stringify({ productId: 42, quantity: 1 }),
  }));

  await waitFor(() =>
    expect(screen.getByText('Added to cart!')).toBeInTheDocument()
  );
});

npm init playwright@latest

# Or install manually
npm install --save-dev @playwright/test
npx playwright install

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  use: {
    baseURL: 'http://localhost:3000',
  },
  webServer: {
    command: 'npm run start',   // start the production build
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});

// tests/ch03/products.spec.ts
import { test, expect } from '@playwright/test';

test('product catalog loads and displays products', async ({ page }) => {
  await page.goto('/');

  // Wait for the heading to appear
  await expect(page.getByRole('heading', { name: 'Product Catalog' })).toBeVisible();

  // At least one product card should be visible
  const productCards = page.locator('[data-testid="product-card"]');
  await expect(productCards.first()).toBeVisible();
});

# Build the app first
npm run build

# Run all Playwright tests
npm run test:playwright

# Open the interactive Playwright UI
npm run test:playwright -- --ui

# Run a specific test file
npx playwright test tests/ch03/products.spec.ts

# Show the HTML report
npx playwright show-report

test('shows error message when products API fails', async ({ page }) => {
  // Intercept the products API and return a 500 error
  await page.route('/api/products', (route) =>
    route.fulfill({ status: 500, body: 'Internal Server Error' })
  );

  await page.goto('/');

  await expect(page.getByText('Failed to load products')).toBeVisible();
});

test('shows empty state when no products exist', async ({ page }) => {
  await page.route('/api/products', (route) =>
    route.fulfill({ status: 200, json: [] })
  );

  await page.goto('/');

  await expect(page.getByText('No products available')).toBeVisible();
});

// tests/auth.setup.ts — run once before the test suite
import { test as setup } from '@playwright/test';

setup('authenticate as alice', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('Username').fill('alice');
  await page.getByLabel('Password').fill('Password123');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await page.waitForURL('/');

  // Save the authenticated session to disk
  await page.context().storageState({ path: 'playwright/.auth/alice.json' });
});

// playwright.config.ts — use the saved state in tests
export default defineConfig({
  projects: [
    { name: 'setup', testMatch: /auth.setup.ts/ },
    {
      name: 'authenticated',
      use: { storageState: 'playwright/.auth/alice.json' },
      dependencies: ['setup'],
    },
  ],
});

test('POST /api/cart adds an item', async ({ request }) => {
  // First, log in via the API
  await request.post('/api/auth/login', {
    data: { username: 'alice', password: 'Password123' },
  });

  // Add an item to the cart
  const response = await request.post('/api/cart', {
    data: { productId: 1, quantity: 2 },
  });

  expect(response.ok()).toBe(true);
  const body = await response.json();
  expect(body.cartCount).toBeGreaterThan(0);
});

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

test('product catalog matches snapshot', async ({ page }) => {
  await page.goto('/');

  // Wait for products to load before taking the screenshot
  await page.waitForSelector('[data-testid="product-card"]');

  await expect(page).toHaveScreenshot('product-catalog.png');
});

test('product catalog with masked dynamic content', async ({ page }) => {
  await page.goto('/');
  await page.waitForSelector('[data-testid="product-card"]');

  await expect(page).toHaveScreenshot('product-catalog-masked.png', {
    mask: [
      page.locator('[data-testid="cart-count"]'),  // mask the cart badge
      page.locator('[data-testid="timestamp"]'),   // mask any timestamps
    ],
    maxDiffPixelRatio: 0.02,  // allow up to 2% pixel difference
  });
});

# Update all baselines (after intentional UI changes)
npx playwright test --update-snapshots

# Update baselines for a specific test file
npx playwright test tests/ch05/visual.spec.ts --update-snapshots

# Open Codegen — interact with the browser and watch the code appear
npx playwright codegen http://localhost:3000

# Record to a specific output file
npx playwright codegen --output tests/recorded.spec.ts http://localhost:3000

# Record with a saved auth state
npx playwright codegen --load-storage=playwright/.auth/alice.json http://localhost:3000

npm install --save-dev cypress

# Open the Cypress GUI (first run creates cypress.config.ts)
npx cypress open

// cypress/e2e/auth.cy.ts
describe('Authentication', () => {
  it('allows a user to register and log in', () => {
    cy.visit('/register');

    cy.get('[data-testid="username"]').type('alice');
    cy.get('[data-testid="password"]').type('Password123');
    cy.get('[data-testid="register-button"]').click();

    // Should redirect to home after registration
    cy.url().should('include', '/');
    cy.contains('Welcome, alice').should('be.visible');
  });

  it('shows an error for invalid credentials', () => {
    cy.visit('/login');

    cy.get('[data-testid="username"]').type('nobody');
    cy.get('[data-testid="password"]').type('wrongpassword');
    cy.get('[data-testid="login-button"]').click();

    cy.contains('Invalid username or password').should('be.visible');
  });
});

it('shows error state when products API fails', () => {
  cy.intercept('GET', '/api/products', {
    statusCode: 500,
    body: { error: 'Internal Server Error' },
  }).as('getProducts');

  cy.visit('/');
  cy.wait('@getProducts');

  cy.contains('Failed to load products').should('be.visible');
});

// cypress/component/ProductCard.cy.tsx
import ProductCard from '../../components/ProductCard';

describe('ProductCard', () => {
  const product = {
    id: 1,
    name: 'Wireless Headphones',
    price: 79.99,
    stock: 10,
    image_url: '/headphones.jpg',
  };

  it('renders the product name and price', () => {
    cy.mount(<ProductCard product={product} onAddToCart={cy.stub()} />);

    cy.contains('Wireless Headphones').should('be.visible');
    cy.contains('$79.99').should('be.visible');
  });

  it('calls onAddToCart when the button is clicked', () => {
    const onAddToCart = cy.stub().as('addToCart');
    cy.mount(<ProductCard product={product} onAddToCart={onAddToCart} />);

    cy.get('[data-testid="add-to-cart"]').click();
    cy.get('@addToCart').should('have.been.calledOnceWith', 1);
  });
});

# E2E tests require the app to be running first
npm run build && npm run start

# Open the interactive Cypress GUI
npm run cypress:open

# Run E2E tests headlessly
npm run test:cypress:e2e

# Component tests do NOT need a running server
# Interactive GUI (select "Component Testing")
npm run cypress:open

# Headless component tests
npm run test:cypress:component

• 🏛️ You must support Internet Explorer or legacy browsers that Playwright does not support
• 🔄 You have a large, mature existing Selenium suite — migration cost outweighs the benefits
• 💻 Your team uses Ruby, PHP, or Perl — Playwright does not have official bindings for these languages
• 🏢 Your organization has invested in Selenium Grid infrastructure for parallelism

• ✓Forces you to think before you code — writing a test first requires you to define the inputs, expected outputs, and edge cases before writing a single line of implementation
• ✓Tests document the behavior — a well-written TDD test suite reads like a specification; new developers can read the tests to understand what the code is supposed to do
• ✓You only write what you need — the discipline of writing the minimum code to pass a test discourages over-engineering
• ✓Refactoring becomes safe — once you have a comprehensive test suite, you can restructure your code with confidence
• ✓Replaces manual browser testing during development — running a test suite takes milliseconds; manually navigating to a page and checking the result takes minutes

• ✗Requirements change constantly on the frontend — a non-technical stakeholder says “can we move that button?” and suddenly your tests are invalid
• ✗TDD requires knowing what you are building — much of web development is exploratory; writing tests for code you have not designed yet is genuinely difficult
• ✗The upfront investment is real — writing tests before code takes longer in the short term; for teams under deadline pressure, this cost is not trivial
• ✗Not all code is equally testable — a React component that renders differently based on user interactions, network state, and browser APIs requires significant mocking infrastructure

# Unit & Component Tests (Jest + RTL)
npm run test:jest

# Watch mode during development
npm run test:jest -- --watch

# End-to-End Tests (Playwright) — build first
npm run build
npm run test:playwright

# Playwright interactive UI
npm run test:playwright -- --ui

# Cypress E2E — app must be running
npm run build && npm run start
npm run test:cypress:e2e

# Cypress Component Tests — no server needed
npm run test:cypress:component

• Jest Documentation — Getting Started
• React Testing Library — Introduction
• Playwright Documentation — Getting Started
• Cypress Documentation — Why Cypress
• Martin Fowler — The Test Pyramid
• Kent C. Dodds — Write Tests. Not Too Many. Mostly Integration.