如何用Cypress点击google-auth-library iframe内的Login按钮？

核心问题分析 #

谷歌登录的GSI（Google Identity Services）iframe ID是动态生成的（比如gsi_75仅为当前会话的临时ID），硬编码ID定位必然失败，这是最常见的坑。

具体解决步骤 #

1. 用稳定选择器定位谷歌登录iframe

放弃硬编码ID，通过src属性包含accounts.google.com/gsi的特征来定位：

cy.get('iframe[src*="accounts.google.com/gsi"]', { timeout: 10000 })
  .should('be.visible') // 确保iframe已加载并可见

2. 进入iframe并定位登录按钮

借助cypress-iframe插件的iframe()命令，进入iframe后用文本或角色属性定位按钮：

cy.get('iframe[src*="accounts.google.com/gsi"]', { timeout: 10000 })
  .iframe()
  .contains('Sign in with Google', { timeout: 8000 }) // 匹配按钮文本
  .click()

如果文本匹配不稳定，也可以用按钮的role属性定位：

cy.get('iframe[src*="accounts.google.com/gsi"]')
  .iframe()
  .find('div[role="button"]')
  .click()

3. 确认Cypress配置正确

确保chromeWebSecurity在cypress.config.js中已关闭（Cypress 10+版本配置文件为该名称，旧版本为cypress.json）：

module.exports = {
  e2e: {
    chromeWebSecurity: false,
    // 其他测试配置...
  }
}

4. 自定义命令简化操作（可选）

在cypress/support/commands.js中添加自定义命令，方便复用：

Cypress.Commands.add('clickGoogleLogin', () => {
  cy.get('iframe[src*="accounts.google.com/gsi"]', { timeout: 10000 })
    .should('be.visible')
    .iframe()
    .contains('Sign in with Google')
    .click()
})

测试用例中直接调用：

cy.clickGoogleLogin()

内容的提问来源于stack exchange，提问作者Александр