Automatically accept geolocation permission / mock geolocation for tests

[akozmanyan1]

Current behavior:

I have a map and a button in my app. When user clicks the button it identifies it’s current position and map pin moves to the current location of the user. This does not happen when running cypress tests.

Desired behavior:

When running cypress test I want to be able to get the location of user and the map to show that position changes.

Steps to reproduce:

I created a simple POC – https://github.com/akozmanyan1/geolocation-bug
Just download and run it - '$ npm run serve'.
You also will need to open cypress - '$ ./node_modules/.bin/cypress open'

Versions

Cypress - Running Electron 59
OS: Windows 10
browser: Google Chrome - Version 69.0.3497.100

[jennifer-shehane]

Hey @akozmanyan1, thanks so much for providing a reproducible repo!

I notice that when running this locally, my browser prompts for permission to access my location. My guess is that Cypress is not handling this dialog properly when automated.

Can you disable the checking for permission on this dialog when run within Cypress? I would like to verify that this is indeed the problem.

Here's some instruction on identifying whether you app is running within Cypress.

[akozmanyan1]

Hi @jennifer-shehane , I don't think I can disable this alert. This is Chrome asking for permission to share the location with the website. The problem is that no such dialog appears in Cypress. In addition, I can't find if there is a switch in Cypress which can turn this off this dialog.

[jennifer-shehane]

@akozmanyan1 This is definitely something that Cypress should handle and can handle by utilizing Chrome debugger protocol.

There aren't any really easy workarounds for this.

You could search for ways to emulate geolocation in Chrome, but none of those solutions are going to work in CI when run in Electron.

[swapab]

@akozmanyan1 Did you found a way to mock/stub navigator.geolocation ?

[nico2che]

@swapab with the stub method you can mock a position or an error

For example, an approach like

function fakeLocation(latitude, longitude) {
  return {
    onBeforeLoad(win) {
      cy.stub(win.navigator.geolocation, "getCurrentPosition", (cb, err) => {
        if (latitude && longitude) {
          return cb({ coords: { latitude, longitude } });
        }
        throw err({ code: 1 }); // 1: rejected, 2: unable, 3: timeout
      });
    }
  };
}

And

cy.visit("http://www.cypress.io", fakeLocation()); // Error
cy.visit("http://www.cypress.io", fakeLocation(48, 2)); // France

But better with cypress commands

[attilavago]

I'd like to see this fixed too. With the rise of PWAs location detection, notifications, etc, is becoming a common feature, and we should be able to emulate user behaviour with these dialogues.