Device & Viewport Emulation in Playwright
From the Playwright cheat sheet · Emulation & Devices · verified Jul 2026
Device & Viewport Emulation
Test on mobile devices, custom viewports, and different screen configurations
typescript
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
projects: [
{ name: 'Desktop', use: { viewport: { width: 1280, height: 720 } } },
{ name: 'Mobile', use: { ...devices['iPhone 13'] } },
{ name: 'Tablet', use: { ...devices['iPad Pro 11'] } },
],
});💡 Playwright ships with 100+ device profiles — use devices["Device Name"] to emulate any of them
⚡ Device profiles include viewport, userAgent, deviceScaleFactor, isMobile, and hasTouch
📌 Use page.setViewportSize() mid-test to verify responsive breakpoints dynamically
🟢 Each project runs your entire test suite — great for cross-device coverage in CI
emulationdevicesviewportmobile