Chromium, Firefox and WebKit

Playwright's API is unified, but engines differ in rendering, permissions, and edge cases. This lesson highlights practical differences when tests pass in Chromium but fail elsewhere.

Engine Quirks

Firefox may handle file inputs and PDF downloads differently. WebKit has stricter date/time pickers and ITP cookie behavior. Chromium often has the most permissive devtools-style features.

Playwright abstracts most differences, but visual snapshots must be baselined per project — never share one screenshot across engines.

test('works everywhere', async ({ page, browserName }) => {
  await page.goto('/form');
  if (browserName === 'webkit') {
    // WebKit-specific date input handling if needed
  }
  await page.getByRole('button', { name: 'Submit' }).click();
});

browserName fixture avoids branching unless truly necessary.

Conditional Logic

test.skip(({ browserName }) => browserName !== 'chromium', 'Chrome-only feature');
test.fixme(({ browserName }) => browserName === 'firefox', 'Known FF bug #123');

Skip/fixme per browser sparingly — document linked issues.
Separate snapshot baselines per project name.
Compare trace across engines for same failure.
Most tests should be engine-agnostic.

Engine Comparison

Quick reference for teams.

Topic	Notes
Visual snapshots	Per-browser baseline files
Fonts	Rendering differs — mask dynamic text
Downloads	API consistent; OS save path differs
Video codec	WebKit may differ in recording
Permissions	All support geolocation mock
CI cost	WebKit + FF ~2x time vs Chromium alone

Snapshots Per Project

expect: {
  toHaveScreenshot: {
    maxDiffPixels: 100,
  },
},
// Files: homepage-chromium.png, homepage-webkit.png

Engine-Specific Behavior

WebKit may differ on date inputs and scroll behavior. Run engine-specific tests only when analytics show meaningful Safari traffic.

Common Mistakes

One screenshot baseline for all browsers.
browserName branching everywhere instead of fixing app compatibility.
Skipping Firefox/WebKit permanently without tracking bugs.
Engine-specific hacks without comments explaining why.

Key Takeaways

API is unified; rendering and edge cases differ.
Baseline visuals separately per engine.
Use browserName for rare conditional logic.
Investigate cross-browser failures with traces.

Pro Tip

When WebKit fails but Chromium passes, check flexbox gaps, 100vh mobile Safari, and date input types first — frequent culprits.