solution-testing

Solution Testing

End-to-end and acceptance testing techniques for verifying that a feature works correctly across the full stack — browser, API, and data layer — from the user's perspective.

When to Activate

• Writing browser automation tests for user journeys
• Verifying a full feature works end-to-end (UI through DB)
• Setting up Playwright or Cypress for a project
• Writing BDD feature files with Gherkin syntax
• Designing smoke tests for post-deployment verification
• Debugging flaky E2E tests
• Deciding how many E2E tests to write for a feature

E2E vs Integration: The Boundary

E2E tests cover things integration tests cannot:

• Real browser rendering and JavaScript execution (layout, event handling, hydration)
• Full stack traversal: UI → API → DB → UI response cycle
• Multi-step user journeys across pages, sessions, and auth boundaries

Cost of Each Test Level

Type	Speed	Flakiness Risk	Maintenance Cost
Unit	ms	Very low	Low
Integration	seconds	Low	Medium
E2E	10s–minutes	High	High

The Honeycomb Model

Prefer more service-level integration tests over E2E tests. E2E tests are expensive to write, slow to run, and prone to flakiness. Use them sparingly.

• Write E2E tests only for critical user journeys: login, checkout, core business workflows
• Do not write E2E tests for every edge case — cover those with unit and integration tests
• Aim for: many unit tests → more integration tests → few targeted E2E tests

Playwright Setup and Patterns

Project Setup

npm init playwright@latest
# or add to an existing project:
npm install -D @playwright/test
npx playwright install

Config (playwright.config.ts):

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

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  reporter: [['html'], ['list']],
  use: {
    baseURL: process.env.BASE_URL ?? 'http://localhost:3000',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  ],
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
});