Q4 of 42 · Playwright
What browsers does Playwright support?
Short answer
Short answer: Chromium (Chrome, Edge), Firefox, and WebKit (Safari engine) — all bundled with Playwright. Plus channel options for installed Chrome / Edge / branded versions. Mobile emulation works via the `devices` preset. Real iOS Safari and Android Chrome aren't available, but Playwright does ship a real WebKit binary that approximates Safari closely.
Detail
Playwright bundles three browser engines: Chromium, Firefox, and WebKit. They're downloaded by npx playwright install and live in a Playwright-managed directory, isolated from your system browsers.
Channels let you target installed branded versions:
use: { browserName: 'chromium', channel: 'chrome' } // installed Chrome
use: { browserName: 'chromium', channel: 'msedge' } // installed Edge
use: { browserName: 'chromium', channel: 'chrome-beta' }
The default (channel unset) uses the bundled Chromium build, which is pinned per Playwright version. Use channels when you need parity with a specific user-base browser (most teams stick with bundled Chromium).
Mobile emulation via device descriptors:
import { devices } from '@playwright/test';
use: { ...devices['iPhone 14 Pro'] }
This sets viewport, user agent, and touch capability. It's emulation, not a real iOS device — touch gestures and certain Safari quirks may differ. For real iOS, you'd need Appium, BrowserStack, or similar.
WebKit ≠ Safari, but close. Playwright's WebKit is the same engine that powers Safari, with most quirks reproduced. Some Safari-specific behaviour (extensions, ITP, particular permission prompts) doesn't fully match. For high-fidelity Safari, BrowserStack or a real Mac is better.
Per-project browser config in playwright.config.ts is the typical pattern for cross-browser CI: define one project per browser, and the runner spawns each in parallel.
// EXAMPLE
playwright.config.ts
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'] } },
{ name: 'mobile-safari', use: { ...devices['iPhone 14 Pro'] } },
{ name: 'edge', use: { ...devices['Desktop Edge'], channel: 'msedge' } },
],
});