如何在Cypress中对表格指定列数值求和并完成等值校验

你可以通过原生JavaScript完成校验，逻辑如下：

• 提取页面展示的总年龄数值：获取id为totalAge的<span>元素的文本内容，转换为数字类型
• 计算表格年龄列总和：选中表格中所有年龄列的单元格（第三列，对应选择器td:nth-child(3)），遍历提取每个单元格的数值累加
• 对比两个数值是否相等，输出校验结果

对应实现代码：

// 获取页面展示的总年龄
const pageTotal = Number(document.querySelector('#totalAge').textContent.trim());

// 累加计算表格年龄列总和
let tableTotal = 0;
document.querySelectorAll('table tr td:nth-child(3)').forEach(ageCell => {
  const ageVal = Number(ageCell.textContent.trim());
  // 跳过非数值的异常单元格内容
  if (!isNaN(ageVal)) {
    tableTotal += ageVal;
  }
});

// 执行校验
const checkResult = pageTotal === tableTotal;
console.log(`校验结果：${checkResult ? '一致' : '不一致'}，页面总年龄：${pageTotal}，表格计算总年龄：${tableTotal}`);

如果你是在自动化测试场景下使用，主流端到端测试框架都可以基于相同逻辑编写断言，以下是Cypress框架的示例：

cy.get('#totalAge').invoke('text').then(pageText => {
  const expectedTotal = Number(pageText.trim());
  let actualTotal = 0;
  cy.get('table tr td:nth-child(3)').each(cell => {
    actualTotal += Number(cell.text().trim());
  }).then(() => {
    expect(actualTotal).to.eq(expectedTotal);
  })
})

内容的提问来源于stack exchange，提问作者yurii.pitomets