如何让Cypress无需等待背景图加载，提前操作登录控件？

方法一：修改cy.visit的等待逻辑，只等DOM就绪 #

Cypress默认会等待页面的load事件（所有资源包括图片、样式都加载完成），我们可以改成等待DOMContentLoaded事件（DOM结构加载完毕，无需等待图片），这样文本框一可用就能开始操作：

cy.visit(loginUrl, {
  onBeforeLoad(win) {
    // 监听DOMContentLoaded，触发后立即推进测试
    return new Cypress.Promise(resolve => {
      win.addEventListener('DOMContentLoaded', resolve);
    });
  }
});

// 后续操作不变
cy.get('#user').type(email);
cy.get('#password').type(password);
cy.get('#submit').click();

方法二：拦截背景图请求，跳过加载 #

直接拦截体积大的背景图请求，让Cypress不用等待它加载完成，示例如下：

// 替换成你的背景图实际请求路径
cy.intercept('GET', '/assets/large-bg-image.png', { statusCode: 200, body: '' });

cy.visit(loginUrl);

cy.get('#user').type(email);
cy.get('#password').type(password);
cy.get('#submit').click();

方法三：全局配置缩短页面加载等待时长 #

如果多个测试都有类似问题，可以在cypress.config.js里全局调整页面加载超时时间，同时禁用动画等待：

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      // 自定义节点事件逻辑（如果有的话）
    },
    waitForAnimations: false, // 禁用动画等待
    pageLoadTimeout: 10000, // 设置页面加载超时为10秒，到点就停止等待资源
  },
};

注意：这种全局配置会影响所有测试，若有其他测试需要等待完整资源加载，建议优先用前两种局部方法。

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