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

Question

使用这两种方法之间有什么区别：cy.get('.wtv').find('.sub-wtv');cy.get('.wtv').within(() => {cy.get('.sub-wtv');});来自文档https://docs.cypress.io/api/commands/find.htmlhttps://docs.cypress.io/api/commands/within.html它们都让我们可以使用“子 DOM”，在其中我们可以做任何我们想做的事情，比如搜索特定元素并断言它。

Answer 1

.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()

Answer 2

查找：

获取特定选择器的后代 DOM 元素。find() 方法始终与返回 DOM 元素的其他方法链接，并且永远不会与“cy”对象链接。

 .find(selector)

 .find(selector, options)

 cy.get('.article').find('footer') // Yield 'footer' within '.article'

以内：

它对我们想要在父 Web 元素内搜索 Web 元素的情况进行排序。它将所有后续 cy 命令的范围限制在父元素内。在特定的元素组（例如表单）中工作时很有用。这是用回调函数编写的，例如。在（callbackFn）内。

 .within(callbackFn)

 .within(options, callbackFn)

 cy.get('.list').within(($list) => {}) // Yield the `.list` and scope all commands within it

   // validate placeholder attributes

   cy.get('.query-form').within(() => {

   cy.get('input:first').should('have.attr', 'placeholder', 'Email')

   cy.get('input:last').should('have.attr', 'placeholder', 'Password')

     })