Day 23 of 60 · E2E, UI, accessibility

E2E testing (browser/mobile)

A passing unit test means almost nothing about the user. A passing E2E means you watched the user complete the journey, and the cost of that confidence is the maintenance you have to budget for it.

ProblemIntegration of real frontend, real backend, real network, tested only by users in production.

How it works

A headless browser drives the live application end-to-end. Used for golden-path coverage, regression on critical flows, and pre-deploy gates. Maintenance is the dominant cost, keep tests few and meaningful.

What it catches

Cross-stack integration bugs, env-config bugs, deploy-time regressions. Catches what unit + integration tests miss but flaky if not budgeted.

Tools

Playwright · OSS Cypress · OSS Maestro / Detox (mobile) · OSS

Verdict by project size

Small

Rec

Medium

Must

Large

Must

Extra-large

Must

Cost

Project size	Setup	Maint / mo	Tool / mo	CI / run
Small <10k LOC	1d	4h	$0	+5m
Medium 10–100k LOC	5d	25h	$0	+15m
Large 100k–1M LOC	20d	120h	$500	+30m
Extra-large >1M LOC	60d	400h	$5k	+60m

Setup = engineer-days to first useful run · Maint = engineer-hours / month at steady state · Tool = out-of-pocket $ / month · CI = minutes added (or saved) per pipeline run

Lifecycle & ownership

When in lifecycle

Test Release

Per release · Runs before promotion to production.

Who owns it

QA / Test Engineer

Strategy, exploratory, eval design

Collaborates with: Developer

Reference implementations

Playwright examples
Official browser E2E examples covering common test-runner patterns.
Cypress RealWorld App
Full-stack application built to demonstrate realistic E2E testing patterns.
TodoMVC Playwright tests
Compact official example for browser flows and assertions.

Quick check

The dominant cost of E2E browser testing over time is…

One question. Pick the best answer. Your streak is saved locally on this device.

Save the lesson

Download SVG ↓

Screenshot for a 1:1, drop it in Slack, or download the SVG.

All 60 days →