How do you handle browser permissions (geolocation, camera)?

The Answer

Grant permissions at the `BrowserContext` level before the test navigates. This affects all pages within that context.

Deep Dive Explanation

Browser permissions are a common source of test hangs in CI — if a test expects a permission dialog that never appears (because CI doesn't support it), the test stalls. Always pre-grant required permissions in the context configuration.

example.spec.ts

// Grant permissions in config (applies globally)
export default defineConfig({
  use: {
    permissions: ['geolocation', 'notifications'],
    geolocation: { latitude: 40.7128, longitude: -74.0060 }, // New York
  },
});

// Or per context in a test
test('geolocation test', async ({ browser }) => {
  const context = await browser.newContext({
    permissions: ['geolocation'],
    geolocation: { latitude: 51.5074, longitude: -0.1278 }, // London
  });
  const page = await context.newPage();
  await page.goto('/store-finder');
  await expect(page.getByText('London Stores')).toBeVisible();
  await context.close();
});

// Grant permission at runtime
await context.grantPermissions(['camera', 'microphone']);

// Revoke permissions
await context.clearPermissions();