Cypress 动态测试：如何验证匹配指定GUID的表格行状态

问题背景 #

需要实现遍历表格，为每一行动态创建测试用例验证其状态。待测试表格第一列为GUID标签，行按该列分组，需要筛选出标签包含指定GUID的行，为每一行单独验证其第三列的状态值。
参考官方动态测试示例后发现，官方仅覆盖了string、number这类静态基础类型列表的遍历场景，未涉及采集到的JQuery子元素的遍历处理。在Cypress命令执行逻辑内插入it()动态测试的代码无法生效。
原代码示例：

it('TEST Iterate rows matching GUID', () => {
  cy.fixture('esign').then($esignStore => {
   
   expect($esignStore).to.have.property('requestUUID').to.be.a('string').not.empty;
    cy.get('table[data-qa="act_ops_log_table"]').within(() => {
      cy.log('Ops Logs table found');
      cy.get('tbody[data-qa="act_ops_log_table_body"]').then(() => {
        cy.get('tr');
        cy.get('td');
        cy.get('td:nth-child(1)').each(($tableCell, $index, $list) => {
          const textEnvelope = $tableCell.text();
          if (textEnvelope.includes($esignStore.requestUUID)) {

            // pseudo-example of dynamically added test: start
            // it(`TEST ${$index}`, () => {
              cy.get('td:nth-child(3)')
                .eq($index)
                .then($field => {
                  const textStatus = $field.text();
                  expect(textStatus, 'succeeded');
                });
            // });
            // pseudo-example of dynamically added test: end

          }
        });
      });
    });
  });
});

核心问题说明 #

你无法在Cypress命令的执行回调（比如then()、each()的回调函数）里动态创建it()测试用例，因为Cypress的测试用例注册是在测试执行前的文件解析阶段完成的，执行阶段新增的it()不会被Cypress识别运行。

可行实现方案 #

方案1：单测试用例内批量校验（推荐，符合Cypress最佳实践） #

不用拆分多个it()用例，直接在一个用例内完成所有匹配行的校验，逻辑更简单，也不会出现索引错位问题：

it('匹配GUID的所有表格行状态校验', () => {
  cy.fixture('esign').then($esignStore => {
    expect($esignStore).to.have.property('requestUUID').to.be.a('string').not.empty;
    const targetUUID = $esignStore.requestUUID;

    // 直接遍历所有表格行
    cy.get('table[data-qa="act_ops_log_table"] tbody[data-qa="act_ops_log_table_body"] tr')
      .each(($row, index) => {
        // 取当前行第一列文本判断是否匹配目标GUID
        const firstColText = $row.find('td:nth-child(1)').text();
        if (firstColText.includes(targetUUID)) {
          // 直接取当前行第三列校验，避免全局查找的索引错误
          cy.wrap($row)
            .find('td:nth-child(3)')
            .should('have.text', 'succeeded', `第${index}行状态校验`);
        }
      })
  });
});

方案2：预采集数据生成独立动态用例（需拆分单独用例时使用） #

如果业务要求每个行的校验都作为独立测试用例展示，可以在前置钩子中先采集所有匹配行的测试数据，再在执行阶段前批量生成it()用例：

let targetUUID;
let matchedStatusList = [];

// 前置钩子：提前加载配置、采集匹配行的状态数据
before(() => {
  // 加载fixture拿到目标UUID
  cy.fixture('esign').then($esignStore => {
    targetUUID = $esignStore.requestUUID;
    expect(targetUUID).to.be.a('string').not.empty;
  });
  // 确保页面加载完成、表格渲染完毕
  cy.visit('你的页面访问路径');
  cy.get('table[data-qa="act_ops_log_table"] tbody[data-qa="act_ops_log_table_body"] tr')
    .each(($row) => {
      const firstColText = $row.find('td:nth-child(1)').text();
      if (firstColText.includes(targetUUID)) {
        // 将匹配行的状态存入全局数组
        matchedStatusList.push($row.find('td:nth-child(3)').text());
      }
    })
})

// 批量生成独立测试用例
matchedStatusList.forEach((status, index) => {
  it(`匹配GUID的第${index}行状态校验`, () => {
    expect(status).to.equal('succeeded');
  })
})

注意：方案2仅适用于表格数据为静态、测试过程中不会发生变更的场景，如果表格会动态更新，优先使用方案1即可。

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