Cypress测试中如何实现多语言场景下的多可选文本匹配校验

Cypress 没有内置.or()链式断言，但你完全可以不写if判断、不丢失内置重试能力实现多语言文本匹配，两种常用方案如下，都不会产生脆弱测试。 #

方案一：正则匹配（零配置，最推荐） #

直接利用Cypress原生支持的正则断言，把所有合法的多语言文本拼成「或」逻辑的正则即可，断言执行时会自动重试直到匹配成功或超时，完全符合重试要求。
如果只需要判断元素包含任意一个目标文本，直接用下面的写法：

// 只要div内包含Hello、Hola任意一个就判定通过
cy.get('div').should('contain.match', /Hello|Hola/)

如果你的可选文本比较多，或者存在特殊字符，可以先把合法值存在数组里，动态生成转义后的正则，不用手动拼接：

// 所有合法的多语言取值
const validCopy = ['Hello', 'Hola', 'Bonjour', '你好']
// 转义特殊字符后拼接成正则
const copyRegex = new RegExp(
  validCopy.map(str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|')
)

cy.get('div').should('contain.match', copyRegex)

方案二：自定义.or()链式断言（适配你期望的语法） #

如果你就是想要示例里的链式.or()调用写法，可以在Cypress的support入口文件（一般是cypress/support/e2e.js）里注册一个自定义Chai断言，注册后全局可用，同样完整保留重试能力：

// 写入support文件即可全局生效
chai.Assertion.addMethod('or', function (assertionName, expectedValue) {
  const target = this._obj
  // 前序断言失败时，校验当前or后的断言，任意一个通过即整体通过
  const runAssertion = () => new chai.Assertion(target)[assertionName](expectedValue)
  
  try {
    runAssertion()
  } catch (firstErr) {
    try {
      runAssertion()
    } catch (secondErr) {
      this.assert(
        false,
        `expected #{this} to satisfy previous assertion or ${assertionName} #{exp}`,
        `expected #{this} to not satisfy previous assertion or ${assertionName} #{exp}`,
        expectedValue
      )
    }
  }
})

注册完成后，你就可以直接用你写的示例风格的代码了：

cy.get('div')
  .should('contain', 'Hello')
  .and('or', 'contain', 'Hola')

注意：不要在.should()的回调函数里自行编写if/else判断分支，这种写法会打断Cypress的命令重试链路，才是导致flaky测试的根源。上面两种方案都基于Cypress原生断言体系实现，会完整继承自动重试能力。

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