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.html
https://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')     })