Cypress教程：如何统计表格中的非空行数量？

你之前的代码报错，是因为在原生DOM元素的innerHTML上直接调用Cypress的should断言——should是Cypress专属命令，只能用于Cypress包装后的对象，不能直接在原生JS属性中使用。

以下是两种可行的实现方式：

方法一：用filter直接过滤统计 #

这种方式最简洁，直接筛选出非空行后获取数量：

cy.get("#TableId")
  .find("tr")
  .filter((index, element) => {
    // 去除内容前后空白后判断是否为空，避免空格/换行导致误判
    return element.textContent.trim() !== "";
  })
  .then((nonEmptyRows) => {
    const nonEmptyCount = nonEmptyRows.length;
    cy.log(`非空行数量：${nonEmptyCount}`);
    // 可选：添加断言验证数量
    // expect(nonEmptyCount).to.equal(5);
  });

方法二：遍历行并记录索引+统计总数 #

如果需要单独记录每个非空行的索引，同时统计总数：

cy.get("#TableId")
  .find("tr")
  .each(($row, index) => {
    if ($row.text().trim() !== "") {
      cy.log(`非空行索引：${index}`);
    }
  })
  .then((allRows) => {
    // 最后统计非空行总数
    const nonEmptyCount = allRows.filter((_, row) => row.textContent.trim() !== "").length;
    cy.log(`非空行总数：${nonEmptyCount}`);
  });

关键注意点 #

• 优先用textContent（原生）或$row.text()（Cypress命令）获取行内容，搭配trim()去除空白字符，避免空行因空格/换行被误判为非空
• 尽量使用Cypress提供的each、filter等命令处理元素集合，减少原生JS循环与Cypress命令的混用，避免异步问题

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