14Mobile & Device Emulation

14.1 Device profiles

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

export default defineConfig({
  projects: [
    { name: 'desktop-chrome', use: { ...devices['Desktop Chrome'] } },
    { name: 'mobile-chrome',  use: { ...devices['Pixel 7'] } },
    { name: 'mobile-safari',  use: { ...devices['iPhone 14'] } },
    { name: 'tablet',         use: { ...devices['iPad Pro 11'] } },
  ],
});

Each device profile bundles: viewport (375×667 etc.), userAgent, deviceScaleFactor (Retina = 2 or 3), isMobile (changes meta-viewport handling), hasTouch (enables touch events).

14.2 What emulation actually changes

14.3 Touch interactions

test('mobile gesture: tap and swipe', async ({ page }) => {
  await page.goto('/feed');

  /* Tap (like click but fires touch events when hasTouch=true) */
  await page.getByRole('button', { name: 'Like' }).tap();

  /* Long-press */
  const card = page.getByTestId('card-1');
  const box  = await card.boundingBox();
  await page.touchscreen.tap(box!.x + 10, box!.y + 10);

  /* Swipe via touchscreen (low-level) */
  await page.evaluate(() => window.scrollTo(0, 0));
  await page.touchscreen.tap(200, 600);
  /* Some apps need a manual swipe path */
  const start = { x: 200, y: 600 }, end = { x: 200, y: 100 };
  await page.evaluate(([s, e]) => {
    const make = (t: string, p: any) => new TouchEvent(t, {
      bubbles: true, touches: [{ identifier: 0, clientX: p.x, clientY: p.y, target: document.body } as any],
    });
    document.body.dispatchEvent(make('touchstart', s));
    document.body.dispatchEvent(make('touchmove',  e));
    document.body.dispatchEvent(make('touchend',   e));
  }, [start, end]);
});

14.4 Geolocation, permissions, locale, timezone

test('shows nearby stores using geo', async ({ browser }) => {
  const context = await browser.newContext({
    ...devices['Pixel 7'],
    geolocation: { latitude: 12.9716, longitude: 77.5946 },  // Bangalore
    permissions: ['geolocation'],
    locale: 'en-IN',
    timezoneId: 'Asia/Kolkata',
  });
  const page = await context.newPage();
  await page.goto('/stores/near-me');
  await expect(page.getByText('Bengaluru')).toBeVisible();
});

14.5 Orientation

test('landscape rendering', async ({ browser }) => {
  const ctx = await browser.newContext({
    ...devices['Pixel 7 landscape'],   // pre-defined landscape profile
  });
  const page = await ctx.newPage();
  await page.goto('/');
  /* viewport is now wider than tall */
});

/* Or rotate mid-test */
test('rotate during interaction', async ({ page }) => {
  await page.goto('/');
  await page.setViewportSize({ width: 800, height: 360 });   // landscape
});

14.6 Color scheme, reduced motion, contrast

test('dark mode renders dark theme', async ({ browser }) => {
  const ctx = await browser.newContext({ colorScheme: 'dark' });
  const page = await ctx.newPage();
  await page.goto('/');
  await expect(page.locator('body')).toHaveCSS('background-color', 'rgb(13, 17, 23)');
});

test('respects prefers-reduced-motion', async ({ browser }) => {
  const ctx = await browser.newContext({ reducedMotion: 'reduce' });
  const page = await ctx.newPage();
  await page.goto('/');
  /* page should skip / shorten animations */
});

test('forced-colors mode (Windows high contrast)', async ({ browser }) => {
  const ctx = await browser.newContext({ forcedColors: 'active' });
  /* Test that critical UI is still readable */
});

14.7 Useful built-in device list (samples)

• iPhone 14, iPhone 14 Pro Max, iPhone 14 Plus, iPhone SE
• Pixel 7, Pixel 5, Galaxy S9+
• iPad Pro 11, iPad Mini, Galaxy Tab S4
• Desktop Chrome / Edge / Firefox / Safari
• Each has a …landscape variant

Full list: import { devices } from '@playwright/test'; console.log(Object.keys(devices));

14.8 Picking what to test on mobile

• Critical user journeys (auth, checkout, primary CTA) — yes
• Form heavy flows — definitely (mobile keyboards are a regression source)
• Touch-only interactions (swipe carousels, pull-to-refresh) — yes
• Hover-only menus — they probably don't work on touch; explicit test
• Visual: per-viewport baselines for storybook components

14.10 Mobile-specific test patterns

Network throttling per test

test('works on slow 3G', async ({ page, context }) => {
  const cdp = await context.newCDPSession(page);
  await cdp.send('Network.emulateNetworkConditions', {
    offline: false,
    downloadThroughput: (1.6 * 1024 * 1024) / 8,  // 1.6 Mbps
    uploadThroughput:   (750 * 1024) / 8,         // 750 Kbps
    latency: 300,
  });
  await cdp.send('Emulation.setCPUThrottlingRate', { rate: 4 });
  /* now run test under throttled conditions */
});

Mobile viewport visual snapshot

test('mobile home looks right', async ({ page }) => {
  /* use a project: { use: { ...devices['Pixel 7'] } } */
  await page.goto('/');
  await expect(page).toHaveScreenshot('home-mobile.png', {
    fullPage: true,
    animations: 'disabled',
  });
});

Orientation change mid-test

// Rotate by changing viewport
await page.setViewportSize({ width: 800, height: 360 });  // landscape
// Re-assert layout fits

14.11 Real-device testing (cloud farms)

• BrowserStack App Live — real iOS / Android devices, manual + automated
• Sauce Labs Real Devices — same but more enterprise certifications
• Firebase Test Lab — Google's farm, free tier, Android focused
• AWS Device Farm — pay per device-minute
• LambdaTest — competitive pricing

14.12 Mobile web vs hybrid vs native

14.13 Common mobile failure modes

• Backgrounding — app paused/resumed; state preserved?
• Push notification while in app — popup interferes with flow
• Slow network mid-action — does spinner show? Action eventually completes?
• Permission prompts — geo, camera, push; test allow + deny
• Deep links — open via universal link, verify correct screen
• Battery / low power mode — animations should respect
• Cellular vs Wi-Fi — switch mid-session
• Different OS versions — iOS 15 vs 17, Android 11 vs 14

14.14 Touch gestures via Playwright

// Tap (calls touch events on touch-enabled context)
await page.getByRole('button', { name: 'Buy' }).tap();

// Swipe via touchscreen API
const box = await page.locator('.carousel').boundingBox();
const cx = box!.x + box!.width / 2;
const cy = box!.y + box!.height / 2;
await page.touchscreen.tap(cx + 100, cy);
// Or chain low-level: pointer down, move, up