如何对动态可选元素取值求和验证结果，并提取纯数字

1. 提取文本中的数字 #

首先需要从元素文本中剥离出纯数字，这里可以用正则表达式过滤非数字字符，再转换为数值类型：

// 通用数字提取函数
const extractNumber = (text) => {
  // 保留数字和小数点，适配整数/浮点数
  const numStr = text.replace(/[^0-9.]/g, '');
  // 空文本返回0，避免NaN
  return numStr ? Number(numStr) : 0;
};

2. 处理动态元素的存在性 #

针对A、B元素可能不显示的情况，不要直接用cy.get()（元素不存在会直接报错），而是通过cy.get('body').then()获取页面容器后，用jQuery的find()方法判断元素是否存在：

cy.get('body').then(($body) => {
  let calculatedTotal = 0;

  // 检查A元素是否存在，存在则累加数值
  const $aElement = $body.find('[data-cy="A-element-selector"] > span');
  if ($aElement.length) {
    calculatedTotal += extractNumber($aElement.text());
  }

  // 检查B元素是否存在，存在则累加数值
  const $bElement = $body.find('[data-cy="B-element-selector"] > span');
  if ($bElement.length) {
    calculatedTotal += extractNumber($bElement.text());
  }

  // 获取结果元素的数值并验证
  cy.get('[data-cy="sum-element-selector"] > span')
    .invoke('text')
    .then((sumText) => {
      const actualSum = extractNumber(sumText);
      expect(calculatedTotal).to.equal(actualSum);
    });
});

3. 适配你的选择器场景 #

如果你的三个元素共用同一个data-cy属性，可以通过文本标识区分（比如A元素含"A:"、结果元素含"总和:"），调整代码如下：

const extractNumber = (text) => {
  const numStr = text.replace(/[^0-9.]/g, '');
  return numStr ? Number(numStr) : 0;
};

cy.get('body').then(($body) => {
  let calculatedTotal = 0;
  const targetCells = $body.find('[data-cy="Selected in Final InterviewofferBreakUpTableBodyCellRenderer"] > span');

  // 遍历所有目标单元格，累加A、B的数值
  targetCells.each((index, element) => {
    const cellText = Cypress.$(element).text();
    if (cellText.includes('A:') || cellText.includes('B:')) { // 根据实际文本标识调整
      calculatedTotal += extractNumber(cellText);
    }
  });

  // 找到结果单元格并验证
  targetCells.filter(':contains("总和:")') // 替换为实际结果文本标识
    .invoke('text')
    .then((sumText) => {
      const actualSum = extractNumber(sumText);
      expect(calculatedTotal).to.equal(actualSum);
    });
});

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