Cypress测试嵌入iframe的Google登录按钮跨域问题求助

1. 正确组合iframe定位与cy.origin切换 #

别直接对着跨域iframe硬操作，先精准定位到Google登录的iframe，再切换上下文：

// 定位并进入Google登录iframe
cy.get('iframe[src*="google.com/accounts"]').then($iframe => {
  const iframeDocument = $iframe.contents().get(0)
  cy.wrap(iframeDocument).find('[data-google-signin-button]').click()
})

// 跳转后立即切换到Google域名上下文操作登录
cy.origin('https://accounts.google.com', () => {
  cy.get('input[type="email"]').type('你的测试邮箱')
  cy.contains('Next').click()
  cy.get('input[type="password"]').type('你的测试密码')
  cy.contains('Next').click()
})

2. 补全cypress.config.ts的关键配置 #

只开chromeWebSecurity: false不够，Cypress 12+得加上experimentalSessionAndOrigin才能更好处理跨域会话，改完必须重启Cypress：

export default defineConfig({
  e2e: {
    chromeWebSecurity: false,
    experimentalSessionAndOrigin: true,
    // 其他原有配置...
  },
})

3. 绕过iframe，直接触发JS登录事件 #

很多页面的Google登录是通过全局JS初始化的，直接调用页面的登录方法，彻底绕开iframe跨域：

cy.window().then(win => {
  // 匹配页面中Google登录的初始化参数
  win.google.accounts.id.initialize({
    client_id: '页面对应的Google Client ID',
    callback: () => {} // 对齐页面原有回调逻辑
  })
  win.google.accounts.id.prompt() // 触发登录弹窗
})

4. 缓存登录会话，避免重复操作 #

每次测试都走一遍登录太折腾，在before钩子中完成一次登录并缓存会话，后续测试直接恢复：

before(() => {
  cy.visit('/')
  // 执行一次完整登录流程
  cy.origin('https://accounts.google.com', () => {
    cy.get('input[type="email"]').type('测试邮箱')
    cy.contains('Next').click()
    cy.get('input[type="password"]').type('测试密码')
    cy.contains('Next').click()
  })
  // 保存登录后的Cookie
  cy.getCookies().then(cookies => {
    cookies.forEach(cookie => {
      Cypress.env(`COOKIE_${cookie.name}`, cookie.value)
    })
  })
})

beforeEach(() => {
  // 恢复Cookie，跳过登录
  cy.getCookies().then(existingCookies => {
    Object.keys(Cypress.env()).forEach(key => {
      if (key.startsWith('COOKIE_')) {
        const cookieName = key.replace('COOKIE_', '')
        if (!existingCookies.find(c => c.name === cookieName)) {
          cy.setCookie(cookieName, Cypress.env(key))
        }
      }
    })
  })
  cy.visit('/')
})

5. 确保iframe完全加载后再操作 #

有时候报错是因为iframe没加载完就操作元素，加上加载状态校验：

cy.get('iframe[src*="google.com"]')
  .should('be.visible')
  .then($iframe => {
    cy.wrap($iframe.contents()).should('have.property', 'body').and('not.be.empty')
    cy.wrap($iframe.contents()).find('button:contains("Sign in with Google")').click()
  })

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