How to get number of divs inside another div on Cypress

user_14366150 0
Viewed 184

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

cypress javascript
2 Answers

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.

user_28747890

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)
})
user_45712710
Related