Every Test Passed. Users Said the Mobile Site Was "Broken.

Friday 4 PM. Deploy. All green. Monday 9 AM. Tickets flood. "Checkout button invisible iPhone." "Menu overlaps iPad." "Pricing broken Android." Every test passed. This TestLeaf guide showed what I missed. Blind Spot Tests validated: Button exists ✅ Click works ✅ Navigation succeeds ✅ Didn't catch: Button clipped mobile ❌ Menu overlap tablet ❌ Layout shifts ❌ Functional ≠ Visual Wake-Up Learn Playwright became urgent. Users don't care cy.get('.button') passes. They care if they can see it. What Changed Screenshot diffs + device emulation. Screenshot Diffs: javascriptawait expect(page).toHaveScreenshot('checkout.png'); Catches layout breaks, CSS regressions, visual bugs. Device Emulation: javascriptawait page.setViewportSize({ width: 375, height: 667 }); // iPhone await page.setViewportSize({ width: 768, height: 1024 }); // iPad Same test. Multiple devices. Strategy Not everything. Strategic coverage. Screenshot high-risk screens: Landing pages Checkout flows Dashboards Pricing component