Docker化Cypress测试中cy.visit('/')超时失败求助

项目环境 #

• NodeJs v16.16.0
• Cypress v12.8.18

问题描述 #

搭建Docker化Cypress测试时，执行cy.visit('/')持续报错：页面未在60000ms内触发load事件。本地测试可正常运行，但部署到服务器并完成配置修改后，始终卡在该步骤。开启录屏后发现页面视觉上已加载完成：能连接目标数据库、显示预期填充数据，且可见登录账号的用户图标，但Cypress仍判定未触发load事件。

测试代码 #

describe("Verify Home page", () => {
  beforeEach(() => {
    cy.intercept(
      `${Cypress.env("SERVER_URL")}/app-api/v1/app`
    ).as("getappinfo");
    cy.seedDb();
    cy.loginAsUser();
    cy.visit("/");
  });

  it("Base page loads successfully", () => {
    cy.get("body").contains("AppName");
  });
});

Cypress配置文件 #

const { defineConfig } = require("cypress");
module.exports = defineConfig({
  video: false,
  screenshotOnRunFailure:false,
  fixturesFolder: "cypress/fixtures",
  env: {
    VUE_APP_TESTING_TENANT_ID: "####",
    VUE_APP_TESTING_TENANT_CLIENT_ID: "####",
    AUTH_CLIENT_SECRET: "####",
    USER_NAME_ASSOC:
      "testUser01@onmicrosoft.com",
    USER_PASSWORD_ASSOC: "####",
    AUTH_ENVIRONMENT: "login.windows.net",
    SERVER_URL: "https://Appserver.company.domain",
    DIFFERENT_APP_SERVER_URL:'https://DifferentAppServer.company.domain/',
    THIRD_APP_SERVER_URL:'https://ThirdAppServer.company.domain/',
    IS_LOCAL: false
  },
  e2e: {
    baseUrl: "https://Appserver.company.domain",
    setupNodeEvents(on, config) {
      on("task", {
        log(message) {
          console.log(message);
          return null;
        },
      });
    },
  },
});

已尝试的排查动作 #

• 调整cy.visit的超时时间、添加重试机制、简化测试文件，问题无改善
• 进入Docker容器执行DEBUG=cypress:* cypress run对比本地日志，修复了一处差异但问题仍存在
• 验证baseUrl和node_env变量配置正确，可通过控制台输出确认
• 监控浏览器并尝试本地复现，排查是否存在无法外部访问的资源导致应用挂起
• 发现Cypress日志中多次出现localhost，已移除开发环境vue.config中的localhost配置，但仍存在该现象
• 确认测试一个月前可正常运行，正在与开发团队核对代码变更及配置遗漏

针对性解决方案 #

1. 跳过load事件等待，基于核心元素判定加载完成 #

页面视觉加载完成但load事件未触发，大概率是第三方脚本、统计SDK等非核心资源未加载完成导致。可修改cy.visit，强制跳过load事件等待，直接等待核心元素确认页面就绪：

cy.visit('/', {
  onBeforeLoad(win) {
    // 拦截load事件监听，避免Cypress持续等待
    cy.stub(win, 'addEventListener').callsFake((event, handler) => {
      if (event !== 'load') {
        return win.addEventListener.wrappedMethod.call(win, event, handler);
      }
    });
  }
}).then(() => {
  // 替换为页面实际的核心元素选择器（比如用户图标）
  cy.get('.user-icon').should('be.visible');
});

2. 排查未加载的资源与跨域问题 #

在Docker容器内启动Cypress交互模式（cypress open），打开浏览器开发者工具：

• 查看网络面板的pending请求，确认是否有指向localhost或内网地址的遗留配置资源
• 临时关闭Cypress的跨域安全校验测试，在配置中添加：

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

3. 调整页面加载策略 #

将Cypress默认的load事件等待改为domcontentloaded，更适配单页应用场景：

cy.visit('/', {
  waitForAnimations: false,
  pageLoadTimeout: 30000,
  onBeforeLoad(win) {
    win.document.addEventListener('domcontentloaded', () => {
      cy.log('DOM结构已加载完成');
    });
  }
});

4. 验证Docker容器网络连通性 #

• 在容器内执行curl https://Appserver.company.domain，确认能正常访问目标页面
• 检查容器DNS配置，避免域名解析异常导致资源加载缓慢

5. 确认登录状态有效性 #

cy.loginAsUser()可能在服务器环境下未正确设置认证凭证，导致页面虽显示用户图标，但实际仍在等待认证状态：

cy.loginAsUser().then(() => {
  // 替换为实际的认证cookie/token名称
  cy.getCookie('auth_token').should('exist');
});

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