如何在Cypress中比较带格式数值？断言失败及NaN问题求助

问题分析 #

1. 直接文本断言失败原因：两个元素的文本看似相同，但第一个元素中的空格是 （Unicode U+00A0，非断行空格），第二个是普通空格（U+0020），字符串实际不相等，导致断言失败。
2. Math.floor转换失败原因：原始文本包含空格、逗号、货币符号等非数字字符，无法直接转换为数字，最终得到NaN，而NaN与任何值（包括自身）都不相等。

解决方案：提取并格式化数值后比较 #

核心思路是先清理文本中的非数字相关字符，将其转换为可识别的数值类型，再进行断言。

方法一：直接在断言中处理文本

// 获取第一个元素的文本并转换为数值
cy.get('[data-pl-cart-in-total]').invoke('text').then(text1 => {
  const num1 = parseFloat(text1.replace(/[^\d,]/g, '').replace(',', '.'));
  
  // 获取第二个元素的文本并转换为数值后比较
  cy.get('span').invoke('text').then(text2 => {
    const num2 = parseFloat(text2.replace(/[^\d,]/g, '').replace(',', '.'));
    expect(num1).to.equal(num2);
  });
});

方法二：封装为自定义命令（复用性更高）

在cypress/support/commands.js中添加自定义命令：

Cypress.Commands.add('extractNumber', (selector) => {
  return cy.get(selector).invoke('text').then(text => {
    // 移除所有非数字和逗号的字符，再将逗号替换为小数点
    const cleanedText = text.replace(/[^\d,]/g, '').replace(',', '.');
    return parseFloat(cleanedText);
  });
});

然后在测试用例中使用：

cy.extractNumber('[data-pl-cart-in-total]').then(total1 => {
  cy.extractNumber('span').then(total2 => {
    expect(total1).to.equal(total2);
  });
});

代码解释 #

• replace(/[^\d,]/g, '')：移除文本中所有非数字和逗号的字符（比如空格、货币符号р.）。
• replace(',', '.')：将欧洲式的小数分隔符逗号替换为JavaScript识别的小数点。
• parseFloat()：将清理后的文本转换为浮点数，实现数值层面的比较。

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