How do you run tests across Chromium, Firefox and WebKit?

Cross-browser coverage starts with projects. Each project selects an engine and optionally a device or viewport. The same test file runs under each project, so a browser-specific failure is isolated without duplicating the test.

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

export default defineConfig({
  projects: [
    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
    { name: "webkit", use: { ...devices["Desktop Safari"] } },
  ],
});

npx playwright install
npx playwright test --project=webkit
npx playwright test --project=chromium --project=firefox

A sensible strategy

• Run one fast engine on every commit and the full matrix on a schedule or before release
• Target the engines your users actually use, weighted by analytics
• Keep browser-specific assertions rare and explain why they differ
• Use the same test data and environment across projects to isolate engine effects
• Treat WebKit as an engine check, not as a substitute for real Safari testing

Most failures across engines come from CSS layout, input behaviour, date and locale formatting, or unsupported APIs. A cross-browser failure is useful evidence: it often reveals a real compatibility bug that a single-engine suite would miss.