Device Testing

Device testing ensures your app works on phones and tablets. Playwright emulation covers most layout issues; real devices or cloud farms add OS-level confidence.

Emulation vs Real Devices

Emulation handles viewport, touch, and user agent — sufficient for most responsive CSS and mobile interaction tests.

Real device clouds (BrowserStack, Sauce Labs, AWS Device Farm) integrate via CDP or custom connectors when you need actual mobile OS behavior.

test.use({ ...devices['Galaxy S9+'], locale: 'de-DE' });

test('mobile checkout DE', async ({ page }) => {
  await page.goto('/checkout');
  await expect(page.getByText('Zwischensumme')).toBeVisible();
});

Combine device preset with locale for regional mobile flows.

Orientation and Sensors

await page.setViewportSize({ width: 844, height: 390 }); // landscape
await context.grantPermissions(['geolocation']);
await context.setGeolocation({ latitude: 48.85, longitude: 2.35 });

Rotate by swapping viewport dimensions.
Geolocation requires permission grant on context.
Battery/sensors limited in emulation — mock at app level.
Test tablet breakpoints separately from phone.

Device Testing Checklist

Coverage areas.

Area	Approach
Responsive layout	Mobile + desktop projects
Touch targets	hasTouch: true, tap actions
Orientation	Viewport swap test
Locale/format	locale + timezoneId in use
Real device	Cloud farm for release gate
PWA install	Often needs real device or manual QA

Tablet-Specific Layouts

iPad presets use wider viewports — catch two-column layouts that differ from phone single-column. Test split-view if app supports multitasking.

Custom Device Descriptors

Extend devices catalog with custom viewport and userAgent when testing a specific enterprise tablet not in the preset list.

Common Mistakes

Only iPhone preset, ignoring Android userAgent differences.
Not testing landscape orientation.
Assuming emulation catches all native WebView bugs.
Same E2E on 20 device presets — prioritize top traffic devices.

Key Takeaways

Emulation covers most responsive E2E needs.
Pick presets matching analytics top devices.
Test orientation and locale on mobile projects.
Real devices for release-critical native edge cases.

Pro Tip

Pull top 3 devices from analytics — configure exactly those Playwright presets instead of testing every catalog device.