Cypress中自动下载导致加载错误的问题求助

核心原因 #

页面加载时自动触发的.vcf下载请求会干扰Cypress对页面加载状态的判断，导致cy.visit()一直等待页面加载完成，最终超时挂起。

最优解决方案：拦截下载请求 #

使用Cypress的cy.intercept()拦截.vcf下载请求并中止它，让页面能正常完成加载，之后即可正常断言页面元素。

基础示例代码 #

const urlCard = `${Cypress.config().baseUrl}/bc/${cardNew}`;

// 拦截所有.vcf格式的下载请求（可根据实际请求路径调整匹配规则）
cy.intercept('GET', '**/*.vcf').as('vcfDownload');

cy.visit(urlCard);

// 等待拦截到下载请求后中止它
cy.wait('@vcfDownload').then(interception => {
  interception.abort();
});

// 现在可以正常对页面元素进行断言
cy.get('[data-testid="card-info"]').should('be.visible');

适配无后缀的vcf请求场景 #

如果.vcf请求的URL不包含.vcf后缀，可以通过响应头的Content-Type（text/vcard）来匹配拦截：

cy.intercept('GET', '**', {
  middleware: true,
  onResponse: (interception) => {
    const contentType = interception.response.headers['content-type'];
    if (contentType && contentType.includes('text/vcard')) {
      interception.abort();
    }
  }
}).as('vcfDownload');

const urlCard = `${Cypress.config().baseUrl}/bc/${cardNew}`;
cy.visit(urlCard);
cy.wait('@vcfDownload');

// 执行元素断言
cy.get('.card-name').should('have.text', '目标用户名');

其他可选方案 #

• 配置全局下载路径：在cypress.config.js中指定下载目录，让Cypress自动处理下载行为，但此方法无法完全避免页面加载被干扰：

  module.exports = defineConfig({
    e2e: {
      downloadsFolder: './cypress/downloads',
      // 其他配置项...
    }
  });
  

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