Does Playwright support headless mode? Why is it useful?

The Answer

Yes, Playwright runs headless by default. In headless mode, the browser runs as a background process with no visible UI. This makes tests faster, requires no display server, and is the standard mode for CI/CD pipelines.

Deep Dive Explanation

Headless mode is 30-60% faster than headed mode because the browser skips painting, layout, and rendering to screen. It also works in server environments with no display (Docker containers, Linux VMs in CI). However, some CSS animations, canvas rendering, and WebGL features may behave slightly differently in headless — always validate critical visual tests in headed mode too.

example.spec.ts

// Headless is the DEFAULT - no config needed for CI
// npx playwright test  →  runs headless automatically

// Explicitly set headless mode
export default defineConfig({
  use: { headless: true },  // Default
});

// Switch to headed (for local debugging)
// npx playwright test --headed

// Or in config for local dev
export default defineConfig({
  use: {
    headless: !process.env.HEADED, // Headed when HEADED=1 env var is set
  },
});

// Chromium-specific: CDP headless (new headless)
export default defineConfig({
  use: {
    channel: 'chrome',
    headless: true, // Uses 'new' headless mode in Chrome
  },
});