Cross-Browser Testing with Playwright Projects (Chromium, Firefox, WebKit)

One Playwright test suite can run in Chrome, Edge, Firefox and Safari’s engine without changing a single test. In this lesson you will configure browser projects, test branded browsers, handle browser-specific cases and design a cost-effective cross-browser strategy.

---

🌐 Why Cross-Browser Testing?

Your users do not all use Chrome. A layout that works in Chromium can break in Safari, a date picker can behave differently in Firefox, and a CSS feature may be missing in an older engine. Cross-browser testing runs the same tests in several browsers to catch those differences before users do.

Playwright makes this unusually easy: one test suite, one API, three browser engines.

Engine	Covers	Notes
Chromium	Google Chrome, Microsoft Edge, Opera, Brave	Most used engine worldwide
Firefox	Mozilla Firefox	Playwright ships a patched Firefox build
WebKit	Apple Safari (macOS and iOS)	Runs on Windows, Linux and macOS through Playwright’s WebKit build

---

🧭 Projects: One Config, Many Browsers

Browsers are configured as projects in playwright.config.ts. Each test runs once per project:

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

export default defineConfig({
  testDir: './tests',
  use: { baseURL: 'https://www.saucedemo.com' },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
  ],
});

The devices presets set a realistic viewport, user agent and device scale factor for each browser. Run the suite:

npx playwright test                                    # all three browsers
npx playwright test --project=firefox                  # one browser
npx playwright test --project=chromium --project=webkit

The HTML report groups results by project, so you can see immediately if a test fails in only one browser.

---

🏷️ Test Branded Browsers: Chrome and Edge

Playwright’s Chromium is open-source Chromium. To test the actual Google Chrome or Microsoft Edge your users install, use a channel:

projects: [
  { name: 'Google Chrome',  use: { ...devices['Desktop Chrome'], channel: 'chrome' } },
  { name: 'Microsoft Edge', use: { ...devices['Desktop Edge'],   channel: 'msedge' } },
],

If they are not installed on the machine:

npx playwright install chrome
npx playwright install msedge

---

🔧 Browser-Specific Code: browserName

Sometimes a feature does not exist in one browser, or a known browser bug needs a workaround. The browserName fixture tells you which browser is running:

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

test('export button works', async ({ page, browserName }) => {
  test.skip(browserName === 'webkit', 'Export is not supported in WebKit yet, see ticket QA-101');
  // ...
});

test('log the current browser', async ({ browserName }) => {
  console.log('Running in ' + browserName); // 'chromium' | 'firefox' | 'webkit'
});

You can also skip or configure a whole file for one browser:

test.skip(({ browserName }) => browserName === 'firefox', 'Feature not supported in Firefox yet');

---

⚙️ Different Settings per Browser

Each project can override any use option, and can include or exclude tests:

projects: [
  { name: 'chromium', use: { ...devices['Desktop Chrome'], viewport: { width: 1920, height: 1080 } } },
  { name: 'firefox',  use: { ...devices['Desktop Firefox'] }, testIgnore: /.*visual\.spec\.ts/ },
  { name: 'webkit',   use: { ...devices['Desktop Safari'] }, retries: 2 },
],

Here visual tests are skipped in Firefox (one baseline set is enough, see visual testing), and WebKit gets extra retries while a known issue is investigated.

---

🚀 A Practical Cross-Browser Strategy

Running every test in every browser on every commit is slow and usually unnecessary. A common, cost-effective approach:

When	What runs
Every pull request	Full suite in Chromium, @smoke tests in Firefox and WebKit
Nightly	Full suite in all browsers, including branded Chrome and Edge
Before a release	Full suite in all browsers plus mobile emulation

Combine projects with tags (tags and grep):

projects: [
  { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  { name: 'firefox-smoke', grep: /@smoke/, use: { ...devices['Desktop Firefox'] } },
  { name: 'webkit-smoke',  grep: /@smoke/, use: { ...devices['Desktop Safari'] } },
],

In CI, split browsers across parallel jobs or machines to keep the pipeline fast; this is covered in the parallel execution and GitHub Actions lessons in Module 12.

---

🐞 Typical Cross-Browser Differences to Watch For

• Fonts and layout: text wraps differently, so elements move. Prefer role and text locators over position-based ones.
• Date and number inputs: native pickers differ; fill values instead of clicking calendar widgets.
• Timing: WebKit and Firefox can be slower on some pages; rely on auto-waiting, never fixed sleeps.
• Permissions and APIs: clipboard, notifications and some media APIs differ between engines.
• Downloads and new tabs: behave the same in Playwright’s API, but always assert the result, not the browser UI.

---

📝 Assignment

1. Make sure your config has Chromium, Firefox and WebKit projects, run your Sauce Demo tests in all three, and compare the timings in the HTML report.
2. Add a Google Chrome project with channel: 'chrome' and run only that project.
3. Log browserName in a test, then skip that test in WebKit with a clear reason.
4. Create firefox-smoke and webkit-smoke projects that only run @smoke tests.
5. Exclude visual tests from the Firefox project with testIgnore.
6. Bonus: write a short “cross-browser strategy” for your project: what runs on pull requests, nightly and before releases.

---

❓ FAQ

🤔 How do I run Playwright tests in multiple browsers?

Define a project per browser in playwright.config.ts (Chromium, Firefox, WebKit). npx playwright test runs every test once per project.

🤔 How do I run Playwright tests in Google Chrome instead of Chromium?

Add a project with channel: 'chrome' and install Chrome with npx playwright install chrome if needed. Use channel: 'msedge' for Microsoft Edge.

🤔 Does Playwright support Safari?

Playwright tests WebKit, the engine behind Safari, on Windows, Linux and macOS. It does not drive the branded Safari application.

🤔 How do I skip a test in one browser?

Use the browserName fixture: test.skip(browserName === 'webkit', 'reason').

🤔 How do I run tests in only one browser?

Pass --project=chromium (or another project name) on the command line.

---

🎯 Next Steps

• 🎭 Mobile Device Emulation
• 🎭 Multiple Config Files for API and UI
• 🎭 Playwright vs Selenium vs Cypress
• 🎭 Playwright Tutorial with TypeScript