How to use filter(), find() and within() commands in cypress

In this article, we will discuss in detail how we can find DOM elements using filter(), find(), and within(). Let’s quickly understand first what these 3 commands do.

1. filter(): Gets the DOM elements that match a specific selector. The filtering can be done using a selector or with inner text values. This works similar to the filter jquery command.
2. find() – Gets the descendent DOM elements of a specific selector. This works similar to the find jquery command.
3. within() – Scopes all subsequent cy commands to within this element. Useful when working within a particular group of elements such as a form. This is written with a call back function eg. within(callbackFn).

Let’s further deep dive and automate a scenario using the above commands.

In this part of the code, we are logging in to the Orange CRM website. Then we are making sure that the elements that we would be working on are loaded and visible on the webpage. Next, let’s look into the DOM structure of our webpage.

The goal of this test case is to get the ‘Administration’ element and assert its text. Since from the above image, we could see that ‘Administration’ is a td element. So let’s execute cy.get(‘td’) and see what we will get.

As we can see above, there are a total of 23 td elements on the webpage. Now from those 23 elements to reach our desired element we would be using the filter() command with the matching class name. Hence next we will execute cy.get(‘td’).filter(‘.legendLabel’).

So now we have filtered the number of elements from 23 to 7. Since we know that the element ‘Administration’ is the second element on the list, hence we would be using eq(1) and then finally assert its text using should(). So the final command will be cy.get(‘td’).filter(‘.legendLabel’).eq(1).should(‘have.text’, ‘Administration’).
 

Now in the above code instead of filtering the elements on the basis of class name or any other attributes, we are using the inner text value, hence we are using the command .filter(‘:contains(“Client Services”)’), and then finally asserting its text using .should(‘have.text’, ‘Client Services’).
 

Let’s look at the DOM structure of the webpage.

In this test case we want to assert that the name of Employee 1 is ‘David’. Since our element is under empinfo, hence first we will execute cy.get(empinfo).

As we can see above we got the details of all three employees, so now to reach the name of employee 1 we are using .find(‘#1 > name’) and then finally assserting the name using .should(‘have.text’, ‘David’).
 

So here first we are logging into the Orange CRM website and then going to the performance tracker subpage. Then we are using Cypress.on(‘uncaught:exception’, (err, runnable) to suppress an exception produced by the webpage. Next, let’s look into the DOM structure of the webpage.

In this test case we are validating all values in the table row tr.odd. So to scope all the cypress command inside this particular row only, we are using the within call back function. And then we are validating all the elements one by one using eq() and should(‘have.text’, ‘some text’) commands.

After Execution:

Do check out 🙂

Github: https://github.com/alapanme/Cypress-Automation
All Cypress Articles: https://testersdock.com/cypress-tutorial/