Cypress环境下无法获取Firebase Messaging令牌该如何解决？

架构老林

2026-9-27

问题根因可能性

Cypress iframe隔离限制：Cypress测试代码默认运行在独立iframe中，Firebase Messaging依赖的Service Worker注册范围被iframe限制，无法正常建立和Firebase服务器的长连接，也会导致推送链路被Cypress的安全策略拦截。
页面状态限制：Cypress测试执行过程中会频繁操作DOM、切换页面状态，Firebase Messaging需要页面保持活跃状态维持长连接，Cypress的执行逻辑可能会将测试标签页标记为非活跃状态，触发推送连接自动中断。
网络拦截冲突：你配置的cy.intercept()规则可能拦截了Firebase Messaging的wss/https请求，或是Cypress默认代理机制篡改了Firebase请求的头信息、认证凭证，导致请求被Firebase服务器拒绝。
通知权限缺失：Cypress每次启动都是全新的干净环境，默认没有授予通知权限，而Firebase Messaging需要获得通知权限才能正常初始化、获取令牌，本地运行时你可能已经手动授权过，所以没有触发该问题。
环境变量配置不一致：Cypress运行时加载的Firebase配置参数、服务账号密钥等环境变量和本地开发环境不一致，导致初始化失败。

排查解决路径

前置授予通知权限：在cypress/support/e2e.js中添加自定义命令，测试启动前自动授予通知权限：

Cypress.Commands.add('grantNotificationPermission', () => {
  cy.window().then(win => {
    cy.stub(win.Notification, 'requestPermission').resolves('granted')
  })
})

在对应测试用例的开头调用cy.grantNotificationPermission()即可。

放开Service Worker限制：在cypress.config.js中添加配置，解除对Service Worker的拦截限制：

const { defineConfig } = require('cypress')
module.exports = defineConfig({
  e2e: {
    experimentalSessionAndOrigin: true,
    modifyObstructiveCode: false
  }
})

排查网络拦截规则：先临时注释所有自定义的cy.intercept()规则，运行测试排查是否恢复正常。如果恢复，再逐个放开规则，找到拦截Firebase请求的规则后，添加排除规则放行Firebase Messaging相关域名即可，相关域名包括fcm.googleapis.com、*.firebaseio.com、wss://*.firebaseapp.com。
规避iframe隔离限制：如果上述方案都无效，可以修改Firebase Messaging初始化逻辑，检测到Cypress环境时直接将实例挂载到顶层window.parent对象上，避免iframe的范围限制。
日志定位故障节点：在Firebase Messaging的初始化、获取令牌、接收推送的各个关键节点添加console日志，在Cypress测试中通过cy.window().then(win => cy.spy(win.console, 'log'))捕获日志，定位具体卡在哪个执行环节。

内容的提问来源于stack exchange，提问作者Chester Soh