Mobile Emulation

Device Presets

Import devices from @playwright/test — includes iPhone, Pixel, iPad presets with viewport, userAgent, and touch settings.

Define mobile projects in config alongside desktop for parallel mobile regression.

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

export default defineConfig({
  projects: [
    { name: 'Desktop Chrome', use: { ...devices['Desktop Chrome'] } },
    { name: 'Mobile Safari', use: { ...devices['iPhone 14'] } },
  ],
});

devices['iPhone 14'] sets viewport, isMobile, hasTouch, userAgent.

Custom Mobile Context

use: {
  viewport: { width: 390, height: 844 },
  isMobile: true,
  hasTouch: true,
  deviceScaleFactor: 3,
}

• isMobile affects hover media queries and touch defaults.
• hasTouch enables touch event simulation.
• Orientation: set viewport height/width swapped.
• Geolocation pairs with permissions for map apps.

Mobile Emulation Reference

Common device configs.

Testing Mobile Navigation

await page.getByRole('button', { name: 'Menu' }).click();
await expect(page.getByRole('navigation')).toBeVisible();

Hamburger menus often exist only in mobile viewport — test both projects.

Touch vs Click

Mobile presets enable touch. Some components respond only to tap — use locator.tap() when click does not trigger mobile handlers.

Common Mistakes

• Only testing desktop viewport for responsive apps.
• Confusing emulation with real device cloud — different value, both useful.
• Forgetting isMobile for touch-only UI.
• Same snapshot for desktop and mobile layouts.

Key Takeaways

• devices presets configure realistic mobile contexts.
• Mobile projects catch responsive and touch UI bugs.
• isMobile and hasTouch affect event and CSS behavior.
• Run mobile projects in CI for responsive-critical apps.