GitHub Actions中循环遍历路由时Cypress测试提前访问页面问题

问题根源 #

问题出在同步JavaScript循环（forEach）与Cypress异步命令队列的机制冲突上：

• Cypress的所有命令都是异步的，会被加入队列按顺序执行，但forEach是同步JS代码——它会在cy.logIn仅被加入队列、还未实际完成登录流程时，就把所有循环内的cy.visit、cy.location命令一次性塞进执行队列。
• 本地环境运行速度快，cy.logIn的实际执行会赶在队列里的cy.visit之前完成；但GitHub Actions环境资源有限、运行速度慢，cy.logIn还在执行（比如等待登录接口响应、页面跳转）时，队列里的cy.visit就已经启动，此时用户未完成登录，自然触发异常。
• 你添加的cy.wait(100)完全不可靠，固定等待时间在不同环境下容错性极差，GitHub Actions中100ms根本不足以覆盖登录流程的延迟。

修复步骤 #

1. 用Cypress原生cy.each替代forEach #

cy.each是Cypress专为异步场景设计的遍历命令，它会等待当前迭代的所有命令执行完成后，再启动下一个迭代，完美适配Cypress的队列执行机制。

修改后的测试代码：

describe('when prices only client tries to access restricted pages.', () => {
    const restrictedPages = [
        '/',
        '/trade-flows',
        '/vessel-tracking',
        '/port-analytics/overview',
        '/container-tracking',
        '/news/overview',
        '/chart-builder/sugar-summaries',
        '/downloads/kulea-balance-sheets',
    ];

    it('should redirect to /prices/commodity-dashboard?groupId=1 if trying to access', () => {
        cy.logIn({ accountType: 'banker', loginDetailsCorrect: true });
        
        // 用cy.each替代同步forEach
        cy.wrap(restrictedPages).each((page) => {
            cy.visit(page);
            cy.location('pathname', { timeout: 10000 }).should('equal', '/prices/commodity-dashboard');
        });
    });
});

2. 确保cy.logIn自定义命令的可靠性 #

检查你的cy.logIn命令是否正确等待了登录流程的完全结束，比如：

• 等待登录接口响应完成
• 等待页面跳转到登录后的目标页面
• 等待页面出现登录成功的标识元素（如用户头像）
• 等待本地存储中出现认证token

示例可靠的cy.logIn命令：

Cypress.Commands.add('logIn', (options) => {
    cy.visit('/login');
    cy.get('#username').type(options.username);
    cy.get('#password').type(options.password);
    cy.get('#submit-btn').click();
    // 关键：等待登录完成的可视化标识，确保登录流程真正结束
    cy.get('.user-avatar', { timeout: 15000 }).should('be.visible');
});

3. 移除无用的cy.wait(100) #

固定等待时间是测试不稳定的根源，完全依赖Cypress的自动等待机制即可，它会自动等待元素出现、断言条件满足。

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