如何在Cypress中实现同步API调用并返回可链式调用结果？

问题需求 #

1. 在areAllTypesFound函数内发起三个API调用，根据返回结果判断是否获取到所有必要数据
2. 结果需包装为Cypress.Chainable<boolean>类型返回
3. doStuff函数调用areAllTypesFound后，需等待其执行完成，根据布尔结果执行对应操作，再执行后续代码

当前问题：areAllTypesFound即使所有数据存在也始终返回false，原因是Cypress异步特性导致逻辑顺序错误。

原因分析 #

原代码中三个API调用是异步执行的，而allTypesPresent的计算在API调用完成前就执行了，此时type1Present等变量仍为初始值false，所以最终返回false。必须确保所有API调用完成后再进行结果判断。

修改后的代码 #

class MyClass {

  static areAllTypesFound(params): Cypress.Chainable<boolean> {
    // 并行执行三个API调用，等待所有请求完成
    return cy.all(
      ApiCaller.getItemType1(params.param1),
      ApiCaller.getItemType2(params.param2),
      ApiCaller.getItemType3(params.param3)
    ).then(([res1, res2, res3]) => {
      // 分别判断每个类型是否有数据
      const type1Present = res1.body.items.length > 0;
      const type2Present = res2.body.items.length > 0;
      const type3Present = res3.body.items.length > 0;

      // 可选：打印各类型ID数组
      const idsType1 = res1.body.items.map(item => item.id);
      const idsType2 = res2.body.items.map(item => item.id);
      const idsType3 = res3.body.items.map(item => item.id);
      cy.log(`Type1 IDs: ${JSON.stringify(idsType1)}`);
      cy.log(`Type2 IDs: ${JSON.stringify(idsType2)}`);
      cy.log(`Type3 IDs: ${JSON.stringify(idsType3)}`);

      // 返回所有类型是否都存在的布尔值
      return type1Present && type2Present && type3Present;
    });
  }

  static doStuff(): void {
    this.areAllTypesFound(params).then((areFoundBoolean) => {
      if (areFoundBoolean) {
        // 所有类型存在时执行的操作
      } else {
        // 存在缺失类型时执行的操作
      }
    }).then(() => {
      // 此处代码会等待上面的判断逻辑完成后再执行
      // do more stuff
    });
  }
}

关键修改点说明 #

1. 并行等待所有API调用：使用cy.all()（Cypress 12+支持）并行发起三个API请求，并等待所有请求完成后进入then回调，确保后续判断基于完整的响应数据。
2. 在回调内处理结果：所有变量赋值和结果判断都放在cy.all()的回调中，避免异步导致的变量未更新问题。
3. 链式执行后续代码：在doStuff中，将后续代码放在areAllTypesFound().then(...)的链式then回调内，确保等待前序逻辑完成后再执行。

如果使用低于12版本的Cypress，可以用Promise.all结合cy.wrap实现相同效果：

static areAllTypesFound(params): Cypress.Chainable<boolean> {
  return cy.wrap(Promise.all([
    ApiCaller.getItemType1(params.param1),
    ApiCaller.getItemType2(params.param2),
    ApiCaller.getItemType3(params.param3)
  ])).then(([res1, res2, res3]) => {
    // 后续处理逻辑同上
    const type1Present = res1.body.items.length > 0;
    const type2Present = res2.body.items.length > 0;
    const type3Present = res3.body.items.length > 0;
    return type1Present && type2Present && type3Present;
  });
}

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