Marc-André Bombeck
57fbbcdef8
The top bar's bottom border and the sidebar logo band's bottom border draw one horizontal line across the top of the app, and they sat a pixel apart. Both declared h-16, so the number was never the problem. Every box in the app is border-box: the top bar carried `h-16 border-b` on one element, which puts the line inside the 4rem at 63 to 64 px, while the sidebar put `border-b` on the wrapper and `h-16` on the link inside it, which puts the line after the 4rem at 64 to 65 px. Same number, different line. The height and the border now travel together as SHELL_HEADER_BAND in shell-metrics.ts, next to the sub-shell scroll floor that exists for the same reason. The element carrying that class is the band; neither call site restates a height, and the sidebar link stretches with h-full. Border colour stays per-surface, because the two chrome surfaces are tinted apart by design and only the geometry has to match. Two guards. chrome-header-seam.test.tsx asserts the structural property, that each band renders every token of the shared constant and declares no height of its own; a second height class on either element replaces the shared one through twMerge, so both halves fire on the same edit. The e2e spec measures the painted result at 768, 900, 1024 and 1280 px in both the expanded sidebar and the collapsed rail, and checks each band actually paints a border at the same weight first, so two missing lines cannot pass as two aligned ones.
e2e/
End-to-end browser tests. Playwright 1.60 drives a production build of the app against a real PostgreSQL, with @axe-core/playwright for accessibility assertions. This is the heaviest test tier; CI runs it on every PR, and locally it is worth running when a change touches a UI flow.
Running
pnpm e2e
The Playwright config (../playwright.config.ts) builds the app (next build) and brings up Postgres before the specs run; setup/global-setup.ts seeds the auth + fixture state. The suite is not part of the fast local gate (typecheck / lint / test) — it surfaces at PR CI, so expect responsive/wizard/nav reworks to flag here first.
Layout
setup/—test.ts(the suite'stest+expectentry point),global-setup.ts(auth + DB seeding),test-helpers.ts(shared login + navigation helpers).utils/— fixtures such asmock-dashboard-snapshot.ts.*.spec.ts— one spec per flow: auth/login/redirect, dashboard, charts, the medication-wizard cadences (medications-wizard-*), insights generation + scroll restoration, doctor report, settings, mobile-viewport consistency, locale switch, accessibility (a11y.spec.ts), and thev1427-*regression set.
Conventions
Import test and expect from ./setup/test, never from @playwright/test — types (Page, Route, …) still come from the package. The entry point extends Playwright's test with an automatic fixture that drops route handlers and page listeners after every test, so a handler left in flight cannot fail the test it belonged to once the context closes. src/__tests__/e2e-route-cleanup-guard.test.ts enforces the import boundary.
Assert against stable data-* attributes (data-slot, data-display-step, root display attrs), not viewport-dependent visible text. Responsive sm:hidden UI changes break getByText on desktop while the underlying element is still present — anchoring on data attributes keeps the specs stable across breakpoints. See ../CLAUDE.md.