Browsers

Browser Engines

Chromium covers Chrome and Edge channels. Firefox uses Mozilla's engine. WebKit powers Safari — critical for iOS/macOS user bases.

Headless mode is default for speed in CI; headed helps local debugging. channel: 'chrome' uses installed Google Chrome instead of bundled Chromium.

projects: [
  { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
  { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
  { name: 'webkit', use: { ...devices['Desktop Safari'] } },
]

Run all: npx playwright test — or filter --project=webkit.

Launch Options

use: {
  headless: true,
  channel: 'chrome', // or 'msedge'
  launchOptions: { slowMo: 100 },
}

• playwright install downloads all three engines.
• channel uses system-installed browser binary.
• Headless is not 'fake' — modern headless matches headed closely.
• CI often runs chromium only for speed; nightly full matrix.

Browser CLI Reference

Install and run specific browsers.

Why WebKit Matters

Safari has unique CSS, date input, and storage behaviors. Bugs that only appear in WebKit are common on iOS. Include WebKit in pre-release regression, even if PR CI runs Chromium only.

Using Installed Chrome via channel

use: { channel: 'chrome' } drives the user's installed Google Chrome instead of bundled Chromium — useful when codec or policy differences matter.

Common Mistakes

• Chromium-only testing for Safari-heavy user base.
• Assuming headless and headed always identical — verify critical flows headed occasionally.
• Not installing browsers in CI before test run.
• Confusing Playwright Chromium with system Chrome channel differences.

Key Takeaways

• Three engines: Chromium, Firefox, WebKit.
• Projects map tests to browser configurations.
• WebKit catches Safari-class bugs.
• Balance CI speed vs coverage with project strategy.