Cypress表格验证问题：仅校验首个td，无法遍历全部单元格

问题场景 #

我有如下Cucumber步骤定义：

Then I verify that Ontvanger has received Type message with Onderwerp and Status
  | berichtOntvanger | berichtType | berichtOnderwerp | berichtStatus |
  | test1Rij1        | test2Rij1   | test3Rij1        | test4Rij1     |

该表格可包含一行或多行，需要验证应用中的对应表格，但编写的verifyBerichtenTableRow方法存在问题：

verifyBerichtenTableRow(table) {
    const tableContents = table.hashes();
    tableContents.forEach((element) => {
        cy.get('.berichten-centrum .p-datatable-table')
            .find('tr')
            .each(($row, $rowIndex) => {
                if ($rowIndex >= 1) {
                    cy.wrap($row)
                        .find('td')
                        .each(($cell, $columnIndex) => {
                            cy.wrap($cell.eq($columnIndex)).should('have.text', element.DatumTijd);
                            cy.wrap($cell.eq($columnIndex)).should('have.text', element.Ontvanger);
                            cy.wrap($cell.eq($columnIndex)).should('have.text', element.Type);
                            cy.wrap($cell.eq($columnIndex)).should('have.text', element.Onderwerp);
                            cy.wrap($cell.eq($columnIndex)).should('have.text', element.stand);
                        });
                }
            });
    });
}

测试能识别每行有6个td，但仅校验第一个td，无法遍历全部单元格，求解决思路。

问题分析与解决思路 #

核心问题 #

1. 单元格遍历逻辑错误：在td的each循环里，$cell本身就是当前循环的单个单元格，却用$cell.eq($columnIndex)，导致始终取当前td集合的第$columnIndex个元素，而非对应列的单元格。
2. 列名映射不匹配：Cucumber表格列名是berichtOntvanger、berichtType等，但代码里用element.Ontvanger、element.Type，命名不对应会导致取值为空。
3. 重复校验同一单元格：单个单元格循环里连续写5个断言，全部校验同一单元格文本，逻辑完全混乱。

修正后的代码 #

verifyBerichtenTableRow(table) {
    const tableContents = table.hashes();
    // 定义页面表格列索引与Cucumber字段的映射（根据实际页面列顺序调整）
    const columnMap = {
        DatumTijd: 0,
        berichtOntvanger: 1,
        berichtType: 2,
        berichtOnderwerp: 3,
        berichtStatus: 4,
        // 第6列若有对应字段可补充
    };

    tableContents.forEach((expectedRow, rowIndex) => {
        // 直接定位到对应的数据行（跳过表头，行索引+1）
        cy.get('.berichten-centrum .p-datatable-table tr')
            .eq(rowIndex + 1)
            .find('td')
            .then(($cells) => {
                // 遍历预期字段，对应到页面列校验
                Object.entries(columnMap).forEach(([field, colIndex]) => {
                    const expectedText = expectedRow[field];
                    if (expectedText) { // 仅校验Cucumber表格中存在的字段
                        cy.wrap($cells.eq(colIndex)).should('have.text', expectedText);
                    }
                });
            });
    });
}

关键优化点 #

• 列映射清晰化：通过columnMap明确页面列与测试用例字段的对应关系，便于后续维护。
• 行定位精准：直接用eq(rowIndex + 1)定位目标数据行，避免遍历所有行的无效操作。
• 字段匹配准确：使用Cucumber表格原始列名取值，解决命名不匹配导致的空值问题。
• 逻辑高效简洁：不再遍历每个单元格，而是按预期字段直接定位对应列校验，逻辑更清晰。

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