Cypress如何比对从表格读取的数值与文本拼接的混合类型数据

核心问题根源 #

• HTML中的空格是 （非间断空格，Unicode U+00A0），和手动输入的普通半角空格（Unicode U+0020）编码不同，肉眼显示一致但实际字符串不相等。
• 你写的正则/[^a-zA-Z0-9 ]/g仅能过滤普通空格，无法匹配 ，因此替换后仍残留差异字符。
• 部分断言存在类型/用法错误：比如将parseFloat返回的数字类型直接和字符串做严格相等比对、用have.text断言纯字符串（该断言仅适用于DOM元素）。

可用解决方案 #

场景1：仅需要校验数值是否正确（推荐） #

直接从文本中提取数字部分做数值比对，完全避开特殊字符、空格的干扰：

cy.get('[data-cy="projectList"]')
  .find('[data-cy="project.chanceOrder"]')
  .eq(0) // 直接取第一个匹配元素，无需遍历
  .invoke('text')
  .then(rawText => {
    // 提取文本中所有数字和小数点，转成浮点数
    const actualChance = parseFloat(rawText.match(/[\d.]+/)[0])
    // 直接做数值比对
    expect(actualChance).to.equal(project.chanceOrder)
  })

场景2：需要校验完整文本内容 #

先统一处理所有类型的空白字符，再做比对：

cy.get('[data-cy="projectList"]')
  .find('[data-cy="project.chanceOrder"]')
  .eq(0)
  .invoke('text')
  .then(rawText => {
    // 把所有空白符（含 、换行、tab等）替换为单个普通空格，再去掉首尾空格
    const processedText = rawText.replace(/\s+/g, ' ').trim()
    const expectedText = `${project.chanceOrder} % edit`
    expect(processedText).to.equal(expectedText)
  })

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