Cypress分页场景下随机课程查找点击问题求助

测试场景 #

• 在10页（每页20门课程）中查找并点击指定课程：
  • 若首页找到目标课程，点击该课程并终止流程
  • 若首页未找到，点击下一页继续查找，直至找到课程或到达最后一页
  • 到达最后一页时，验证下一页按钮处于禁用状态，并打印日志：“已到达最后一页，未找到课程”

问题描述 #

尝试用.each方法实现上述逻辑时出现异常：即使在第3页找到目标课程，程序仍持续点击下一页。以下是实现代码：

When ("I buy the course {string},(course:string)=>{
cy.get("div[slot='title']").each(($el) => {
cy.wrap($el).find("span:nth-of-type(1)").invoke("text").then((text) => {
  cy.log(text);
  if (text.includes(course)) {
    cy.wrap($el).parents(learningPathCards).find(pathCardTitles).shadow().find("cu-buttons[value*='$']").shadow().find(".btn.btn-sm.primary span").click();
    return false;
  } else {
    //         if (cy.get(nextButton).shadow().find("cu-navigation-buttons[type='next']").shadow().find("button[title='Next Page']").contains("disabled")) {
    //           cy.log("No more pages");
    //           break;
    //         }
    cy.get(nextButton).shadow().find("cu-navigation-buttons[type='next']").shadow().find("button[title='Next Page']").then(($button) => {
      if (!$button.is('disabled')) {
        cy.wrap($button).click()
      }
      cy.wait(1000)
    })
  }
})

问题分析 #

1. .each异步特性干扰：Cypress的.each是异步遍历，当找到课程并return false终止遍历时，之前未完成的else分支命令已进入命令队列，仍会执行翻页操作。
2. 逻辑错误：每遍历一个未匹配的课程就触发翻页，导致一页内多次翻页，完全违背“整页未找到再翻页”的要求。
3. 跨页查找失效：.each只能遍历当前页面加载的元素，翻页后页面元素更新，原逻辑无法处理新页面的课程。

解决方案 #

改用递归函数实现分页查找，确保每次完整检查当前页面所有课程后，再决定翻页或终止：

When("I buy the course {string}", (course) => {
  // 定义递归查找函数
  const findCourse = () => {
    cy.get("div[slot='title']").then(($titles) => {
      let found = false;
      // 同步遍历当前页面所有课程标题
      $titles.each((index, el) => {
        const text = Cypress.$(el).find("span:nth-of-type(1)").text();
        if (text.includes(course)) {
          found = true;
          // 找到课程后执行点击操作
          Cypress.$(el).parents(learningPathCards)
            .find(pathCardTitles).shadow()
            .find("cu-buttons[value*='$']").shadow()
            .find(".btn.btn-sm.primary span").click();
          return false; // 终止同步遍历
        }
      });

      if (!found) {
        // 检查下一页按钮状态
        cy.get(nextButton).shadow()
          .find("cu-navigation-buttons[type='next']").shadow()
          .find("button[title='Next Page']").then(($button) => {
            if ($button.is(':disabled')) {
              // 到达最后一页，打印日志
              cy.log("已到达最后一页，未找到课程");
            } else {
              // 点击下一页后递归查找
              cy.wrap($button).click();
              cy.wait(1000); // 可替换为元素加载断言提升可靠性
              findCourse();
            }
          });
      }
    });
  };

  // 启动递归查找
  findCourse();
});

关键改进点 #

• 同步遍历当前页：用Cypress.$同步遍历课程标题，确保一次完成整页检查，避免异步队列干扰。
• 递归处理分页：当前页未找到时，检查下一页按钮状态，可用则点击并递归查找，不可用则终止流程。
• 避免重复翻页：仅当整页课程未匹配时才触发翻页，完全符合测试场景逻辑。

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