Playwright Cross Browser Testing

A restaurant menu can look perfectly appetizing on one printer but come out with faded colors on another. Websites face the same risk across different browsers, where the same code can render buttons, fonts, or layouts slightly differently depending on which browser engine displays it.

One Test, Three Engines

          Test Script
       /       |        \
      v        v         v
  Chromium   Firefox    WebKit
  (Chrome,    (Firefox)  (Safari's
   Edge)                  engine)

Why Different Engines Matter

Chromium powers Chrome and Edge. Firefox uses its own separate engine. WebKit powers Safari on both Mac and iPhone. A checkout button might work flawlessly on Chromium but silently misbehave on WebKit, and only testing all three catches this kind of gap.

Configuring Multiple Browser Projects

module.exports = {
  projects: [
    { name: 'chromium', use: { browserName: 'chromium' } },
    { name: 'firefox', use: { browserName: 'firefox' } },
    { name: 'webkit', use: { browserName: 'webkit' } },
  ],
};

Each project entry represents one browser engine. Playwright treats them as separate test runs, each producing its own individual results.

Running Every Test Across All Browsers

npx playwright test

This single command runs the entire test suite three times over, once per configured browser project, without needing to write any browser-specific code.

Running Tests on One Browser Only

npx playwright test --project=webkit

This limits the run to WebKit alone, useful when investigating a bug report specifically mentioning Safari on an iPhone.

Handling a Browser-Specific Difference

test('date picker opens correctly', async ({ page, browserName }) => {
  await page.goto('https://example.com/booking');
  if (browserName === 'webkit') {
    await page.getByLabel('Check-in Date').tap();
  } else {
    await page.getByLabel('Check-in Date').click();
  }
});

Most tests need no special handling at all. Rare cases like this one adjust slightly based on the current browser, checked through the built-in browserName variable.

A Real-World Example

A travel booking site works perfectly during manual testing on the developer's own Chrome browser. A customer using Safari on an iPhone reports that the date picker never opens. Running the same test suite against WebKit reproduces this exact bug immediately, well before more customers encounter it.

Balancing Coverage and Test Time

Running every test on every browser triples the total test time. Many teams run the full suite on Chromium for every code change, while running the complete three-browser suite only once daily or before a release.

Quick Practice Task

Add a firefox and webkit project to your playwright.config.js file, then run your existing test suite across all three configured browsers.

Key Takeaways

• Playwright supports Chromium, Firefox, and WebKit browser engines.
• Projects inside the config file define which browsers a suite tests.
• Most tests need no special code to work across every browser.
• Cross browser testing catches real rendering and behavior differences early.