查找元素：不同的语法 - >不同的结果 - 需要解释

Question

当我使用:cy.get('b').contains('xdz') // find 1 element

但是当我使用:cy.get('b:contains("xdz")') // find 2 elements

谁能给我解释一下有什么不同吗?

Answer 1

cy.get('b').contains('xdz')正在调用Cypress命令，该命令旨在仅返回单个元素。这是设计的目的，以便您可以根据文本内容缩小搜索范围。

cy.get('b:contains("xdz")')使用jquery伪选择器:contains()来测试元素<b>内的文本，并旨在返回所有匹配的元素。

伪选择器是CSS选择器语法的扩展，在选择过程中应用jQuery方法。在本例中，:contains(sometext)是$el.text().contains('sometext')的简写。因为它是选择器的一部分，所以它返回所有匹配的元素。

理解jquery选择器的变化是值得的，正如这个例子所示——它可以为不同的情况提供不同的结果。

Answer 2

contains('xdz')是一个柏树命令，它总是只生成包含文本的第一个元素。你可以从这个Github线程中了解更多。

:contains("xdz")是一个Jquery命令，它返回包含文本的所有元素。你可以从Jquery文档中了解更多。