Cross-Browser Testing

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  use: {
    baseURL: process.env.BASE_URL ?? 'http://localhost:3961',
    testIdAttribute: 'data-testid',
  },
  projects: [
    // Playwright's own builds of the three engines
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
    // Branded browser installed on the machine
    { name: 'chrome', use: { ...devices['Desktop Chrome'], channel: 'chrome' } },
    // The full "new headless" Chromium instead of the headless shell
    { name: 'chromium-new-headless', use: { ...devices['Desktop Chrome'], channel: 'chromium' } },
    // Device emulation on top of an engine
    { name: 'Mobile Chrome', use: { ...devices['Pixel 7'] } },
    { name: 'Mobile Safari', use: { ...devices['iPhone 15'] } },
  ],
});

# headless runs only: skip the full Chromium download
npx playwright install --with-deps --only-shell

# the opposite: new headless mode only, skip the headless shell
npx playwright install --with-deps --no-shell

# one engine, and system libraries for it
npx playwright install --with-deps webkit

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

test('search works and reports the browser it ran in', async ({ page, browser, browserName, isMobile, hasTouch }, testInfo) => {
  await page.goto('/books');
  await page.getByTestId('search-input').fill('quiet');
  await page.getByRole('button', { name: 'Search' }).click();
  await expect(page.getByTestId('book-card')).toHaveCount(1);

  const info = await page.evaluate(() => ({
    ua: navigator.userAgent,
    width: window.innerWidth,
    dpr: window.devicePixelRatio,
  }));
  console.log(
    `${testInfo.project.name}: ${browserName} ${browser.version()} mobile=${isMobile} ` +
      `touch=${hasTouch} viewport=${info.width} dpr=${info.dpr} ` +
      `ua=${info.ua.match(/\(([^)]*)\)/)?.[1]} headless-token=${/Headless/.test(info.ua)}`,
  );
});

chromium: chromium 156.0.8078.4 mobile=false touch=false viewport=1280 dpr=1 ua=Windows NT 10.0; Win64; x64 headless-token=false
webkit: webkit 27.2 mobile=false touch=false viewport=1280 dpr=2 ua=Macintosh; Intel Mac OS X 10_15_7 headless-token=false
chrome: chromium 155.0.8059.85 mobile=false touch=false viewport=1280 dpr=1 ua=Windows NT 10.0; Win64; x64 headless-token=false
chromium-new-headless: chromium 156.0.8078.4 mobile=false touch=false viewport=1280 dpr=1 ua=Windows NT 10.0; Win64; x64 headless-token=false
  8 passed (4.7s)

docker run --rm --init --ipc=host \
  -e BASE_URL=http://host.docker.internal:3961 \
  -v "$PWD":/work -w /work \
  mcr.microsoft.com/playwright:v1.64.1-noble \
  npx playwright test --project=firefox --project=chromium --project=webkit --workers=1

test.describe('emulation', () => {
  test.use({
    locale: 'de-DE',
    timezoneId: 'Europe/Berlin',
    colorScheme: 'dark',
    geolocation: { latitude: 52.52, longitude: 13.405 },
    permissions: ['geolocation'],
  });

  test('locale, timezone and color scheme', async ({ page }) => {
    await page.goto('/books');
    const env = await page.evaluate(() => ({
      lang: navigator.language,
      tz: Intl.DateTimeFormat().resolvedOptions().timeZone,
      dark: matchMedia('(prefers-color-scheme: dark)').matches,
    }));
    expect(env).toEqual({ lang: 'de-DE', tz: 'Europe/Berlin', dark: true });
  });

  test('geolocation', async ({ page }) => {
    await page.goto('/books');
    // The Geolocation API only exists in secure contexts: https, or http://localhost.
    test.skip(!(await page.evaluate(() => window.isSecureContext)), 'not a secure context');
    const lat = await page.evaluate(
      () => new Promise<number>((resolve) => navigator.geolocation.getCurrentPosition((p) => resolve(p.coords.latitude))),
    );
    expect(lat).toBe(52.52);
  });
});

