What are the differences are there between using either of these methods:

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

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

From the documentation
.html
.html

They both let us work with a "sub DOM", in which we can do whatever we would like, like searching a specific element and assert it.

What are the differences are there between using either of these methods:

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

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

From the documentation
https://docs.cypress.io/api/commands/find.html
https://docs.cypress.io/api/commands/within.html

They both let us work with a "sub DOM", in which we can do whatever we would like, like searching a specific element and assert it.

• javascript
• cypress

• 1 If you chain something else off these commands, e.g .should(...), they will provide different subjects. cy.get('.wtv').find('.sub-wtv') will pass sub-wtv but cy.get('.wtv').within(() => {cy.get('.sub-wtv');}) will pass wtv. – Ackroydd Commented Nov 19, 2020 at 21:30
• @Ackroydd it depends. if you use .should() inside within like cy.get('.sub-wtv').should(); My question is more turned to understand which advantages one of the methods has over the other, and all I can see is that for 90% of the cases, none :P I would say that we should use one over the other just for those 10% edge cases in which only one of them is able to provide what we really want. It still seems to me that both of them work as a redudancy of each other (and that you can use whatever you would like the best, in most cases :) ) – notihs Commented Nov 20, 2020 at 11:00
• 1 Looks like you are missing the point about the different subjects. – Ackroydd Commented Nov 20, 2020 at 11:49

3 Answers 3

Differences in yield

Something not mentioned so far is the yielded subject, which is important for .should() assertions further down the chain.

• .within() yields the same subject as it was given, the code inside does not change the yield even if the callback returns a value

• .find() yields a new subject (as with any query)

• .then() yields whatever is returned from the callback, unless the return value is undefined or null, in which case it behaves like .within().

.find() is used for single search of an element, but only limits your actions to that element

.within() lets you to change the scope of searching the sub elements and call them directly with cy.get('subelementSelector'), and also work with them. The down side is, you can`t call elements from outside the scope of the parent element.

The third way is then. cy.get('elementSelector').then(element=>{//some code}) - this allows you to pass the element to a function for usage. You can search sub elements within with cy.get(element).find('subelementSelector'). Also you can use the usual commands for elements located outside the parent element scope. This has longer sintax, but greater scope.

Edit: To clarify .find() - allows a single usage of an element .within(passedFunction()=>{}) - changes the scope for DOM elements of the passedFunction to just child elements .then(element=>{}) - doesn't change the scope, but creates a JQ variable of the variable, that is available to use in the then function cy.get('parentSelector childSelector') - is the css way of getting the same result as .find()

Find:

Get the descendent DOM element/s of a specific selector. find() method always chains with other methods that return DOM elements and never get chain-ed with "cy" object.

 .find(selector)
 .find(selector, options)

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

Within:

It sorts those situation where we want to search web-element/s inside a parent web-element. It scopes all subsequent cy commands to within parent element. Useful when working within a particular group of elements such as form. This is written with a call back function eg. within(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')
     })