Cypress文本断言时如何忽略软连字符­完成校验

软连字符（Unicode 编码 U+00AD，HTML 实体写为 ­）会真实存在于DOM的textContent中，哪怕视觉上没有渲染出来，也会导致Cypress默认的文本匹配断言失败，以下是无需手动在预期文本中插入软连字符的可行方案：

方案1：取文本后清洗软连字符再断言（推荐，无副作用） #

直接获取元素的文本内容，全局替换掉所有软连字符后再做断言，不会修改页面本身的DOM结构，不影响页面原有渲染逻辑：

cy.get('h1')
  .invoke('text') // 取出元素的纯文本内容
  .then(actualText => actualText.replace(/\u00AD/g, '')) // 清除所有软连字符
  .should('contain', 'some longpagetitle') // 按正常预期文本断言即可

如果这类校验场景很多，可以封装成全局自定义命令减少重复代码：

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

// 自定义忽略软连字符的文本包含断言
Cypress.Commands.add('containTextIgnoringShy', {
  prevSubject: 'element'
}, (subject, expectedText) => {
  const cleanedActualText = subject.text().replace(/\u00AD/g, '')
  expect(cleanedActualText).to.contain(expectedText)
  return subject
})

2. 后续所有需要忽略软连字符的断言直接调用即可：

cy.get('h1').containTextIgnoringShy('some longpagetitle')

方案2：页面加载后批量清除DOM内软连字符（按需使用） #

如果不需要校验软连字符相关的排版逻辑，可以在页面加载完成后批量清除所有软连字符，后续所有文本断言都不需要额外处理：

cy.visit('/your-page-path')
// 页面加载完成后全局替换软连字符
cy.document().then(doc => {
  doc.body.innerHTML = doc.body.innerHTML.replace(/­|\u00AD/g, '')
})
// 后续正常写断言即可
cy.get('h1').should('contain.text', 'some longpagetitle')

注意：该方案会直接修改页面DOM结构，可能导致依赖软连字符实现的长词自动换行排版失效，仅适合纯文本校验、不关心页面排版的测试场景。

不推荐的做法 #

不要手动在预期文本中插入软连字符来匹配，软连字符的插入位置通常是为了排版优化，后续文案调整、排版规则变动时软连字符位置很容易变化，会导致断言维护成本极高。

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