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

Question

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

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

有人能解释一下有什么区别吗？

Answer 1

contains('xdz')是一个cypress命令，它总是只生成包含文本的第一个元素。您可以从这个Github螺纹上读到更多关于它的信息。

:contains("xdz")是一个Jquery命令，它返回包含文本的所有元素。你可以从Jquery文档上读到更多关于它的信息。

Answer 2

cy.get('b').contains('xdz')正在调用Cypress命令，该命令设计为只返回一个元素。这是由设计，以便您可以缩小搜索的文本内容。

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

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

理解jquery选择器变体(如本例所示)是值得的--它可以为不同情况提供不同的结果。