如何在Cypress中实现Ajax分页表格逐页遍历及自动翻页操作

你现有代码的问题主要有两个：

1. Cypress所有命令都是异步入队执行的，同步的for循环会在页面实际更新前就把10次循环的命令全部提交到执行队列，队列内的命令和实际页面状态完全不匹配，导致翻页逻辑异常。
2. 翻页代码写在了行处理的if (text.trim() === '')条件分支内，只有当前页存在符合条件的行时才会触发翻页，逻辑位置完全错误。

不需要提前知道总页数，通过判断下一页按钮的可用状态自动终止遍历，完全适配动态页数的场景，代码如下：

// 定义递归函数，每次调用处理一页数据
function processAllPages() {
  // 处理当前页所有行
  cy.get('tr:has(td)').each(($tr, rowIndex) => {
    cy.wrap($tr)
      .find('td')
      .invoke('slice', 5, 8)
      .invoke('text')
      .then(text => {
        if (text.trim() === '') {
          console.log(`第${rowIndex+1}行存在三个空列`)
          cy.wrap($tr).find('td').eq(5).click({force: true})
          // 原有硬等待可以删除，下面的可见性断言已经足够等待弹窗加载
          cy.get('.review-modal_textarea_3L5AQ').eq(0).should('be.visible').type(str)
          // 如果需要提交弹窗内容，此处补充提交按钮的点击逻辑
        }
      })
  }).then(() => {
    // 所有行处理完成后判断是否有下一页
    cy.get('.pagination_pagination_2iOOV > :nth-child(4)').then($nextBtn => {
      // 下一页不可用的判断条件可根据你的分页组件实际规则调整
      // 比如下一页隐藏就判断$nextBtn.length === 0，有禁用类就判断hasClass('disabled')
      if ($nextBtn.is(':disabled') || $nextBtn.hasClass('disabled')) {
        // 已到最后一页，终止递归
        return
      }
      // 点击下一页
      cy.wrap($nextBtn).click({force: true})
      // 等待下一页表格加载完成，替代硬等待
      cy.get('tr:has(td)').should('exist')
      // 递归处理下一页
      processAllPages()
    })
  })
}

// 启动处理流程
processAllPages()

• 移除所有不必要的硬等待cy.wait(xxx)，改用元素状态断言等待，执行速度更快，稳定性更高。
• 下一页按钮的禁用判断逻辑可根据你的分页组件实际表现调整，确保可以正确识别最后一页。

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