How to emulate mobile devices with Playwright

If you’re using Playwright for end-to-end testing, you should check out Playwright Check Suites and start testing in production.

Playwright controls headless desktop browsers that can also emulate mobile devices. And while device emulation can’t replace testing on mobile devices entirely, it’s a practical and quick-to-setup approach to testing mobile scenarios.

Device emulation is well suited to test if your site behaves correctly across multiple viewport sizes and correctly handles user-agent strings. But if your site relies on device-specific browser features, an iPhone emulation running in a Chromium browser might lead to false positives.

This guide explains how to define viewport sizes, device pixel ratio and user-agent strings using Playwright.

Defining the user agent string

If your site parses the user agent string to serve a different experience to mobile users, define the userAgent in your automation scripts.

emulate-mobile.spec.ts

import { test } from '@playwright/test'

test.use({
  userAgent:
    'Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/16.0 Mobile/14E304 Safari/602.1',
})

test('emulate iPhone SE', async ({ page }) => {
  await page.goto("https://danube-web.shop/")

  // perform your tests
})

Defining viewport size and pixel density

If your site follows responsive web design practices and renders elements depending on device viewport size, define a mobile viewport and pixel density.

emulate-mobile-viewport.spec.ts

const { test } = require('@playwright/test')

test.use({
  viewport: {
    width: 320,
    height: 568
  },
  deviceScaleFactor: 2
})

test('emulate iPhone SE', async ({ page }) => {
  await page.goto('https://danube-web.shop/')

  // perform your tests
})

Use built-in device registries

Playwright includes a built-in device registry to access mobile device characteristics quickly.

• Playwright devices

Leverage the pre-defined devices to emulate mobile devices.

emulate-mobile-builtin.spec.ts

import { test, devices } from '@playwright/test'
const iPhone = devices['iPhone SE']

test.use({
  ...iPhone,
})

test('emulate iPhone SE', async ({ page }) => {
  await page.goto('https://danube-web.shop/')

  // perform your tests
})

Further reading

1. Measuring page performance
2. Playwright’s emulation documentation

Bugs don’t stop at CI/CD. Why would Playwright?

Sign up and start using Playwright for end-to-end monitoring with Checkly.