Cypress Test Runner触发定位请求提示权限被拒绝如何解决

问题现象 #

• 点击触发位置权限申请的按钮时，预期弹出权限选择弹窗供用户选择允许/拒绝，但在Cypress Test Runner中点击后直接返回权限被拒绝
• 手动调整浏览器权限设置后问题没有解决
• 已在cypress.json中添加如下权限配置，问题仍然存在：

"browserPermissions": {
  "notifications": "allow",
  "geolocation": "allow",
}

原因&解决方案 #

1. 权限配置未正确生效 #

你写的browserPermissions是第三方Cypress权限插件的专属配置项，仅在配置文件中添加字段不会生效，需要完成完整的插件接入流程：

• 安装插件依赖：

npm install cypress-browser-permissions --save-dev

• 在测试支持文件中引入插件命令：
  • Cypress 10以下版本：打开cypress/support/index.js添加import 'cypress-browser-permissions'
  • Cypress 10及以上版本：打开cypress/support/e2e.js添加上述引入代码
• 在插件配置中注册插件：
  • Cypress 10以下版本：在cypress/plugins/index.js中添加插件注册逻辑
  • Cypress 10及以上版本：在cypress.config.js的setupNodeEvents钩子中注册，示例配置如下：

const { defineConfig } = require("cypress");
const { browserPermissions } = require('cypress-browser-permissions/plugin');

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

另外注意你之前的JSON配置里geolocation字段后多了一个尾逗号，标准JSON不支持该语法，会导致配置文件解析失败，需要删掉多余的逗号。

2. 无插件原生实现方案 #

如果不想引入第三方插件，可以直接用Cypress原生能力处理地理位置权限，不需要依赖弹窗交互：

• 方案A：直接stub地理定位方法，模拟授权成功并返回固定坐标，稳定性最高：

cy.visit('/你的测试页面路径', {
  onBeforeLoad(win) {
    cy.stub(win.navigator.geolocation, 'getCurrentPosition').callsFake((successCb) => {
      return successCb({
        coords: {
          latitude: 39.9042, // 替换为测试需要的纬度
          longitude: 116.4074, // 替换为测试需要的经度
          accuracy: 100
        }
      });
    });
  }
});
// 后续再执行点击按钮触发定位的逻辑即可

• 方案B：通过Chrome DevTools Protocol直接给测试源授予权限：

// 在触发定位操作前执行
Cypress.automation('remote:debugger:protocol', {
  command: 'Browser.grantPermissions',
  params: {
    permissions: ['geolocation'],
    origin: window.location.origin
  }
});

内容的提问来源于stack exchange，提问作者Yashodha RV