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

#testing #ai #webdev #programming

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 components

Test critical breakpoints:

Desktop (1920px)
Tablet (768px)
Mobile (375px)

Three viewports = comprehensive device coverage.
Real Example
Before:
javascriptawait expect(page.locator('.checkout-btn')).toBeVisible();
Passed desktop. Failed users (button below fold).
After:
javascriptawait page.setViewportSize({ width: 375, height: 667 });
await expect(page).toHaveScreenshot('checkout-mobile.png');
Caught: clipping, overlap, shifts.
Pattern
Functional: Does it work?
Visual: Can users see it?
Both needed.
Playwright Automation Tool Advantage
Built-in screenshot diffs.
Built-in device emulation.
No extra platforms.
Visual testing becomes normal workflow.
Learned
Green tests ≠ good UX.
Responsive bugs hide at specific breakpoints.
Screenshot baselines = quality contracts. Update deliberately.
Playwright course online would've saved me weeks of painful debugging and user complaints.
Shift
From: "Tests passed, ship."
To: "Tests + visuals match devices, ship."
Modern QA.
Insight
Behavior alone incomplete.
What users see matters.