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