如何使用Cypress测试基于Auth0与@auth0/auth0-spa-js的单页应用

我刚好碰到过类似的问题，@auth0/auth0-spa-js确实因为采用了iframe会话管理机制，不会把令牌存储在你应用自身的域名下，常规的本地存储注入方法完全不管用。这里有几个经过验证的解决方案，你可以根据自己的测试场景选择：

方案一：直接调用Auth0 SPA SDK完成登录（推荐） #

这个方法最贴近真实用户的登录流程，而且不需要依赖SDK的内部实现细节。核心思路是在Cypress中直接调用应用里已初始化的Auth0 SDK实例，完成登录操作。

步骤： #

1. 添加Cypress自定义命令
   在cypress/support/commands.js中添加登录命令：

   Cypress.Commands.add('loginWithAuth0', (username, password) => {
     cy.window().then(async (win) => {
       // 假设你的应用把Auth0 SDK实例挂载到了window.auth0上
       const auth0 = win.auth0;
       try {
         // 使用密码授权流完成登录（仅限测试环境启用该流）
         await auth0.loginWithCredentials({
           username,
           password,
           realm: 'Username-Password-Authentication', // 替换为你的Auth0数据库连接名称
           audience: 'https://your-api-audience.com', // 替换为你的API受众
           scope: 'openid profile email'
         });
       } catch (err) {
         console.error('Auth0登录失败:', err);
         throw err;
       }
     });
   });
   

2. 在测试用例中使用

   describe('认证后页面测试', () => {
     beforeEach(() => {
       cy.visit('/');
       // 从环境变量获取测试凭证，不要硬编码！
       cy.loginWithAuth0(Cypress.env('AUTH0_USER'), Cypress.env('AUTH0_PWD'));
     });
   
     it('应该显示用户信息面板', () => {
       cy.get('[data-testid="user-profile"]').should('contain', Cypress.env('AUTH0_USER'));
     });
   });
   

注意：要确保你的Auth0租户在测试环境中启用了「Resource Owner Password Flow」，这个流不建议在生产环境使用，但测试场景下非常方便。

方案二：模拟Auth0 SDK的内部认证状态 #

如果不想实际调用Auth0的API，可以直接模拟SDK的内部缓存状态，让应用认为已经登录。不过这个方法需要适配你当前使用的SDK版本，因为内部缓存结构可能会更新。

步骤： #

1. 预先获取测试用户的有效令牌
   可以通过Auth0管理API或者Postman调用令牌端点，获取id_token、access_token和过期时间expires_at。

2. 添加Cypress自定义命令注入状态

   Cypress.Commands.add('setAuth0Session', (idToken, accessToken, expiresAt) => {
     cy.window().then((win) => {
       // 假设SDK实例挂载在window.auth0Client上
       const auth0Client = win.auth0Client;
       // 设置SDK内部缓存的认证状态（不同版本可能有差异，需核对源码）
       auth0Client.cache.set('auth0.is.authenticated', true);
       auth0Client.cache.set('auth0.id_token', idToken);
       auth0Client.cache.set('auth0.access_token', accessToken);
       auth0Client.cache.set('auth0.expires_at', expiresAt);
       // 触发应用的认证成功事件，让页面更新状态
       win.dispatchEvent(new CustomEvent('auth0:auth-success'));
     });
   });
   

3. 在测试中使用

   describe('认证后页面测试', () => {
     beforeEach(() => {
       cy.visit('/');
       cy.setAuth0Session(
         Cypress.env('AUTH0_ID_TOKEN'),
         Cypress.env('AUTH0_ACCESS_TOKEN'),
         Cypress.env('AUTH0_EXPIRES_AT')
       );
     });
   
     it('应该跳转到仪表盘页面', () => {
       cy.location('pathname').should('eq', '/dashboard');
     });
   });
   

方案三：拦截Auth0令牌请求并返回模拟响应 #

通过Cypress的cy.intercept拦截SDK向Auth0发送的令牌请求，直接返回预先准备好的有效令牌，让SDK误以为登录成功。

步骤： #

describe('认证后页面测试', () => {
  beforeEach(() => {
    // 拦截Auth0的令牌请求
    cy.intercept('POST', 'https://your-auth0-domain.auth0.com/oauth/token', (req) => {
      req.reply({
        statusCode: 200,
        body: {
          id_token: Cypress.env('AUTH0_ID_TOKEN'),
          access_token: Cypress.env('AUTH0_ACCESS_TOKEN'),
          expires_in: 3600,
          token_type: 'Bearer'
        }
      });
    });

    // 触发应用的登录流程
    cy.visit('/');
    cy.get('[data-testid="login-btn"]').click();
  });

  it('应该加载用户的私有数据', () => {
    cy.get('[data-testid="private-data"]').should('not.be.empty');
  });
});

通用注意事项 #

• 所有敏感信息（用户名、密码、令牌）都要存在Cypress环境变量中，比如通过cypress.env.json或者系统环境变量传递，绝对不要硬编码在测试文件里。
• 测试环境的Auth0租户要单独配置，避免影响生产环境的数据。
• 如果应用使用了路由守卫（比如React的PrivateRoute），登录后要确认页面正确跳转。

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