In Playwright, import `devices` from `@playwright/test` and pass a device descriptor to the browser context: `browser.newContext({ ...devices['iPhone 14'], locale: 'en-US' })` — this sets viewport size, user agent, device scale factor, and touch support at once.
In Puppeteer, use `page.emulate(puppeteer.KnownDevices['iPhone 14'])` which sets the viewport and user agent from the bundled device list.
Override individual properties after applying the descriptor when you need a custom size: set `viewport` explicitly or call `page.setViewportSize` after the context is created.
Test touch interactions by using Playwright's `page.touchscreen.tap(x, y)` or trigger pointer events; desktop mouse events are not automatically converted to touch events by emulation.
Test network throttling by combining device emulation with a Chrome DevTools Protocol `Network.emulateNetworkConditions` call (available via `page.context().newCDPSession(page)` in Playwright) to simulate slow connections.
Known gotchas
Device emulation changes the browser's reported user agent and viewport, but it does NOT change the underlying rendering engine — you are still testing on Chromium, not on Safari for iOS. Safari-specific bugs (e.g., CSS flexbox quirks, Web API gaps) will not be caught by Playwright's Chromium emulation of an iPhone.
Many sites serve different content based on the user agent string, but others use feature detection. A desktop Chromium browser reporting an iPhone user agent may still receive desktop assets if the server checks for `navigator.maxTouchPoints` or other capability signals that differ between real mobile and emulated mobile.
Playwright's `devices` list ships with the Playwright version and may lag behind newly released hardware models. For the latest device specs, copy the descriptor values from a real device's browser or from Chrome DevTools' device list and construct the context options manually.
Give your agent this knowledge — and 200+ more routes
One MCP install gives any agent live access to the full route map, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp