Green CI, Broken Page: Why Automated Tests Miss Real-World Visual Bugs

A developer discovered their landing page was visibly broken on a customer's Pixel phone — with clipped text, an unreadable button, and a missing hero image — despite all CI checks, Lighthouse scores, and Playwright tests passing. The headline was clipped due to a CSS 'white-space: nowrap' rule that prevented text from wrapping on narrow viewports, a flaw the browser could have flagged via a simple scrollWidth check. The signup button's color contrast ratio was approximately 1.4:1, far below the WCAG minimum of 4.5:1, yet no test was computing contrast on an actual rendered screen. A missing mobile image file returned a 404 only on mobile network profiles, which desktop-based devtools never triggered. The developer concluded that CI tools verify logical behavior but are structurally blind to visual rendering issues across real device viewports, and that programmatic visual checks at multiple screen sizes are necessary to close this gap.