Cypress中如何移除HTML文本空白字符解决have.text断言错误

方法1：修剪首尾空白（适配仅首尾有异常空白的场景） #

直接调用trim()方法移除文本首尾所有换行、制表符、空格类空白字符后再做全等断言：

ReceiptPage.getPageIntro()
  .invoke('text')
  .invoke('trim')
  .should('eq', this.data.receiptPageIntro)

方法2：全局清理所有多余空白（适配全文本存在异常空白的场景） #

如果文本中间也存在换行、制表符、连续多空格的情况，用正则统一替换所有连续空白为单个空格后再断言：

ReceiptPage.getPageIntro()
  .invoke('text')
  .then(rawText => rawText.replace(/\s+/g, ' ').trim())
  .should('eq', this.data.receiptPageIntro)

/\s+/g正则会匹配所有类型的空白字符连续序列，统一替换为单个空格，彻底规避各类空白格式干扰。

方法3：封装自定义命令（适配高频使用场景） #

如果项目中大量存在这类需要处理空白的文本断言，可以在cypress/support/commands.js中封装自定义命令复用逻辑：

Cypress.Commands.add('assertCleanText', { prevSubject: 'element' }, (el, expectedText) => {
  cy.wrap(el)
    .invoke('text')
    .then(text => text.replace(/\s+/g, ' ').trim())
    .should('eq', expectedText)
})

后续断言直接调用即可：

ReceiptPage.getPageIntro().assertCleanText(this.data.receiptPageIntro)

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