使用Cognito授权时Cypress无法绕过登录页面的问题求助

可能原因及解决办法 #

1. Cypress默认上下文重置机制 #

Cypress每次执行cy.visit()时，会默认重置浏览器上下文环境（包括localStorage、Cookie等），导致之前存储的凭证丢失。

解决：

• 使用cypress-localstorage-commands插件的cy.saveLocalStorage()和cy.restoreLocalStorage()方法，在登录后保存存储状态，访问页面前恢复：

  // 修改自定义登录命令，添加保存逻辑
  Cypress.Commands.add("loginByCognitoApi", () => {
    const awsconfig = {
      aws_user_pools_id: Cypress.env("userPoolId"),
      aws_user_pools_web_client_id: Cypress.env("clientId"),
    };
    Auth.configure(awsconfig);
  
    return cy.wrap(Auth.signIn(Cypress.env("username"), Cypress.env("password")), { log: false })
      .then((cognitoResponse) => {
        const keyPrefixWithUsername = `${cognitoResponse.keyPrefix}.${cognitoResponse.username}`;
        window.localStorage.setItem(`${keyPrefixWithUsername}.idToken`, cognitoResponse.signInUserSession.idToken.jwtToken);
        window.localStorage.setItem(`${keyPrefixWithUsername}.accessToken`, cognitoResponse.signInUserSession.accessToken.jwtToken);
        window.localStorage.setItem(`${keyPrefixWithUsername}.refreshToken`, cognitoResponse.signInUserSession.refreshToken.token);
        window.localStorage.setItem(`${keyPrefixWithUsername}.clockDrift`, cognitoResponse.signInUserSession.clockDrift);
        window.localStorage.setItem(`${cognitoResponse.keyPrefix}.LastAuthUser`, cognitoResponse.username);
        window.localStorage.setItem("amplify-authenticator-authState", "signedIn");
        cy.saveLocalStorage(); // 保存当前localStorage状态
      });
  });
  
  // 测试用例中调用
  cy.loginByCognitoApi();
  cy.restoreLocalStorage(); // 恢复存储后再访问页面
  cy.visit("/");
  

• 或者在cypress.config.js中启用实验性会话持久化：

  const { defineConfig } = require("cypress");
  
  module.exports = defineConfig({
    e2e: {
      experimentalSessionAndOrigin: true, // 保留会话和源的上下文
      setupNodeEvents(on, config) {},
    },
  });
  

2. Amplify配置/认证状态读取时机问题 #

应用初始化时，可能在Cypress完成凭证存储前就执行了Amplify的认证检查，或者应用的Amplify配置与测试命令中的配置不一致，导致无法识别已存储的凭证。

解决：

• 确保应用侧的Amplify配置与测试命令中的awsconfig完全一致，包括userPoolId和clientId；
• 调整应用的认证检查逻辑，确保页面加载时优先读取localStorage中的凭证：

  // 应用初始化代码示例
  import { Auth } from 'aws-amplify';
  
  Auth.configure({
    aws_user_pools_id: '你的用户池ID',
    aws_user_pools_web_client_id: '你的客户端ID',
  });
  
  // 延迟检查认证状态，确保localStorage已就绪
  setTimeout(() => {
    Auth.currentAuthenticatedUser()
      .then(user => {
        // 已登录，正常渲染页面
      })
      .catch(() => {
        // 未登录，重定向登录页
        window.location.href = '/login';
      });
  }, 500);
  

3. 凭证存储键名不匹配 #

自定义命令中存储的localStorage键名，可能与Amplify实际使用的键名不一致，导致应用无法识别登录状态。

解决：

• 手动完成一次正常登录，查看浏览器开发者工具中localStorage的键名，对比命令中设置的键名是否完全一致；
• 重点检查keyPrefix是否正确：Amplify默认的keyPrefix格式为CognitoIdentityServiceProvider.{clientId}，确认cognitoResponse.keyPrefix返回的值与实际一致。

4. Token有效性问题 #

获取的Cognito Token可能已过期，或者用户名/密码配置错误，导致应用验证Token失败后清空存储并重定向。

解决：

• 检查Cypress环境变量中的username和password是否正确；
• 在登录命令中打印获取的Token，通过Cognito控制台验证Token的有效性；
• 确保测试使用的用户状态正常（未被禁用、未过期等）。

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