如何编写Cypress代码统计分页表格所有页面的总行数？

问题分析 #

原代码仅能统计前10页的核心原因：分页组件默认只渲染10个页码按钮，初始获取的.page-link仅包含这10个元素，后续页码需要点击「Next」按钮才会动态加载，原代码未处理这种动态变化的元素集合，且直接同步操作DOM的方式不符合Cypress异步执行逻辑。

解决方案 #

采用递归循环点击「Next」按钮的方式，直到「Next」按钮处于禁用状态（表示已到最后一页），每次切换页面后统计当前页行数并累加总数，覆盖所有页面（含超过10页的部分）。

完整代码实现 #

it('统计分页表格所有页面的总行数', () => {
  cy.visit('https://dockurl.vbsoft.info/') 
  
  let totalRowCount = 0;

  // 定义递归函数处理分页遍历
  const iteratePages = () => {
    // 统计当前页表格行数
    cy.get('tbody tr').then(rows => {
      totalRowCount += rows.length;
      cy.log(`当前页行数：${rows.length}，累计总行数：${totalRowCount}`);
    });

    // 检查Next按钮是否可用（未被禁用）
    cy.get('.page-link:contains("Next")').then(nextButton => {
      if (!nextButton.hasClass('disabled')) {
        // 点击Next按钮并等待表格内容更新
        cy.wrap(nextButton).click();
        cy.get('tbody tr').should('be.visible'); // 确保页面加载完成
        iteratePages(); // 递归处理下一页
      } else {
        // 遍历完成，输出最终结果
        cy.log(`所有页面总行数：${totalRowCount}`);
        cy.window().then(win => {
          win.console.log(`所有页面总行数：${totalRowCount}`);
        });
      }
    });
  };

  // 启动遍历流程
  iteratePages();
});

关键说明 #

• 动态分页适配：通过递归逻辑适配动态加载的页码，无需提前获取所有页码按钮，解决了仅能遍历初始10页的问题。
• 异步逻辑兼容：全程使用Cypress异步命令，避免同步DOM操作导致的元素状态不一致问题。
• 加载状态校验：点击Next后等待表格行可见，确保页面数据完全加载后再统计行数，避免计数错误。
• 终止条件判断：通过检查Next按钮的disabled类判断是否到达最后一页，可根据实际分页组件的禁用标识（如aria-disabled属性）调整判断逻辑。

原代码核心问题修正 #

1. 移除了同步DOM操作document.querySelectorAll，改用Cypress命令获取元素，适配异步执行逻辑。
2. 替换了初始静态遍历页码按钮的逻辑，改为动态遍历所有页面的递归逻辑。
3. 修复了rowCount变量作用域错误，确保累计计数正确。

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