Answer
Headless Mode in Playwright
Headless mode means the browser runs without a visible window/GUI — all browser operations happen in memory. This is the default in Playwright and ideal for CI/CD environments.
Default Behavior
Bash
# Playwright runs headless by default
npx playwright test
# To see the browser UI:
npx playwright test --headed
Configuration in playwright.config.ts
TypeScript
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
headless: false, // Show browser window
// headless: true, // Hide browser (default)
},
});
Per-Launch Override in Tests
TypeScript
import { chromium } from '@playwright/test';
const browser = await chromium.launch({ headless: false });
const page = await browser.newPage();
await page.goto('https://example.com');
Slow Motion (for debugging)
Combine headless:false with slowMo to watch each action:
TypeScript
export default defineConfig({
use: {
headless: false,
slowMo: 500, // 500ms delay between each action
},
});
Or via CLI:
Bash
npx playwright test --headed --slow-mo=500
When to Use Each Mode
| Mode | When to Use |
|---|---|
| Headless (default) | CI/CD pipelines, fast local runs |
| Headed | Debugging, recording traces, demo |
| Headless + slowMo | Debugging without visual window clutter |
Headed vs Headless Performance
- ✓Headless is ~10-20% faster due to no rendering overhead
- ✓Headless cannot access some browser features (e.g., certain video codecs)
- ✓Some anti-bot systems detect headless browsers — for those use headed or stealth mode
Environment Variable Override
Bash
# Force headed via env var
HEADED=1 npx playwright test
# In playwright.config.ts
use: {
headless: !process.env.HEADED,
}