Modern Frontend Testing Is Mostly About State, Timing, and Geometry

Frontend testing used to sound simple: open a page, find an element, click it, and verify the result.

That description still works for basic workflows, but modern interfaces are no longer a single static DOM that changes in obvious ways. Components can render inside Shadow DOM. Modals can be portaled to a different part of the document. Server-rendered HTML can be replaced during hydration. Content can move because of CSS container queries. A page can look finished while several progressive-loading states are still changing underneath it.

The hardest frontend bugs now tend to sit at the intersection of three things:

State: what the application believes is happening.

Timing: when the browser and framework apply changes.