Multi-Browser Testing

The Device Lab combines device emulation with Playwright's multi-browser engine. This page covers how to test across Chromium, Firefox, and WebKit on emulated devices.

Browser Availability per Device

Playwright supports all three engines regardless of the emulated device. An "iPhone 14 Pro" descriptor can run on Chromium, Firefox, or WebKit:

Device	Chromium	Firefox	WebKit
iPhone 14 Pro	Viewport + UA emulated	Viewport + UA emulated	Closest to real Safari
Pixel 7	Closest to real Chrome	Viewport + UA emulated	Viewport + UA emulated
iPad Pro 11	Viewport + UA emulated	Viewport + UA emulated	Closest to real Safari
Desktop Chrome	Native behavior	Cross-check	Cross-check

When to Use WebKit

For Apple device descriptors (iPhone, iPad), use WebKit to get the closest approximation of real Safari behavior. Chromium and Firefox emulate the viewport and user agent but still use their own rendering engines.

Cross-Browser Differences on Mobile

Mobile emulation reveals browser differences that desktop testing often misses:

Behavior	Chromium	Firefox	WebKit
Touch events	Emulated touch + mouse fallback	Emulated touch + mouse fallback	Emulated touch only
Viewport meta	Respects initial-scale	Respects initial-scale	May auto-zoom on small text
Position: fixed	Consistent	Consistent	Scroll-dependent quirks
Input zoom	Controlled by viewport meta	Controlled by viewport meta	Auto-zooms inputs < 16px font
CSS safe-area-inset	Returns 0 (no notch)	Returns 0	Returns 0 (real values need device)

Running Multi-Browser Device Tests

There are two approaches to testing the same flow across multiple browser+device combinations:

Sequential Runs

Select a device, choose a browser, run the test, then repeat with a different browser:

Run 1: iPhone 14 Pro + WebKit    → Pass
Run 2: iPhone 14 Pro + Chromium  → Pass
Run 3: iPhone 14 Pro + Firefox   → Fail (touch event ordering)

CI Matrix Strategy

In CI pipelines, use a matrix to parallelize all combinations:

strategy:
  matrix:
    include:
      - device: "iPhone 14 Pro"
        browser: webkit
      - device: "iPhone 14 Pro"
        browser: chromium
      - device: "Pixel 7"
        browser: chromium
      - device: "Desktop Chrome"
        browser: chromium
      - device: "Desktop Chrome"
        browser: firefox

Device Lab Recordings

Tests generated by the Device Lab recorder are browser-agnostic. They use Playwright API calls that work on all three engines. The device descriptor is defined in the project configuration, not hardcoded in the test.

Common Issues Across Browsers

Touch Event Differences

Chromium and Firefox dispatch both touch and mouse events when hasTouch is enabled. WebKit dispatches touch events only. Tests that rely on mousedown/mouseup instead of click may behave differently on WebKit.

Mobile Viewport Rendering

All three browsers respect the viewport dimensions from device descriptors, but the rendering of scrollbars, zoom behavior, and font smoothing differs. Visual regression tests should set per-browser baselines.

Network API Timing

Mobile device emulation does not change network timing. Tests that pass under desktop network conditions will also pass under mobile emulation. To test slow-network scenarios, configure Playwright's network throttling independently:

await page.route('**/*', route => {
  route.continue({ headers: route.request().headers() });
}, { timeout: 3000 });

Physical Device Gap

Software emulation cannot replicate all aspects of physical devices — real GPU performance, actual cellular latency, native browser features, and OS-level gestures remain untestable through emulation alone.