Cypress测试因Office365重定向卡在‘Tests are loading’状态

问题背景 #

我在编写Cypress测试时遇到以下问题：

• 测试流程：进入应用设置页 → 点击「Connect Calendar」跳转至Cronofy连接页面 → 选择「Office 365」并勾选条款 → 点击「Link Office 365 Account」后，测试卡在「Your tests are loading...」，持续等待login.live.com，无法继续执行。
• 已尝试的无效方案：移除链接target属性、使用.then()链式调用、切换Chrome/Electron浏览器、用cy.origin()处理Cronofy域、更换Google账号测试（出现403错误）。

原始测试代码：

describe('Enhanced Interviews: Calendar Connection', () => {
    beforeEach(() => {
        cy.recruitingLogin();
        settingsNav.navigateToSettingsInterviewScheduling();
    });

    it('Recruiter can connect their Calendar', () => {        
        cy.getByAutomationId('calendar-connect-hidden-link').invoke('removeAttr', 'target');
        interviewSchedulingSettings.clickConnectCalendar();
        urlShouldInclude('app.cronofy.com/oauth/');
        cy.get('body').should('contain.text', 'Company Test is using Cronofy to securely access your calendar');
        cy.get('.office365').click();
        cy.get('#account_profile_accept_terms').check();
        cy.contains('input', 'Link Office 365 Account').click();
    });
});

可行解决思路 #

1. 跳过真实OAuth流程，直接模拟认证状态（推荐）

第三方OAuth登录是Cypress跨域测试的常见痛点，最佳实践是绕过真实跳转流程，通过后端接口或本地存储直接模拟日历已连接状态：

describe('Enhanced Interviews: Calendar Connection', () => {
    beforeEach(() => {
        cy.recruitingLogin();
        settingsNav.navigateToSettingsInterviewScheduling();
    });

    it('Recruiter can connect their Calendar (mock auth)', () => {        
        interviewSchedulingSettings.clickConnectCalendar();
        // 调用后端模拟接口，直接完成日历连接
        cy.request('POST', '/api/calendar/connect', { 
            provider: 'office365', 
            mock: true,
            userId: Cypress.env('TEST_USER_ID')
        }).then(() => {
            cy.reload();
            // 验证日历连接成功的UI状态
            cy.getByAutomationId('calendar-connected-badge').should('be.visible');
            cy.getByAutomationId('disconnect-calendar-btn').should('exist');
        });
    });
});

这种方法避免了跨域跳转的不稳定问题，测试执行效率更高。

2. 用cy.origin()覆盖完整跨域流程

之前的cy.origin()仅处理了Cronofy域，点击后跳转的login.live.com是新的跨域地址，需要单独处理：

it('Recruiter can connect their Calendar with full origin handling', () => {        
    cy.getByAutomationId('calendar-connect-hidden-link').invoke('removeAttr', 'target');
    interviewSchedulingSettings.clickConnectCalendar();

    // 处理Cronofy域的操作
    cy.origin('https://app.cronofy.com', () => {
        cy.get('.office365').click();
        cy.get('#account_profile_accept_terms').check();
        cy.contains('input', 'Link Office 365 Account').click();
    });

    // 处理login.live.com的登录流程
    cy.origin('https://login.live.com', () => {
        // 填入测试账号信息
        cy.get('#i0116').type(Cypress.env('OFFICE365_TEST_USER'));
        cy.get('#i0118').type(Cypress.env('OFFICE365_TEST_PWD'));
        cy.get('#idSIButton9').click();
        // 处理权限确认（根据实际页面调整选择器）
        cy.get('#idBtn_Back').click();
    });

    // 返回原应用验证状态
    cy.url().should('include', '/settings/interview-scheduling');
    cy.getByAutomationId('calendar-connected-status').should('contain.text', 'Connected');
});

注意：需要在Cypress环境变量中配置测试用Office365账号，且确保该账号已授权应用访问日历。

3. 临时关闭Chrome Web安全（仅调试用）

在cypress.config.js中关闭Chrome的跨域安全限制，临时调试问题：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    chromeWebSecurity: false,
    // 其他配置...
  },
});

⚠️ 该方法仅用于本地调试，不适合CI环境或生产测试。

4. 升级Cypress版本

部分旧版Cypress在处理跨域重定向时存在已知bug，升级到最新稳定版（建议12.x以上）可能解决卡顿问题。

关于Google账号403错误的说明 #

使用Google账号出现403，通常是测试环境的Google OAuth配置未添加测试账号到授权列表，或API密钥缺少日历访问权限，属于单独的配置问题，与当前卡顿问题无关。

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