Stop 07 · Web Automation TestingTopics · 8/10

Cross-Browser Testing

In short

Your app works perfectly in Chrome. Then a customer on an iPhone says the Pay button is hidden. Browsers draw pages differently, so real users meet bugs you never saw.

Verifying an application works consistently across different browsers (Chrome, Firefox, Safari) — a real source of bugs given browser rendering and JavaScript engine differences.

The purple blob cooks rotis on a gas burner, an induction plate and a clay tandoor side by side.

Think of it like this

Same roti, three stoves

Same dough, same hands. On gas it puffs nicely, on induction it browns unevenly, in the tandoor it chars at the edges. The recipe didn't change, the heat did. Browsers are different stoves for the same code.

Watch it happen

One test, a matrix of browsers

Chrome

Edge

Firefox

Safari

iOS Safari

1/5The same checkout test runs against each browser in the list.

The big ideas

What you need to know

Engines matter

Chromium, Gecko and WebKit are the three big engines. Test at least one of each.

Use real usage data

Ask for analytics. If 40% of users are on mobile Safari, that's a must-test browser.

Run in parallel

Playwright projects or a Selenium Grid run the same suite across browsers at once.

Cloud device labs

Services like BrowserStack and Sauce Labs offer many real browser and OS combinations.

See it in code

Walk through the code

1import { defineConfig, devices } from "@playwright/test";2 3export default defineConfig({4  projects: [5    { name: "chromium", use: { ...devices["Desktop Chrome"] } },6    { name: "firefox", use: { ...devices["Desktop Firefox"] } },7    { name: "webkit", use: { ...devices["Desktop Safari"] } },8    { name: "mobile-safari", use: { ...devices["iPhone 13"] } },9  ],10});

1/3Each project is one browser setup the whole suite runs against.

playwright.config.ts: every test now runs once per project. WebKit here is close to Safari, but not identical.

Save yourself the pain

Common mistakes

Oops

Testing only in Chrome because that's what the team uses.

Do this instead

Test the browsers your users actually use, with at least one browser per engine.

Oops

Assuming WebKit in Playwright on Windows equals real Safari on an iPhone.

Do this instead

It's a close stand-in. For release checks, also test on a real Apple device or cloud lab.

Your mission

Run one test on three engines

~30 min

Quick check

Chrome and Edge pass, but Firefox fails. What's the most useful conclusion?

Go deeper

1Run the same automated test against at least 2 different browsers and compare results.
2Learn about cloud-based cross-browser testing platforms (like BrowserStack) for broader coverage.
3Understand why cross-browser testing scope should be risk-based, not exhaustive by default.