Cypress cy.origin跳转空白页致测试失败的解决方案问询

方案1：登录完成后强制导航到应用主页 #

认证流程结束后跳转到空白页，大概率是应用回调逻辑的渲染延迟或路由异常导致。可以在cy.origin完成认证操作后，手动触发应用主页的访问，确保页面正常加载：

it('完成Azure SSO登录', () => {
  cy.visit('http://localhost:3000'); // 替换为你的应用本地地址
  cy.get('#login-btn').click();

  cy.origin('https://login.microsoftonline.com', () => {
    cy.get('#i0116').type('your-account@example.com');
    cy.get('#idSIButton9').click();
    cy.get('#i0118').type('your-password');
    cy.get('#idSIButton9').click();
    // 按需补充MFA等额外验证步骤
  });

  // 回到主域后，强制导航到应用主页，规避空白页问题
  cy.visit('http://localhost:3000');
  cy.get('#app-main-content').should('be.visible'); // 验证应用核心元素加载完成
});

方案2：用Cypress Session API持久化登录状态 #

每个测试块（it）默认会重置页面到about:blank，通过cy.session可以持久化登录会话，避免重复登录，同时跳过页面重置的影响：

beforeEach(() => {
  cy.session('azure-sso-login', () => {
    cy.visit('http://localhost:3000');
    cy.get('#login-btn').click();

    cy.origin('https://login.microsoftonline.com', () => {
      // 完整的Azure SSO登录流程
      cy.get('#i0116').type('test-account@example.com');
      cy.get('#idSIButton9').click();
      cy.get('#i0118').type('test-password');
      cy.get('#idSIButton9').click();
    });

    // 确保登录后应用页面加载完成
    cy.visit('http://localhost:3000');
    cy.get('#user-profile').should('be.visible');
  });
});

it('测试应用功能1', () => {
  // 直接操作应用，无需重新登录，页面不会被重置为about:blank
  cy.get('#feature-1-btn').click();
  cy.get('#feature-1-content').should('exist');
});

it('测试应用功能2', () => {
  cy.get('#feature-2-btn').click();
  cy.get('#feature-2-content').should('exist');
});

方案3：修改Cypress测试隔离配置 #

禁用Cypress默认的测试隔离机制，让测试块之间保留页面状态，避免自动跳转到about:blank。修改cypress.config.js：

module.exports = {
  e2e: {
    testIsolation: false, // 关闭测试隔离
    // 其他原有配置项
  }
};

注意：此方案可能导致测试之间的状态污染，需确保测试用例的独立性，比如在每个it块开始时重置应用状态（如清除localStorage、导航到主页）。

方案4：优化cy.origin回调后的页面等待逻辑 #

在cy.origin完成认证后，不要立即执行后续操作，而是等待主域页面的路由完成或核心元素出现，避免因页面未渲染完全导致的空白：

it('完成登录并验证页面', () => {
  cy.visit('http://localhost:3000');
  cy.get('#login-btn').click();

  cy.origin('https://login.microsoftonline.com', () => {
    // 登录操作
  });

  // 等待应用回调路由完成，或核心元素加载
  cy.url().should('include', 'localhost/dashboard'); // 替换为你的应用回调路由
  cy.get('#dashboard-header').should('be.visible', { timeout: 10000 }); // 延长超时时间适配渲染延迟
});

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