Cypress中contains+exist与should+have.text断言的差异咨询

两种写法的执行逻辑、校验目标完全不同，具体差异如下：

cy.get('[testid=t]').contains('text').should('exist') 执行逻辑 #

• 先匹配[testid=t]对应的DOM元素作为查询根节点
• .contains()是DOM查询命令而非断言，默认行为是从根节点出发，遍历自身和所有后代元素，查找第一个文本内容包含目标字符串的元素，最终返回这个匹配到的元素
• 该写法实际校验的是「目标根元素范围内存在包含指定文本的元素」，不是校验最初选中的div本身的文本
• 注意：.contains()本身自带「匹配元素必须存在」的默认断言，后面追加的.should('exist')是冗余代码，不影响执行结果
• 该命令匹配文本时，会计入CSS伪元素::before/::after生成的content文本，同时会自动忽略被CSS设置为隐藏状态（display:none、visibility:hidden等）的元素内的文本，和DOM原生读取文本的逻辑不一致

cy.get('[testid=t]').should('have.text', 'text') 执行逻辑 #

• 先匹配[testid=t]对应的DOM元素本身
• have.text是针对当前选中元素的断言，直接读取元素的原生textContent属性值，和传入的目标文本做完全相等匹配
• 该写法的校验对象就是你最初选中的div本身，会把div内所有嵌套子元素的文本、直接文本节点的内容全部拼接后做比对，只要拼接后的完整文本和传入值完全一致就会通过
• 该断言读取的是DOM原生属性值，不会计入伪元素生成的文本，也不会过滤隐藏子元素的文本

一败一成的常见触发场景 #

两种写法结果不一致，通常是因为你要校验的文本本身就是目标div的直接文本节点，且存在干扰.contains()匹配的因素：比如div自身或伪元素生成了额外的可见文本、文本节点存在特殊不可见字符被contains判定为不匹配、get命中多个元素时contains的遍历逻辑和多元素断言逻辑存在差异。
如果你的需求是校验某个元素本身的完整文本完全等于目标值，直接用have.text即可；只有当你需要确认元素内部存在某个包含指定文本的后代节点时，才适合用.contains()的写法。

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