Location Guard for Developers: How to Mock Geolocation for Testing

Why Developers Need to Mock Geolocation

If you're building any feature that depends on the user's location — delivery zones, local search, distance calculations, weather widgets, store finders — you need a reliable way to simulate different locations during development and QA.

The alternatives are slow:

• Traveling to the location you want to test (impractical)
• Manually editing database entries to fake proximity (fragile)
• Relying on GPS coordinates from a mobile device in DevTools (clunky)

Location Guard gives you a persistent, browser-level location override that works the same way a real user's browser does — because it is a real browser.

---

Method 1: Location Guard Extension (Persistent Override)

Best for: ongoing development, manual QA, testing across multiple sites

Setup

1. Install Location Guard from the offline package
2. Click the shield → Options
3. Set Default Level → Fixed Location
4. Enter the coordinates you want to test
5. Click Save

Every tab you open will now report those coordinates. Switch locations by changing the Options coordinates — no restart required.

Per-Site Overrides

Location Guard supports per-site configuration:

1. Visit the site you want to test
2. Click the shield icon
3. Use the level dropdown to set a site-specific override
4. Options: Precise, Approximate, Fixed Location, or Disabled

This is useful when you want your app to use fake coordinates but don't want to affect other sites during the same session.

---

Method 2: Chrome DevTools Sensors (Session-Level)

Best for: quick one-off tests, no extension install

1. Open DevTools (F12)
2. Click ⋮ → More tools → Sensors
3. Under Location, uncheck Use default
4. Select a preset or enter custom coordinates

Latitude:  37.7749   (San Francisco)
Longitude: -122.4194

DevTools offers built-in presets for several cities. The override applies to the current tab only and resets when DevTools closes.

---

Method 3: Playwright — Automated Testing

// playwright.config.js or test file
const context = await browser.newContext({
  geolocation: { longitude: -122.4194, latitude: 37.7749 },
  permissions: ['geolocation'],
})

const page = await context.newPage()
await page.goto('https://your-app.com/store-finder')
// The page will receive San Francisco coordinates

---

Method 4: Cypress — E2E Testing

// cypress/support/commands.js
Cypress.Commands.add('mockGeolocation', (lat, lng) => {
  cy.window().then((win) => {
    cy.stub(win.navigator.geolocation, 'getCurrentPosition').callsFake((cb) => {
      cb({ coords: { latitude: lat, longitude: lng, accuracy: 10 } })
    })
  })
})

// In your test
it('shows nearby stores in San Francisco', () => {
  cy.mockGeolocation(37.7749, -122.4194)
  cy.visit('/store-finder')
  cy.contains('San Francisco')
})

---

Method 5: Puppeteer

const page = await browser.newPage()
await page.setGeolocation({ latitude: 37.7749, longitude: -122.4194 })
await page.goto('https://your-app.com')

---

Testing Geolocation Error States

Don't forget to test what happens when location is unavailable:

// Cypress — simulate permission denied
cy.window().then((win) => {
  cy.stub(win.navigator.geolocation, 'getCurrentPosition').callsFake((_, errorCb) => {
    errorCb({
      code: 1, // PERMISSION_DENIED
      message: 'User denied geolocation',
    })
  })
})

Geolocation errors your app should handle:

---

Useful Coordinates for Testing

---

Verifying Geolocation in Your App

During development, use the browser console to check what coordinates your page is receiving:

navigator.geolocation.getCurrentPosition(
  pos => console.log('Lat:', pos.coords.latitude, 'Lng:', pos.coords.longitude),
  err => console.error('Error:', err.message)
)

Or open browserleaks.com/geo to see a full breakdown of what the browser is reporting.

---

Install Location Guard free → — open-source, no account, works across Chrome, Edge, and Firefox.