Advanced18 min read

Multi-Browser Testing

Test across Chromium, Firefox, WebKit, devices, and headless modes.

Browser Engines

Chromium covers Chrome and Edge engines. Firefox uses Gecko. WebKit covers Safari behavior on macOS CI (required for Apple engine fidelity).

Cross-browser failures often reveal CSS flex bugs, date input differences, and permission API variance.

projects: [
  { name: "chromium", use: { ...devices["Desktop Chrome"] } },
  { name: "firefox", use: { ...devices["Desktop Firefox"] } },
  { name: "webkit", use: { ...devices["Desktop Safari"] } },
]

Browser Launch Options

launchOptions in config: headless, slowMo, devtools, args for sandbox flags in Docker. channel: "chrome" uses installed Google Chrome instead of bundled Chromium.

CI Docker images need --ipc=host or disable sandbox args per Playwright docs.

use: {
  launchOptions: {
    args: ["--disable-dev-shm-usage"],
  },
}

Headless vs Headed

Headless default fast for CI. Headed useful local debugging and demo. headless: false in config or --headed CLI flag.

New headless mode in Chromium closer to headed behavior—enable via channel config when needed.

Trace and video work in both modes
Headed required for some extension testing scenarios
XVFB runs headed on Linux CI without display

Device Emulation

devices preset from @playwright/test includes iPhone, Pixel, iPad viewports, userAgent, touch, deviceScaleFactor. isMobile and hasTouch affect click behavior.

Test responsive layouts and mobile navigation patterns—not just desktop.

{ name: "Mobile Chrome", use: { ...devices["Pixel 7"] } }

Browser Selection Strategy

Run full matrix nightly; PR runs chromium only for speed with weekly full browser sweep. Prioritize WebKit if significant Safari user base.

Track browser-specific failures separately—do not mute without ticket.