How would you simulate and test features requiring browser permissions (e.g., Geolocation, Camera/Microphone) using Play

🔥 90% of Playwright engineers miss these permission hacks for geolocation testing—here’s how to ace them in your next interview scenario.

📌 Problem Statement

Testing location‑based or media‑access features in web apps is hard because you can’t manually grant permissions each run. You need a reproducible, automated way to grant/deny geolocation, camera, or microphone permissions and optionally mock sensor data.

💡 Solution & Code Walkthrough

Playwright lets you configure permissions at the browserContext level. Grant the permission and supply mock coordinates or device constraints directly when creating the context.

import { chromium, Browser, BrowserContext, Page } from '@playwright/test';

(async () => {
  let browser: Browser;
  let context: BrowserContext;
  let page: Page;

  try {
    // Launch browser
    browser = await chromium.launch();
    // Create a context with geolocation granted and mocked coordinates
    context = await browser.newContext({
      permissions: ['geolocation'],                // ✅ grant permission
      geolocation: { latitude: 34.052235, longitude: -118.243683 }, // Los Angeles
    });
    page = await context.newPage();

    await page.goto('https://maps.google.com');
    // Example assertion: check map center uses mocked location
    const mapCenter = await page.evaluate(() => {
      const el = document.querySelector('.map-center');
      return el?.textContent;
    });
    console.log('Map center:', mapCenter);
  } finally {
    await context?.close();
    await browser?.close();
  }
})();

For camera/microphone, replace permissions: ['camera'] (or microphone) and optionally set recordVideoSize or use page.evaluate to trigger getUserMedia.

🔑 Key Takeaways

• Use browser.newContext({ permissions: ['geolocation'] }) to grant access.

• Provide mock coordinates via geolocation option for deterministic tests.

❌ Avoid hard‑coding credentials inside the context—keep them in test fixtures.

✅ Store permission configs in a reusable testFixtures.ts for DRY code.

❓ Quick Summary Q&A

• Q: Do I need separate contexts for each permission?

A: Yes—each context is isolated, preventing cross‑test bleed.

• Q: Can I deny a permission?

A: Yes, pass permissions: [] or permissions: ['geolocation'] with deny flag in older Playwright versions.

TAGS: playwright, javascript, testing, automation, browser-permissions

────────────────────────────────────────
────────────────────────────────────────

📲 𝐅𝐑𝐄𝐄 𝐌𝐎𝐁𝐈𝐋𝐄 𝐀𝐏𝐏 — 𝟔𝟎𝟎+ 𝐒𝐃𝐄𝐓 𝐐&𝐀𝐬
Practice real-world interview scenarios offline on the free QA Automation & SDET Prep app:

🤖 𝐆𝐨𝐨𝐠𝐥𝐞 𝐏𝐥𝐚𝐲 (𝐀𝐧𝐝𝐫𝐨𝐢𝐝):
https://play.google.com/store/apps/details?id=com.app.seleniuminterviewquestions&referrer=utm_source%3Ddevto%26utm_medium%3Darticle%26utm_campaign%3Dselenium_20260930

🍎 𝐀𝐩𝐩 𝐒𝐭𝐨𝐫𝐞 (𝐢𝐎𝐒):
https://apps.apple.com/app/id6786760948?pt=128640464&ct=devto_selenium_20260930&mt=8

────────────────────────────────────────