End-to-End Testing

Also Known As

TL;DR

Explanation

E2E tests (Playwright, Cypress) drive a real browser: click buttons, fill forms, assert page content. They test the full stack — frontend, API, backend, database — in a realistic environment. The trade-off: slow (seconds per test), flaky (timing issues, external dependencies), and expensive to maintain. The test pyramid says E2E should be sparse — cover critical user journeys (checkout, signup, core workflow) and leave edge cases to unit and integration tests.

Diagram

flowchart LR
    PLAYWRIGHT[Playwright or Cypress] --> BROWSER2[Real browser<br/>Chromium Firefox]
    BROWSER2 --> CLICK[Click buttons fill forms<br/>assert page content]
    CLICK --> STACK[Tests full stack<br/>UI API DB]
    subgraph Best_Practices
        WAIT[Wait for elements<br/>not arbitrary timeouts]
        SELECTORS[Use data-testid selectors<br/>resilient to style changes]
        SPARSE[Few E2E tests<br/>critical paths only]
        PARALLEL[Run in parallel<br/>across browsers]
    end
    subgraph Failures
        SCREENSHOT[Capture screenshot on fail]
        VIDEO[Record video on fail]
    end
style STACK fill:#6e40c9,color:#fff
style WAIT fill:#238636,color:#fff
style SCREENSHOT fill:#1f6feb,color:#fff

Common Misconception

Why It Matters

Common Mistakes

• Too many E2E tests — slow CI, high maintenance burden, flaky failures breed distrust of the whole suite.
• No wait strategies — hard-coded sleeps instead of waiting for elements; flaky tests.
• Running E2E against production — tests create real data, send real emails, charge real cards.
• Not capturing screenshots/videos on failure — debugging E2E failures without visual context is very slow.

Code Examples

// Flaky E2E — hardcoded sleep instead of waiting:
await page.click('#submit-btn');
await page.waitForTimeout(3000); // Hope 3s is enough
await expect(page.locator('#success-msg')).toBeVisible();
// Fails on slow CI, passes locally — nightmare to debug

// Playwright — wait for element, not arbitrary time:
await page.click('#submit-btn');
await expect(page.locator('#success-msg')).toBeVisible({ timeout: 10_000 });
// Waits up to 10s, passes as soon as element appears

// Structure: test critical paths only
test('user can complete checkout', async ({ page }) => {
    await page.goto('/products');
    await page.click('[data-testid="add-to-cart"]');
    await page.click('[data-testid="checkout"]');
    await page.fill('#card-number', '4242424242424242');
    await page.click('#pay-now');
    await expect(page.locator('.order-confirmation')).toBeVisible();
});

References

• ↗ https://playwright.dev/docs/intro

Tags

Related Terms