npx cypress run --browser chrome
npx cypress run --browser firefox
npx cypress run --browser edge
npx cypress run --browser webkit      # needs experimentalWebKitSupport and playwright-webkit
npx cypress run --browser /usr/bin/chromium

  │ Browser:        Electron 146 (headless) (deprecated)                                           │

Warning: The Electron browser is deprecated as a test browser and will be removed in a future version of Cypress.

Switch to Chrome or another installed browser to avoid a breaking change when you upgrade.

import { defineConfig } from 'cypress';

export default defineConfig({
  defaultBrowser: 'chrome',
  experimentalWebKitSupport: true,
  e2e: {
    baseUrl: process.env.CYPRESS_BASE_URL ?? 'http://localhost:3961',
    video: false,
    supportFile: false,
    setupNodeEvents(on, config) {
      // Keep only the browsers this project is validated on.
      const supported = ['chrome', 'firefox', 'edge', 'webkit'];
      config.browsers = config.browsers.filter((b) => supported.includes(b.name));
      console.log('browsers:', config.browsers.map((b) => `${b.name} ${b.majorVersion}`).join(', '));
      on('task', { log(m: string) { console.log(m); return null; } });
      return config;
    },
  },
});

Can't run because you've entered an invalid browser name.

Browser: electron was not found on your system or is not supported by Cypress.

Cypress supports the following browsers:
 - electron
 - chrome
 - chromium
 - chrome-for-testing
 - edge
 - firefox

You can also use a custom browser: https://on.cypress.io/customize-browsers

Available browsers found on your system are:
 - chrome
 - firefox

describe('Bookshelf across browsers', () => {
  it('searches the catalogue and reports the browser', () => {
    cy.visit('/books');
    cy.get('[data-testid=search-input]').type('quiet{enter}');
    cy.get('[data-testid=book-card]').should('have.length', 1);
    cy.then(() => {
      const { name, family, version, channel, isHeadless } = Cypress.browser;
      cy.task('log', `${name} ${version} family=${family} channel=${channel} headless=${isHeadless}`);
    });
  });

  // Runs only in Firefox
  it('Firefox-specific check', { browser: 'firefox' }, () => {
    cy.visit('/books');
    cy.window().its('navigator.userAgent').should('include', 'Firefox');
  });

  // Skipped in Chrome
  it('everything except Chrome', { browser: '!chrome' }, () => {
    expect(Cypress.isBrowser('chrome')).to.be.false;
  });

  it('branches on the browser at run time', () => {
    cy.visit('/books');
    if (Cypress.isBrowser({ family: 'chromium' })) {
      cy.log('Chromium family');
    } else {
      cy.log('Not Chromium');
    }
  });

  it('emulates a phone viewport, but not touch', () => {
    cy.viewport('iphone-x');
    cy.visit('/books');
    cy.window().its('innerWidth').should('eq', 375);
    cy.window().its('navigator.maxTouchPoints').should('eq', 0);
  });
});

# inside the Playwright Ubuntu 24.04 container, with the Cypress 16.2.0 binary in /cycache
apt-get update && apt-get install -y xvfb libgbm1 libgtk-3-0 libnotify4 libnss3 libxss1 libasound2t64 libxtst6
export CYPRESS_CACHE_FOLDER=/cycache/Cypress
npx cypress run --browser webkit

class CrossBrowserTest {
  // Empty: run Chrome locally. Set -Dgrid=http://localhost:4444 to use a Grid.
  static final String GRID = System.getProperty("grid", "");
  static final String APP = System.getProperty("app", "http://localhost:3961");

  WebDriver driver;

  @AfterEach
  void quit() {
    if (driver != null) driver.quit();
  }

  static Stream<Capabilities> browsers() {
    ChromeOptions chrome = new ChromeOptions();
    chrome.addArguments("--headless=new");
    FirefoxOptions firefox = new FirefoxOptions();
    firefox.addArguments("-headless");
    return GRID.isEmpty() ? Stream.of(chrome) : Stream.of(chrome, firefox);
  }

