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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
describe('Example to demonstrate filter, find and within commands in cypress', () => {

    it('Using filter with selector', function () {
        cy.visit('/')
        cy.loginOrangeCRM('Admin', 'admin123')
        cy.get('.legendColorBox', { timeout: 7000 }).should('be.visible')
        cy.get('td').filter('.legendLabel').eq(1).should('have.text', 'Administration')
    })

    it('Using filter with innerText', function () {
        cy.visit('/')
        cy.loginOrangeCRM('Admin', 'admin123')
        cy.get('.legendColorBox', { timeout: 7000 }).should('be.visible')
        cy.get('td').filter(':contains("Client Services")').should('have.text', 'Client Services')
    })

    it('Using find', function () {
        cy.visit('https://testautomationpractice.blogspot.com/')
        cy.get('empinfo').find('#1 > name').should('have.text', 'David')
    })

    it('Using within', function () {
        cy.visit('/index.php/performance/addPerformanceTrackerLog/trackId/3')
        cy.loginOrangeCRM('Admin', 'admin123')
        Cypress.on('uncaught:exception', (err, runnable) => {
            return false
        })
        cy.get('tr.odd').should('be.visible').within(() => {
            cy.get('.left').eq(0).should('have.text', 'Fiona Grace')
            cy.get('.left').eq(1).should('have.text', 'Project X')
            cy.get('.left').eq(2).should('have.text', 'Worked long hours to achieve t...')
            cy.get('.left').eq(3).should('have.text', 'Positive')
            cy.get('.left').eq(4).should('have.text', '2020-10-09')
        })
    })
})

cypress filter find within test script
 

1
2
3
4
5
6
it('Using filter with selector', function() {
  cy.visit('/')
  cy.loginOrangeCRM('Admin', 'admin123')
  cy.get('.legendColorBox', { timeout: 7000 }).should('be.visible')
  cy.get('td').filter('.legendLabel').eq(1).should('have.text', 'Administration')
})

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.

DOM element Administration

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.

cypress get on all td elements

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

cypress get and filter on the basis of class name

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

1
2
3
4
5
6
it('Using filter with innerText', function() {
  cy.visit('/')
  cy.loginOrangeCRM('Admin', 'admin123')
  cy.get('.legendColorBox', { timeout: 7000 }).should('be.visible')
  cy.get('td').filter(':contains("Client Services")').should('have.text', 'Client Services')
})

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

1
2
3
4
it('Using find', function() {
  cy.visit('https://testautomationpractice.blogspot.com/')
  cy.get('empinfo').find('#1 > name').should('have.text', 'David')
})

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

html structure for dom traversal

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

cypress get employee info

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
it('Using within', function() {
  cy.visit('/index.php/performance/addPerformanceTrackerLog/trackId/3')
  cy.loginOrangeCRM('Admin', 'admin123')
  Cypress.on('uncaught:exception', (err, runnable) => {
    return false
  })
  cy.get('tr.odd').should('be.visible').within(() => {
    cy.get('.left').eq(0).should('have.text', 'Fiona Grace')
    cy.get('.left').eq(1).should('have.text', 'Project X')
    cy.get('.left').eq(2).should('have.text', 'Worked long hours to achieve t...')
    cy.get('.left').eq(3).should('have.text', 'Positive')
    cy.get('.left').eq(4).should('have.text', '2020-10-09')
  })
})

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.

cypress get table row

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:

cypress filter find within test script execution

Do check out 🙂

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