Cypress：cy.get("a").find("b") 和 cy.get("ab") 之间的任何区别

Question

好像它们是一样的。 cy.get("a").find("b")和cy.get("ab")之间的输出有什么区别吗？

（其中a和b是一些选择器，例如div和span ，或.someClass和.someOtherClass 。）

Answer 1

正如您在问题中所述， cy.get("a").find("b")和cy.get("ab")之间没有区别。 但是 Cypress 中find和get命令之间最重要的区别是cy.get()是从cy链接起来的，它总是在整个document查找选择器，如 Cypress 文档中所述。 但正如赛普拉斯文档中再次指出的那样，查找工作如下：

获取特定选择器的后代 DOM 元素。

因此命令cy.get("a").find("b")返回所有b元素这是一个的继任者a元素，但cy.get("a").get("b")中找出所有a和b元素，无论它们是父元素还是子元素。

Answer 2

结果没有区别，但实现上有区别。

来自.find()命令的文档：

此命令的查询行为与.find()在 jQuery 中的工作方式完全匹配。

换句话说，

cy.get("a").find("b");

相当于下面的 JQuery：

$("a").find("b");

$("a").find("b"); 将产生与$("ab")相同的结果，但将使用不同的方法到达那里。

---

我在一个相当复杂的页面上做了一些测试来确认这一点：

请注意cy.get("td").find("tr")和cy.get("td tr")的数字结果如何相同。

Answer 3

find() 不会在 cy 上工作，而可以在链接的 DOM 上工作。 下面的命令会抛出错误 cy.find('.progress') // Errors, cannot be chained off 'cy'

Answer 4

结果通常没有区别。

cy.get("a").find("b").click()只会重试find('b').click() ，而cy.get("ab").click()将重试整个选择cy.get("ab") 。 https://docs.cypress.io/guides/core-concepts/retry-ability#Only-the-last-command-is-retry

通常两者都会得到相同的结果，但是当结果不同时，调试很烦人。 我尽量坚持一个命令。