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

Question

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

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”，我们可以在其中做任何我们想做的事情，比如搜索特定元素并声明它。

Answer 1

.find() 用于单个元素的搜索，但仅将您的操作限制在该元素上

.within() 让您可以更改搜索子元素的范围并直接使用 cy.get('subelementSelector') 调用它们，也可以使用他们。不利的一面是，您不能从父元素范围之外调用元素。

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

编辑:澄清.find() - 允许单个使用元素.within(passedFunction()=>{}) - 将passedFunction的DOM元素的范围更改为子元素.then(element=>{}) - 不改变范围，但创建变量的 JQ 变量，可在 then 函数中使用cy.get('parentSelector childSelector') - 是获得与 .find()

相同结果的 css 方式