如何在Cypress中处理API调用：按需等待REST请求完成

我需要这样一种解决方案：点击元素后，如果触发了指定的REST请求，就等待该请求完成；否则直接继续执行后续操作。现有代码如下：

cy.intercept("<url1>").as("restCall");
cy.intercept("<url2>").as("restCall2");

cy.get("element").each($el => {
  if ($el.text() === text){
    cy.wrap($el).click();
    // 此处需添加代码：若触发请求则等待其完成
  } else{
    // 原代码此处冗余判断已移除
    cy.wrap($el).click();
  }
});

解决方案 #

通过cy.wait()结合超时设置与错误捕获，即可实现"触发请求则等待、未触发则继续"的逻辑，具体修改如下：

cy.intercept("<url1>").as("restCall");
cy.intercept("<url2>").as("restCall2");

cy.get("element").each($el => {
  if ($el.text() === text){
    cy.wrap($el).click();
    // 尝试等待请求，超时后忽略错误继续执行
    cy.wait('@restCall', { timeout: 1000, failOnStatusCode: false }).catch(() => {});
    cy.wait('@restCall2', { timeout: 1000, failOnStatusCode: false }).catch(() => {});
  } else{
    cy.wrap($el).click();
  }
});

说明 #

• timeout: 1000：设置等待请求的超时阈值，可根据接口实际响应速度调整。
• failOnStatusCode: false：即使请求返回错误状态码（如4xx/5xx），也不会中断测试流程。
• .catch(() => {})：捕获等待超时的错误，确保代码后续步骤正常执行。

如果需要同时等待两个请求（无需关心触发顺序），可以用cy.all()优化：

cy.wrap($el).click();
// 同时监听两个请求，任一超时则忽略
cy.all(
  cy.wait('@restCall', { timeout: 1000, failOnStatusCode: false }).catch(() => null),
  cy.wait('@restCall2', { timeout: 1000, failOnStatusCode: false }).catch(() => null)
);

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