Cypress静态嵌套循环终止异常求助：找到目标后外层循环仍执行

问题原因 #

你的代码用同步for循环搭配Cypress的异步命令，导致循环逻辑与Cypress命令执行顺序冲突。cy.get().each()是异步执行的，同步for循环检查flag时，异步的元素遍历还未完成，flag未被及时设为true，因此外层循环会持续执行到最后一页。

修复方案：改用递归实现异步遍历 #

将同步循环替换为递归函数，确保每一步操作（当前页检查、点击下一页）都在Cypress异步命令完成后再执行。

修复后的代码 #

clickOnNextBtnUntilDisable() {
  // 定义递归函数，传入当前页码
  const checkPageAndProceed = (currentPage) => {
    // 检查当前页的元素列表
    cy.get(".MuiGrid-justify-xs-space-evenly .MuiGrid-container > p").then($elements => {
      let found = false;
      $elements.each((index, el) => {
        if (Cypress.$(el).text() === "Test Attribute Do not touch") {
          cy.log("Condition met");
          found = true;
          return false; // 终止jQuery的each循环
        }
      });

      if (found) {
        // 找到目标，终止递归
        return;
      }

      // 检查下一页按钮是否可用
      cy.contains("Next").then($nextBtn => {
        if ($nextBtn.is(":disabled")) {
          // 无下一页，终止递归
          return;
        }
        // 点击下一页后递归检查下一页
        cy.contains("Next").click();
        checkPageAndProceed(currentPage + 1);
      });
    });
  };

  // 从第1页开始执行
  checkPageAndProceed(1);
}

代码说明 #

• 递归逻辑：完成当前页检查后，根据是否找到目标、是否还有下一页决定是否继续递归，完全适配Cypress异步执行特性。
• 终止条件：找到目标元素或“Next”按钮不可用时，立即终止递归。
• 循环终止：用return false终止jQuery的each循环，避免无效遍历。

原代码问题点拆解 #

• 同步for循环会一次性执行所有迭代，不会等待cy.get().each()的异步操作完成，flag的赋值无法及时影响循环判断。
• return仅能终止cy.get().each()的内部循环，无法中断外层的同步for循环。

UI参考截图 #

• 第一页：
• 第二页及后续：

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