3.2Viewport Breakpoint Configuration

Define your test viewports to cover the critical breakpoints where layouts change:

// playwright.config.ts -- define viewport breakpoints
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
    projects: [
        // Mobile portrait
        { name: 'mobile-portrait', use: { viewport: { width: 375, height: 812 } } },
        // Mobile landscape
        { name: 'mobile-landscape', use: { viewport: { width: 812, height: 375 } } },
        // Small tablet
        { name: 'tablet-portrait', use: { viewport: { width: 768, height: 1024 } } },
        // Tablet landscape
        { name: 'tablet-landscape', use: { viewport: { width: 1024, height: 768 } } },
        // Desktop
        { name: 'desktop', use: { viewport: { width: 1440, height: 900 } } },
        // Ultrawide
        { name: 'ultrawide', use: { viewport: { width: 2560, height: 1080 } } },
        // Foldable inner display (Samsung Galaxy Fold open)
        { name: 'foldable-open', use: { viewport: { width: 1812, height: 2176 } } },
        // Foldable outer display
        { name: 'foldable-closed', use: { viewport: { width: 832, height: 2268 } } },
    ],
});

Choosing Breakpoints Strategically

Do not just test at CSS breakpoint values. Test at the transition points where layouts are most likely to break:

Width	What to Test	Why
320px	Smallest viable width	iPhone SE, small Android phones
374px	Just below common mobile breakpoint	Catches off-by-one in media queries
375px	Standard mobile breakpoint	iPhone 12-15 mini/standard width
414px	Larger phones	iPhone Pro Max, Galaxy S series
767px	Just below tablet breakpoint	Catches tablet layout triggering issues
768px	Tablet breakpoint	iPad portrait
1023px	Just below desktop breakpoint	Catches desktop layout issues
1024px	Desktop breakpoint	iPad landscape, small laptops
1440px	Standard desktop	Most common desktop resolution
1920px	Full HD desktop	Content stretching issues