如何在Cypress中模拟返回HttpProgressEvent以测试文件上传进度？

可以通过Cypress的cy.intercept()结合自定义处理函数来模拟HttpProgressEvent，以此测试文件上传/下载时的加载标记。

具体实现方式是使用cy.intercept()的回调模式，通过res.progress()方法手动触发进度事件，Angular的HttpClient会捕获这些事件并触发订阅回调中的进度处理逻辑。

示例代码 #

// 拦截目标请求，模拟进度事件
cy.intercept('GET', 'someUrl', (req) => {
  req.reply((res) => {
    // 模拟第一次进度更新
    res.progress({
      loaded: 30,
      total: 100,
      type: 'download' // 根据场景选择'upload'或'download'
    });

    // 延迟后发送第二次进度
    setTimeout(() => {
      res.progress({
        loaded: 70,
        total: 100,
        type: 'download'
      });
    }, 500);

    // 最后完成请求，返回响应
    setTimeout(() => {
      res.send({
        statusCode: 200,
        body: {} // 你的响应体内容
      });
    }, 1000);
  });
});

// 测试加载标记的显示逻辑
cy.get('button').click(); // 触发请求的操作
cy.get('.loading-indicator').should('be.visible'); // 断言加载标记显示
cy.get('.loading-indicator').should('not.exist'); // 请求完成后断言标记隐藏

关键说明 #

• res.progress()方法传递的对象需要符合浏览器ProgressEvent的结构，核心字段包括：
  • loaded: 已加载的字节数或百分比
  • total: 总字节数或总百分比
  • type: 事件类型，可选upload或download
• 通过延迟触发多次进度事件，可以更真实地模拟大文件加载的渐进过程，确保UI中的加载标记能持续显示直到请求完成。

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