How do you emulate a mobile device?

Playwright ships descriptors for popular phones and tablets. Spreading one into a project sets the viewport, user agent, device scale factor, isMobile and hasTouch. That is enough to catch layout and touch-target problems without maintaining a device lab.

import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  projects: [
    { name: "mobile-chrome", use: { ...devices["Pixel 7"] } },
    { name: "mobile-safari", use: { ...devices["iPhone 15"] } },
  ],
});

import { test, devices } from "@playwright/test";

test.use({ ...devices["iPhone 15"] });

test("opens the mobile menu", async ({ page }) => {
  await page.goto("/");
  await page.getByRole("button", { name: "Menu" }).click();
  await expect(page.getByRole("navigation")).toBeVisible();
});

What emulation changes

• Viewport size and device scale factor
• User agent string
• Touch support through hasTouch
• Mobile viewport behaviour through isMobile
• Some geolocation, locale and permission defaults

Emulation does not reproduce real hardware. It cannot validate actual touch gestures, camera, sensors, battery behaviour or the exact Safari version on a user's phone. It also cannot tell you how a device GPU performs. Use it for responsive layout and interaction checks, and use a real-device cloud for hardware-specific risks.