Browser Configuration

🎭 Playwright Browser Configuration

Making Your Browser Pretend to Be Anyone, Anywhere!

🌟 The Story: Your Browser is an Actor

Imagine your browser is like an actor on stage. This actor can:

• Pretend to be in Paris (even though you’re at home!)
• Speak French (locale)
• Wear a dark costume (dark mode)
• Hide backstage (headless mode)

Playwright lets you direct this actor. You tell it where to go, what language to speak, and how to look. Let’s learn how! 🎬

📍 Geolocation Emulation

“Pretend You’re Somewhere Else!”

What is it? Your browser can fake its location. Want to test a website as if you’re in Tokyo? Easy!

Simple Example:

// Tell the browser:
// "You are now in Paris!"
await context.grantPermissions(['geolocation']);

const context = await browser.newContext({
  geolocation: {
    latitude: 48.8566,   // Paris
    longitude: 2.3522
  }
});

Why use it?

• Test location-based features
• See what users in other countries see
• Check maps and delivery apps

🌍 Locale and Timezone

“Speak the Language, Live the Time!”

Locale = What language and format your browser uses Timezone = What clock your browser shows

Simple Example:

const context = await browser.newContext({
  locale: 'fr-FR',           // French
  timezoneId: 'Europe/Paris' // Paris time
});

What changes?

🎨 Color Scheme Emulation

“Light Mode or Dark Mode? You Choose!”

Websites can look different in dark mode. Test both without changing your computer settings!

Simple Example:

// Test dark mode
const darkContext = await browser.newContext({
  colorScheme: 'dark'
});

// Test light mode
const lightContext = await browser.newContext({
  colorScheme: 'light'
});

Options:

• 'light' - Bright background
• 'dark' - Dark background
• 'no-preference' - System default

🔐 Permissions Handling

“May I Use Your Camera?”

Websites ask for permissions. Playwright can say YES or NO automatically!

Simple Example:

const context = await browser.newContext({
  permissions: ['geolocation', 'notifications']
});

// Or grant later:
await context.grantPermissions(['camera', 'microphone']);

// Or deny:
await context.clearPermissions();

Common Permissions:

• 'geolocation' - Location
• 'notifications' - Alerts
• 'camera' - Webcam
• 'microphone' - Audio

👻 Headless Mode

“The Invisible Browser!”

Headless = Browser runs invisibly (no window pops up)

graph TD
    A["Your Test Code"] --> B{Headless?}
    B -->|Yes| C["🔲 No Window<br>Fast & Quiet"]
    B -->|No| D["🖥️ Window Opens<br>You Can Watch"]

Simple Example:

// Invisible (default)
const browser = await chromium.launch({
  headless: true
});

// No window appears!
// Tests run super fast!

Why use headless?

• ⚡ Faster - No graphics to draw
• 🤖 CI/CD - Perfect for servers
• 💾 Less memory - Lighter on resources

👁️ Headed Mode

“I Want to SEE What’s Happening!”

Sometimes you WANT to watch. Debug mode!

Simple Example:

// Show me the browser!
const browser = await chromium.launch({
  headless: false  // Window pops up!
});

When to use headed mode?

• 🔍 Debugging - Watch your test run
• 📸 Screenshots - See exact moment
• 🐛 Finding bugs - See what went wrong

🌐 Browser Channel Selection

“Which Chrome Do You Want?”

Playwright can use different versions of Chrome!

Simple Example:

// Use your installed Chrome
const browser = await chromium.launch({
  channel: 'chrome'
});

// Or use Chrome Beta
const browserBeta = await chromium.launch({
  channel: 'chrome-beta'
});

Available Channels:

🛡️ Proxy Configuration

“Go Through a Secret Tunnel!”

A proxy is like a middleman. Your browser talks to the proxy, and the proxy talks to websites.

graph TD
    A["Your Browser"] -->|Through| B["🛡️ Proxy Server"]
    B -->|Hidden| C["🌐 Website"]
    C -->|Response| B
    B -->|Back| A

Simple Example:

const browser = await chromium.launch({
  proxy: {
    server: 'http://myproxy.com:8080',
    username: 'user',    // Optional
    password: 'pass'     // Optional
  }
});

Why use a proxy?

• 🔒 Privacy - Hide your real IP
• 🌍 Testing regions - Access different content
• 🏢 Corporate - Required by some networks

🎯 Putting It All Together

Here’s a complete example with EVERYTHING:

const { chromium } = require('playwright');

const browser = await chromium.launch({
  headless: false,          // Watch it run
  channel: 'chrome',        // Use Chrome
  proxy: {
    server: 'http://proxy:8080'
  }
});

const context = await browser.newContext({
  geolocation: {
    latitude: 35.6762,
    longitude: 139.6503  // Tokyo!
  },
  locale: 'ja-JP',          // Japanese
  timezoneId: 'Asia/Tokyo', // Tokyo time
  colorScheme: 'dark',      // Dark mode
  permissions: ['geolocation']
});

const page = await context.newPage();
// Now test as a Japanese user in Tokyo! 🇯🇵

🎉 You Did It!

Now you know how to make your browser:

• 📍 Fake its location (Geolocation)
• 🌍 Speak any language (Locale/Timezone)
• 🎨 Switch light/dark mode (Color Scheme)
• 🔐 Auto-accept permissions (Permissions)
• 👻 Run invisibly (Headless)
• 👁️ Show itself (Headed)
• 🌐 Use different browsers (Channel)
• 🛡️ Go through tunnels (Proxy)

You’re now a Playwright director! 🎬✨