End-to-End Testing with Playwright

All your unit tests pass, all your component tests pass, and yet the checkout flow has been broken since this morning. The cause: an environment variable missing from the production build, which makes the payment client point to an empty URL. No test in the suite could catch it, because none of them ran against the application as actually built, served by the real server, in a real browser. Every layer worked; it was their assembly that didn't.

That is the sole purpose of end-to-end tests, and it justifies their cost. They are slow, more fragile, and painful to diagnose, so you won't write two hundred of them. You'll write five to fifteen, covering the flows whose failure would cost you money or data: signing up, logging in, paying, publishing, deleting. Everything else belongs to the lower layers. This discipline of selection is what separates a useful end-to-end suite, run on every merge, from a forty-minute suite that the team ends up working around.

Installation

npm init playwright@latest

The wizard creates an e2e folder and a configuration file, and installs the browsers. On a continuous integration agent, the command to remember is the one that also installs system dependencies: