Cross-Browser Testing

What it is

Cross-browser testing runs the same web UI suite against multiple rendering engines and device profiles, so behaviour that differs between them is caught before users find it. The core problem is that browsers are not interchangeable: layout, CSS support, fonts, and JavaScript APIs all vary.

1
           ┌──────────────┐
2
  suite ──▶│ Chromium     │  Blink  (Chrome, Edge, Opera)
3
           │ Firefox      │  Gecko
4
           │ WebKit       │  Safari (macOS, iOS)
5
           └──────────────┘
6
              ▲ local engines          ▲ real devices + OS (cloud)

A pragmatic strategy is the test pyramid for browsers: run the full suite on one primary engine on every commit, and a smaller smoke suite on the remaining engines and real devices.

When to use it / when to avoid it

Use it for

User-facing journeys on browsers your analytics say matter (Chrome, Safari, mobile Safari)
CSS/layout features with known engine differences (grid, container queries, :has())
File uploads, clipboard, media playback and other capability-sensitive features
A release gate before shipping a UI change

Avoid it when

You are running a slow suite on every engine on every commit — sample the matrix instead
The feature is backend-only and has no rendering surface
A single engine already has full coverage and you are only chasing a coverage number
You need native app behaviour — that is mobile

Frameworks & tools

Tool	Ecosystem	Notes
Playwright	Node / Multi	Bundles Chromium, Firefox, WebKit; projects per browser
BrowserStack	Multi	Real browsers and devices in the cloud
Sauce Labs	Multi	Cross-browser and mobile cloud, rich analytics
LambdaTest	Multi	Cloud grid with live and automated sessions
Selenium Grid	Multi	Self-hosted hub for parallel browser nodes
Cypress	Multi	Same suite in Chrome, Edge, Firefox, Electron
TestCafe	Node	Runs in any browser without WebDriver
WebdriverIO	Node	Multi-browser + cloud service integrations

Quick setup

1
npm init playwright@latest
2
npx playwright install

1
import { defineConfig, devices } from '@playwright/test';
2

3
export 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 15'] } },
9
  ],
10
});

1
pip install pytest-playwright
2
playwright install

1
go get github.com/playwright-community/playwright-go

1
<dependency>
2
  <groupId>com.microsoft.playwright</groupId>
3
  <artifactId>playwright</artifactId>
4
  <version>1.48.0</version>
5
  <scope>test</scope>
6
</dependency>

1
dotnet add package Microsoft.Playwright.NUnit
2
pwsh bin/Debug/net8.0/playwright.ps1 install

Example

1
import { test, expect } from '@playwright/test';
2

3
test('checkout works on this engine', async ({ page, browserName }) => {
4
  await page.goto('/checkout');
5
  await page.getByRole('button', { name: 'Pay' }).click();
6
  await expect(page.getByText('Order confirmed')).toBeVisible();
7
  test.info().annotations.push({ type: 'engine', description: browserName });
8
});

1
import pytest
2
from playwright.sync_api import sync_playwright
3

4
@pytest.mark.parametrize("engine", ["chromium", "firefox", "webkit"])
5
def test_checkout(engine):
6
    with sync_playwright() as p:
7
        browser = getattr(p, engine).launch()
8
        page = browser.new_page()
9
        page.goto("http://localhost:3000/checkout")
10
        page.get_by_role("button", name="Pay").click()
11
        assert page.get_by_text("Order confirmed").is_visible()
12
        browser.close()

1
{
2
  "browserName": "safari",
3
  "bstack:options": {
4
    "os": "OS X",
5
    "osVersion": "Sonoma",
6
    "deviceName": "iPhone 15",
7
    "realMobile": true
8
  }
9
}

1
from selenium import webdriver
2
from selenium.webdriver.common.options import ArgOptions
3

4
options = ArgOptions()
5
options.browser_name = "firefox"
6
driver = webdriver.Remote(
7
    command_executor="http://grid:4444/wd/hub",
8
    options=options,
9
)

1
MutableCapabilities caps = new MutableCapabilities();
2
caps.setCapability("browserName", "firefox");
3
caps.setCapability("browserVersion", "latest");
4
caps.setCapability("platformName", "Windows 11");
5
WebDriver driver = new RemoteWebDriver(
6
    new URL("https://ondemand.saucelabs.com/wd/hub"), caps);

1
var options = new ChromeOptions();
2
options.AddAdditionalOption("browserName", "chrome");
3
options.AddAdditionalOption("platformName", "Windows 11");
4
options.BrowserVersion = "latest";
5
var driver = new RemoteWebDriver(
6
    new Uri("https://hub.lambdatest.com/wd/hub"), options);

Anti-patterns & best practices

Define the matrix from data. Use analytics to pick the engines and devices worth testing, not personal preference.
Run the full suite on one primary engine per commit and a smoke subset on the rest.
Do not use engine-specific hacks as a fix. A CSS workaround that only helps one browser should be understood first.
Normalise viewport and timezone. Set them explicitly so failures are about code, not the environment.
Capture screenshots and traces per engine. A failure you cannot reproduce locally needs artifacts.
Budget cloud minutes. Real-device sessions are metered; keep them on critical journeys.