Cypress中cy.contains正则匹配父元素失败的原因及解决咨询

当你使用cy.contains('.row', /^My_Name_Here$/)时，正则里的^和$要求目标元素的文本内容从开头到结尾完全等于My_Name_Here，但.row元素的实际文本包含了HTML嵌套结构带来的缩进换行、空格等空白字符，并不是纯的目标字符串，所以完全匹配的正则无法命中。

而cy.contains('.row', /My_Name_Here/)只要求文本中包含目标字符串，不管前后的空白，因此能生效；直接选择.name元素时，它的文本就是无额外空白的My_Name_Here，所以/^My_Name_Here$/可以精准匹配。

有几种可靠的方式可以基于子元素文本选中.row元素：

• 方式一：调整正则，允许前后空白
  用正则匹配时，允许目标字符串前后存在任意空白字符（空格、换行、制表符等），忽略HTML结构带来的干扰：

  cy.contains('.row', /^\s*My_Name_Here\s*$/)
  

  其中\s*表示匹配0个或多个空白字符。

• 方式二：先定位文本所在子元素，再向上查找父级
  先精准找到包含目标文本的.name元素，再通过closest()方法向上定位到最近的.row父元素，这种方式直观且不易出错：

  cy.contains('.name', /^My_Name_Here$/).closest('.row')
  

• 方式三：使用filter手动判断文本内容
  先获取所有.row元素，再过滤出文本内容去除空白后等于目标字符串的元素：

  cy.get('.row').filter((index, el) => el.textContent.trim() === 'My_Name_Here')
  

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