Cypress测试Vue应用社交登录出现auth/popup-blocked弹窗拦截错误如何解决

1. 调整Cypress浏览器启动参数，禁用弹窗拦截 #

Cypress默认启动浏览器时会保留弹窗拦截的默认规则，需要在配置里添加启动参数关闭拦截，同时适配第三方登录的跨域限制。

Cypress 10+版本的cypress.config.js配置参考：

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser = {}, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          // 核心：禁用弹窗拦截
          launchOptions.args.push('--disable-popup-blocking')
          // 适配第三方登录的跨域Cookie、跨域请求限制
          launchOptions.args.push('--disable-web-security')
          launchOptions.args.push('--allow-running-insecure-content')
        }
        if (browser.name === 'electron') {
          launchOptions.preferences['disable-popup-blocking'] = true
        }
        return launchOptions
      })
    },
    // 开启跨域会话支持，适配多域名跳转场景
    experimentalSessionAndOrigin: true
  }
})

2. 手动监听弹窗事件，替代原生跳转逻辑 #

不要直接依赖点击按钮触发的原生弹窗，提前监听窗口打开事件手动处理跳转，从根源避免弹窗被拦截：

it('验证谷歌社交登录流程', () => {
  // 预先监听窗口打开事件，替换原生open方法
  cy.window().then(win => {
    cy.stub(win, 'open').callsFake((popupUrl) => {
      // 手动访问登录弹窗地址，避免触发浏览器弹窗拦截规则
      cy.visit(popupUrl)
    }).as('googleLoginPopup')
  })

  // 点击谷歌登录按钮
  cy.get('[data-testid="google-login-btn"]').click()

  // 验证弹窗地址被正常捕获
  cy.get('@googleLoginPopup').should('have.been.called')

  // 后续按实际流程填写谷歌测试账号、完成授权即可，授权后会自动跳转回你的应用回调地址
  cy.get('#identifierId').type('测试账号邮箱')
  // 其余登录步骤按实际页面元素补充
})

3. 可选方案：Mock OAuth 回调跳过第三方流程（稳定性更高） #

如果不需要验证谷歌侧的登录流程，只需要验证自身应用的登录逻辑，可以直接构造授权回调请求，完全避免弹窗和跨域问题：

• 提前在谷歌云后台生成测试用的有效授权code
• 点击登录按钮后直接跳转到你的应用回调地址，携带有效code即可完成登录模拟

it('Mock谷歌登录回调验证业务逻辑', () => {
  cy.visit('/login')
  cy.get('[data-testid="google-login-btn"]').click()
  // 替换为你实际的回调地址和预先准备的有效测试code
  cy.visit('/auth/google/callback?code=测试用有效授权code&state=随机校验值')
  // 验证登录成功后的逻辑，比如跳转后台、展示用户信息等
  cy.url().should('include', '/dashboard')
})

4. 注意事项 #

• 确保Cypress版本高于10.0，experimentalSessionAndOrigin配置仅在高版本支持
• 如果使用火狐浏览器测试，需要额外在启动参数中将dom.disable_open_during_load设置为false
• 测试用的谷歌账号建议关闭两步验证，同时将测试环境域名加入谷歌云API的授权域名列表

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