Cypress OIDC登录流程二次登录失败返回403错误排查

测试场景 #

• 使用Cypress测试目标网站
• 通过第三方域名 oauth.b2beyond.org 实现登录的Cypress测试

测试代码 #

import {getAppCardTitles, getAppWrapper, getLoginButton} from "../support/app.po";

describe("b2beyond - logged in - start-page", () => {
  before(() => {
    cy.visit("/");
    getLoginButton().click();
    // @ts-ignore
    cy.login('***', '***');
  });

  it("Logged in - should show start page", () => {
    cy.reload(true);
    getAppWrapper().get("span[title]").contains("B2Beyond platform");
    getAppCardTitles().should(param => {
      expect(param).to.have.length(4);
    });
  });

  it("Logged in - should show start page second try", () => {
    cy.reload(true);
    getAppWrapper().get("span[title]").contains("B2Beyond platform");
    getAppCardTitles().should(param => {
      expect(param).to.have.length(4);
    });
  });
}); 

自定义登录命令代码 #

Cypress.Commands.add("login", (username: string, password: string) => {
  const args = { username, password }
  cy.origin('oauth.b2beyond.org', { args }, ({ username, password }) => {
    cy.get('#usernameLogin').type(username);
    cy.get('#passwordLogin').type(password);
    cy.get('input[type="submit"]').first().click();
  });
});

问题现象 #

第一个测试用例执行完全正常，但第二个测试用例在页面重定向后返回HTTP 403状态码。

解决方案 #

1. 保留登录相关Cookie #

Cypress默认会在每个it测试块结束后清除所有Cookie，导致第二个测试丢失登录状态。可以指定保留关键的登录Cookie：

describe("b2beyond - logged in - start-page", () => {
  before(() => {
    cy.visit("/");
    getLoginButton().click();
    cy.login('***', '***');
  });

  beforeEach(() => {
    // 替换为实际项目中存储登录状态的Cookie名称
    Cypress.Cookies.preserveOnce('session_id', 'auth_token');
  });

  // 测试用例...
});

也可以在cypress.config.js中全局配置保留会话：

module.exports = defineConfig({
  e2e: {
    experimentalSessionAndOrigin: true,
    preserveOnceBeforeEntering: true,
    // 其他配置项
  },
});

2. 移除强制刷新操作 #

cy.reload(true)会强制跳过缓存从服务器拉取页面，可能触发OAuth服务的会话验证拦截。直接移除强制刷新，或者使用无参数的cy.reload()：

it("Logged in - should show start page second try", () => {
  // 移除cy.reload(true)，直接验证页面状态
  getAppWrapper().get("span[title]").contains("B2Beyond platform");
  getAppCardTitles().should(param => {
    expect(param).to.have.length(4);
  });
});

3. 按需执行登录操作 #

在每个测试前检查登录状态，仅在未登录时触发登录流程，避免重复登录触发OAuth服务的限制：

describe("b2beyond - logged in - start-page", () => {
  beforeEach(() => {
    cy.visit("/");
    // 检查登录按钮是否可见，可见则执行登录
    getLoginButton().then(($btn) => {
      if ($btn.is(':visible')) {
        $btn.click();
        cy.login('***', '***');
      }
    });
  });

  // 测试用例...
});

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