使用Cypress Lighthouse测试第三方Auth登录网站性能遇阻

核心问题原因 #

Lighthouse启动的新标签页默认未继承Cypress主窗口的登录会话缓存，触发了Cognito的「Continue with <组织名>」验证步骤，阻塞了性能审计流程。

方案1：用Cypress Session API复用登录状态 #

Cypress 12+提供的cy.session()可以持久化登录会话，让所有新窗口（包括Lighthouse的审计窗口）自动继承已登录状态，跳过验证步骤。

// 在测试用例开头定义会话
cy.session('cognito-authentication', () => {
  // 执行完整的首次登录流程（适配无缓存时的SSO按钮场景）
  cy.visit('/');
  cy.get('[data-testid="sso-login-btn"]').click(); // 替换为你的SSO按钮选择器
  // 完成组织SSO登录操作（输入凭证等，根据实际流程编写）
  cy.url().should('include', '/home'); // 确认已跳转到首页
}, {
  // 配置会话缓存有效期，避免重复登录
  cacheAcrossSpecs: true
});

// 执行性能测试
cy.visit('/home');
cy.lighthouse({ performance: 80 });

方案2：自定义Lighthouse钩子自动处理Continue按钮 #

通过cypress-audit的beforeRunHook配置，在Lighthouse启动审计前，自动检测并点击新标签页中的Continue按钮。

cy.lighthouse(
  { performance: 80 }, // 你的性能指标要求
  {
    beforeRunHook: () => {
      // 等待新标签页加载完成，检测Continue按钮并点击
      cy.get('button:contains("Continue with")', { timeout: 10000 })
        .click({ force: true }); // 强制点击避免元素覆盖问题
    },
    // 其他Lighthouse配置
    chromeFlags: ['--disable-gpu', '--no-sandbox'],
    disableStorageReset: true // 禁用存储重置，保留登录缓存
  }
);

方案3：直接注入登录令牌绕过验证 #

如果上述方法无效，可以通过抓包获取Cognito的登录会话Cookie或LocalStorage令牌，在测试前直接注入到浏览器环境，让Lighthouse窗口自动识别已登录状态。

// 先完成一次登录，提取会话令牌
cy.session('extract-cognito-token', () => {
  cy.visit('/');
  // 完成登录流程...
  cy.getCookie('CognitoIdentityServiceProvider.<userPoolId>.LastAuthUser').then(cookie => {
    Cypress.env('COGNITO_LAST_AUTH_USER', cookie.value);
  });
  cy.getCookie('CognitoIdentityServiceProvider.<userPoolId>.<username>.token').then(cookie => {
    Cypress.env('COGNITO_TOKEN', cookie.value);
  });
});

// 在性能测试前注入令牌
cy.setCookie('CognitoIdentityServiceProvider.<userPoolId>.LastAuthUser', Cypress.env('COGNITO_LAST_AUTH_USER'), {
  domain: '.your-domain.com', // 替换为你的域名
  path: '/',
  secure: true,
  httpOnly: true
});
cy.setCookie('CognitoIdentityServiceProvider.<userPoolId>.<username>.token', Cypress.env('COGNITO_TOKEN'), {
  domain: '.your-domain.com',
  path: '/',
  secure: true,
  httpOnly: true
});

// 执行Lighthouse测试
cy.lighthouse({ performance: 80 });

注意事项 #

• 确保Cypress版本≥12.0.0以支持cy.session() API；
• 无头模式测试前，先在非无头模式下验证登录流程和元素选择器的正确性；
• 定期更新会话令牌的有效期，避免因令牌过期导致测试失败；
• 若使用方案3，需替换代码中<userPoolId>、<username>、.your-domain.com为实际值。

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