Cypress - find() 和 inside() 方法之间的区别

not*_*ihs 8 javascript cypress

使用这两种方法之间有什么区别:


cy.get('.wtv').find('.sub-wtv');

cy.get('.wtv').within(() => {cy.get('.sub-wtv');});

来自文档
https://docs.cypress.io/api/commands/find.html
https://docs.cypress.io/api/commands/within.html

它们都让我们可以使用“子 DOM”,在其中我们可以做任何我们想做的事情,比如搜索特定元素并断言它。

小智 7

产量差异

到目前为止还没有提到的是产生的主题,这对于 .should()链下游的断言很重要。

  • .within()产生与给定的主题相同的主题,即使回调返回一个值,里面的代码也不会改变产量

  • .find()产生一个新主题(与任何查询一样)

  • .then()产生从回调返回的任何内容,除非返回值是undefinednull,在这种情况下它的行为类似于.within()


小智 6

.find()用于单个元素的搜索,但仅限于该元素的操作

.within()允许您更改搜索子元素的范围并直接使用 调用它们cy.get('subelementSelector'),也可以使用它们。缺点是,您无法从父元素范围之外调用元素。

那么第三种方法就是 。cy.get('elementSelector').then(element=>{//some code})- 这允许您将元素传递给函数以供使用。您可以使用 搜索其中的子元素cy.get(element).find('subelementSelector')。您还可以对位于父元素范围之外的元素使用常用命令。它的语法更长,但范围更大。

编辑: 澄清一下 .find()- 允许元素的单次使用 .within(passedFunction()=>{})- 将 passFunction 的 DOM 元素的范围更改为子元素 .then(element=>{})- 不会更改范围,但会创建该变量的 JQ 变量,可在then 函数 cy.get('parentSelector childSelector')- 是获得与以下相同结果的 css 方法.find()

  • 另一种方法是将选择器组合到单个“.get”调用中。`cy.get('.wtv .sub-wtv')` (2认同)