如何用Cypress模拟谷歌账号登录？加载登录页遇问题求助

针对你遇到的谷歌登录页加载超时问题，以下是几个可行的解决方案：

1. 确认Cypress版本并升级 #

cy.origin 是Cypress 9.6.0版本才正式引入的功能，低版本可能存在兼容性问题。建议升级到最新稳定版：

npm install cypress@latest --save-dev

2. 调整全局超时配置（不止pageLoadTimeout） #

除了pageLoadTimeout，谷歌登录页的资源加载、接口响应可能需要更长时间，建议在cypress.config.js中同时调整多个超时参数：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    pageLoadTimeout: 120000, // 延长至2分钟
    defaultCommandTimeout: 60000,
    responseTimeout: 60000,
    requestTimeout: 60000
  },
});

3. 避免直接访问谷歌登录页，从应用触发跳转 #

直接访问/servicelogin可能触发谷歌的安全拦截，建议先访问你的业务应用，通过点击登录按钮触发跳转到谷歌登录页，再用cy.origin处理：

// 先访问你的应用登录页
cy.visit('/your-app-login-page');
// 点击跳转谷歌登录的按钮
cy.get('[data-testid="google-login-btn"]').click();

// 切换到谷歌域名处理登录
cy.origin('https://accounts.google.com', () => {
  cy.get('input[type="email"]').type('your-test-email');
  cy.get('#identifierNext').click();
  // 后续密码输入等操作
});

4. 禁用Chrome安全防护（仅限测试环境） #

谷歌登录页有严格的跨站安全策略，可在Cypress中配置Chrome启动参数绕过部分限制：

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser, launchOptions) => {
        if (browser.family === 'chromium' && browser.name !== 'electron') {
          launchOptions.args.push('--disable-web-security');
          launchOptions.args.push('--allow-running-insecure-content');
          launchOptions.args.push('--disable-features=CrossSiteDocumentBlockingIfIsolating');
          return launchOptions;
        }
      });
    },
  },
});

5. 改用API登录替代UI自动化（推荐） #

谷歌UI登录有大量反爬和人机验证机制，长期维护UI自动化成本极高。建议使用OAuth 2.0 API直接获取登录凭证，模拟登录状态：

// 定义自定义登录命令
Cypress.Commands.add('googleApiLogin', () => {
  cy.request({
    method: 'POST',
    url: 'https://oauth2.googleapis.com/token',
    form: true,
    body: {
      grant_type: 'password',
      client_id: '你的谷歌OAuth客户端ID',
      client_secret: '你的谷歌OAuth客户端密钥',
      username: '测试账号邮箱',
      password: '测试账号密码',
      scope: 'openid email profile'
    }
  }).then(res => {
    // 将token存入应用对应的localStorage或cookie
    cy.window().then(win => {
      win.localStorage.setItem('auth_token', res.body.id_token);
    });
  });
});

// 测试中使用
beforeEach(() => {
  cy.googleApiLogin();
  cy.visit('/your-app-dashboard');
});

注意：密码授权类型需要谷歌账号开启"允许不太安全的应用访问"，生产环境建议使用授权码或服务账号流程。

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