CODEWITHSUNDEEP
javascriptcypress
Weenhallo
Weenhallo

Reputation: 364

How to get number of divs inside another div on Cypress

I'm wondering if there is a way to save into a variable the number of divs inside anoher div? I tried with children() but it returns me 1

This is the code:

<div class="MuiDataGrid-columnHeadersInner MuiDataGrid-columnHeadersInner--scrollable css-rr28u3-MuiDataGrid-columnHeadersInner" aria-rowindex="1" role="row" style="transform: translate3d(0px, 0px, 0px);">

     <div class="MuiDataGrid-columnHeader" data-field="group" role="columnheader" tabindex="0" aria-colindex="1" style="width: 200px; min-width: 200px; max-width: 200px;"></div>

     <div class="MuiDataGrid-columnHeader MuiDataGrid-columnHeader--alignCenter" data-field="role_1" role="columnheader" tabindex="-1" aria-colindex="2" style="width: 100px; min-width: 100px; max-width: 100px;"></div>

     <div class="MuiDataGrid-columnHeader MuiDataGrid-columnHeader--alignCenter" data-field="role_3" role="columnheader" tabindex="-1" aria-colindex="3" style="width: 100px; min-width: 100px; max-width: 100px;"></div>

And this is my cypress code:

cy.intercept('GET', 'url').as('GetRoles')
cy.wait('@GetRoles').its('response.body.roles').then(res => {
       var roles = res.filter(obj => {
       return obj
})
cy.get('.css-d1hq6e > .MuiDataGrid-root > .MuiDataGrid-main > .MuiDataGrid-columnHeaders').children().should('have.length', roles.length)
})

When I run this test assert fails because expect to have a length of 3 but got 1.

Any help?

Thank you

Upvotes: 1

Views: 1296

Answers (2)

Alapan Das
Alapan Das

Reputation: 18624

You can use within and assert the length to be 3 like this:

cy.get(
  '.css-d1hq6e > .MuiDataGrid-root > .MuiDataGrid-main > .MuiDataGrid-columnHeadersInner'
).within(() => {
  cy.get('div').should('have.length', 3)
})

Upvotes: 1

Christopher Shroba
Christopher Shroba

Reputation: 7574

You're selecting a class called MuiDataGrid-columnHeaders but I don't see any elements in your HTML with that class. I'm guessing maybe that is the name of the class containing all of the HTML that you pasted, in which case it is correct that it only has one child: your div with class MuiDataGrid-columnHeadersInner.

Try changing your selector to this:

'.css-d1hq6e > .MuiDataGrid-root > .MuiDataGrid-main > .MuiDataGrid-columnHeadersInner'

If that doesn't work, change it back to how you originally have it, but print out the value of the .children() to see what children it is seeing, and that should explain why there is only one child rather than three.

Upvotes: 2

Related Questions