How to allow location when using headless browser of cypress testing on event on click?

user_7207817 0
Viewed 137

What I want to do

I want to integrate husky with the Cypress test when trying to commit some changes. So in my package.json file, there are two tests script

"scripts": {
    "test:run": "./node_modules/.bin/cypress run",
    "test:open": "./node_modules/.bin/cypress open"
  },

The test:open is SUCCESS

enter image description here

But The test:run is FAIL

enter image description here

It says that User has not allowed access to system location

enter image description here

This is the function when Button "Godkänn" clicked in "Onboarding" page

 const getDevicePermission = async () => {
    await getDeviceLocation().then(() =>
      getDeviceOrientation().then(() => Router.push(routes.ONBOARDING))
    );
  };

What I've tried

  1. Add configuration of browser permission in cypress.config.ts
import { defineConfig } from "cypress";

export default defineConfig({
  env: {
    browserPermissions: {
      notifications: "allow",
      geolocation: "allow",
    },
  },
  chromeWebSecurity: false,
  e2e: {
    setupNodeEvents(_on, _config) {
      // implement node event listeners here
    },
  },
});

The result is still FAIL with the same error

  1. I've been following this issue's solution but still got the same error and no typescript support
cypress headless-browser geolocation
2 Answers

Add package cypress-browser-permissions

npm i cypress-browser-permissions --save-dev
//or
yarn install cypress-browser-permissions --save-dev

Update your cypress.config.js

const { defineConfig } = require('cypress')
const { cypressBrowserPermissionsPlugin } = require('cypress-browser-permissions')

module.exports = defineConfig({
  env: {
    browserPermissions: {
      notifications: "allow",
      geolocation: "allow",
    },
  },
  chromeWebSecurity: false,
  e2e: {
    setupNodeEvents(on, config) {
      config = cypressBrowserPermissionsPlugin(on, config)
      return config
    },
  },
})

Testing

To test, I used an app which essentially does this

navigator.geolocation.getCurrentPosition(showPosition, showError);

With configuration browserPermissions: { geolocation: "ask" } the test throws up a permissions request dialog.

With configuration browserPermissions: { geolocation: "allow" } the test bypasses the dialog and the page displays the lat & long coordinates.

With configuration browserPermissions: { geolocation: "block" } the page shows "User denied the request for Geolocation." and the Cypress log shows the error

(uncaught exception) undefined: User denied Geolocation

App

<html lang="en">
<body>
  <div id="demo">Demo</div>
  <script>
    var demoDiv = document.getElementById("demo");

    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
      }
      else { demoDiv.innerHTML = "Geolocation is not supported by this browser."; }
    }

    function showPosition(position) {
      var lat = position.coords.latitude;
      var lon = position.coords.longitude;
      demoDiv.innerText = `${lat} : ${lon}`
    }

    function showError(error) {
      demoDiv.innerHTML = "User denied the request for Geolocation."
      throw error
    }

    getLocation()
  </script>
</body>
</html>
user_169977070

It's because when you are running the tests on the test runner, you are running them on Chrome, And when running it on CLI you are running them on Electron browser. You can add the chrome browser for the run mode.

"test:run": "./node_modules/.bin/cypress run --browser chrome"

To ignore exceptions generated from the application globally, you can add this in cypress/support/e2e.js

Cypress.on('uncaught:exception', (err, runnable) => {
  // returning false here prevents Cypress from
  // failing the test
  return false
})
user_45712710
Related