How do you configure a test framework to run cross-browser, and what are the common pitfalls?

Playwright — native cross-browser via projects:

// playwright.config.ts
projects: [
  { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
  { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
  { name: 'mobile',   use: { ...devices['iPhone 14'] } },
],

Run all: npx playwright test Run one: npx playwright test --project=firefox

Selenium — factory + grid:

public static WebDriver create(String browser, boolean useGrid) {
    DesiredCapabilities caps = new DesiredCapabilities();
    caps.setBrowserName(browser);

    if (useGrid) {
        return new RemoteWebDriver(new URL(gridUrl), caps);
    }
    return switch (browser) {
        case "chrome"  -> new ChromeDriver();
        case "firefox" -> new FirefoxDriver();
        default        -> throw new IllegalArgumentException(browser);
    };
}

Common pitfalls:

1. Chrome-specific CSS/behaviour — some CSS animations behave differently; :focus-visible support varies. Use Playwright's expect APIs which are cross-browser by design.

2. Hardcoded viewport sizes — await page.setViewportSize({width:1920, height:1080}) passes in Chrome but not mobile Safari. Use devices['iPhone 14'] config.

3. Playwright-only APIs on Selenium tests — page.locator() chaining, allure.step(), etc. aren't available if you later need Selenium. Abstract behind an adapter if cross-framework is a requirement.

4. Running cross-browser on every PR — full cross-browser is slow. Strategy: PR → Chromium only (fast feedback); nightly → all browsers (comprehensive). Tag Firefox/Safari tests for the nightly job.

5. flaky webkit tests — Safari/WebKit has stricter security policies. Isolate known WebKit-specific failures and track separately.