  WebDriver start(Capabilities options) throws Exception {
    if (GRID.isEmpty()) {
      return new ChromeDriver((ChromeOptions) options);
    }
    return RemoteWebDriver.builder().address(new URI(GRID)).oneOf(options).build();
  }

  @ParameterizedTest(name = "[{index}] {0}")
  @MethodSource("browsers")
  void searchWorksInEveryBrowser(Capabilities options) throws Exception {
    driver = start(options);
    driver.get(APP + "/books");
    driver.findElement(By.cssSelector("[data-testid=search-input]")).sendKeys("quiet");
    driver.findElement(By.cssSelector("[data-testid=search-submit]")).click();
    new WebDriverWait(driver, Duration.ofSeconds(5))
        .until(ExpectedConditions.textToBePresentInElementLocated(
            By.cssSelector("[data-testid=result-count]"), "1 book found"));

    Capabilities used = ((RemoteWebDriver) driver).getCapabilities();
    System.out.println(used.getBrowserName() + " " + used.getBrowserVersion()
        + " on " + used.getPlatformName());
    assertEquals(options.getBrowserName(), used.getBrowserName());
  }
}

chrome 155.0.8059.79 on linux
firefox 158.0 on linux
[INFO] Tests run: 2, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 3.476 s -- in demo.CrossBrowserTest

import os

import pytest
from selenium import webdriver

GRID = os.environ.get("GRID_URL", "")  # empty: run Chrome locally
APP = os.environ.get("BASE_URL", "http://localhost:3961")


def chrome_options():
    options = webdriver.ChromeOptions()
    options.add_argument("--headless=new")
    return options


def firefox_options():
    options = webdriver.FirefoxOptions()
    options.add_argument("-headless")
    return options


BROWSERS = {"chrome": chrome_options, "firefox": firefox_options}


def pytest_generate_tests(metafunc):
    if "browser" in metafunc.fixturenames:
        names = list(BROWSERS) if GRID else ["chrome"]
        metafunc.parametrize("browser", names)


@pytest.fixture
def driver(browser):
    options = BROWSERS[browser]()
    if GRID:
        d = webdriver.Remote(command_executor=GRID, options=options)
    else:
        d = webdriver.Chrome(options=options)
    yield d
    d.quit()

from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.ui import WebDriverWait

from conftest import APP


def test_search_works_in_every_browser(driver, browser):
    driver.get(f"{APP}/books")
    driver.find_element(By.CSS_SELECTOR, "[data-testid=search-input]").send_keys("quiet")
    driver.find_element(By.CSS_SELECTOR, "[data-testid=search-submit]").click()
    WebDriverWait(driver, 5).until(
        EC.text_to_be_present_in_element((By.CSS_SELECTOR, "[data-testid=result-count]"), "1 book found")
    )
    caps = driver.capabilities
    print(caps["browserName"], caps["browserVersion"], caps["platformName"])
    assert caps["browserName"] == browser

services:
  selenium-hub:
    image: selenium/hub:4.51.0
    ports: ["${GRID_PORT:-4444}:4444"]
  chrome:
    image: selenium/node-chrome:4.51.0
    shm_size: 2gb
    depends_on: [selenium-hub]
    extra_hosts: ["host.docker.internal:host-gateway"]
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443
      - SE_NODE_MAX_SESSIONS=2
  firefox:
    image: selenium/node-firefox:4.51.0
    shm_size: 2gb
    depends_on: [selenium-hub]
    extra_hosts: ["host.docker.internal:host-gateway"]
    environment:
      - SE_EVENT_BUS_HOST=selenium-hub
      - SE_EVENT_BUS_PUBLISH_PORT=4442
      - SE_EVENT_BUS_SUBSCRIBE_PORT=4443
      - SE_NODE_MAX_SESSIONS=2

$ curl -s localhost:39614/status | jq -r '.value.nodes[] | "\(.osInfo.name) maxSessions=\(.maxSessions) slots=\(.slots|length) \(.slots[0].stereotype.browserName) \(.slots[0].stereotype.browserVersion)"'
Linux maxSessions=2 slots=2 chrome 155.0
Linux maxSessions=2 slots=2 firefox 158.0