Playwright-based Responsive UI Compatibility Testing

Testing Tool: Playwright (Chromium Engine)
Test Purpose: Verify that web pages render correctly within viewport boundaries across various device environments
Test Coverage: 9 major viewports (3 mobile, 1 foldable, 3 tablet, 2 desktop)

Measurement Items:
• Actual rendering width of body element
• Overflow pixels beyond viewport width
• Overflow occurrence per viewport

Testing Method:
1. Set browser to each viewport size
2. Wait for network stabilization after page load (6 seconds)
3. Measure document.body.getBoundingClientRect()
4. Calculate overflow pixels by comparing with viewport width

Tested Viewports:
• Mobile: 360×800, 390×844, 414×896
• Foldable: 672×960
• Tablet: 768×1024, 834×1112, 1024×1366
• Desktop: 1280×800, 1440×900

This test takes approximately 30 seconds to 1 minute and helps identify potential horizontal scrollbar issues to improve user experience.
Grade Score Criteria
A+ 100 0 overflows across all viewports
Body render width always within viewport
A 90~95 ≤1 overflow with ≤8px
0 overflows in narrow mobile (≤390px) range
B 80~89 ≤2 overflows with each ≤16px
Or ≤8px single overflow in narrow mobile
C 70~79 ≤4 overflows or single overflow 17~32px
D 50~69 >4 overflows or single overflow 33~64px
F 0~49 Measurement failure or ≥65px overflow
No Results Yet

Run a test to see responsive UI compatibility results by viewport.

No Results Yet

Run a test to view the raw JSON data.

Sign in to view test history.

Sign in to manage domains.