如何在 Cypress 上获取另一个 div 中的 div 数量

Question

我想知道是否有办法将另一个 div 中 div 的数量保存到变量中？我尝试使用 children() 但它 returns 我 1

这是代码：

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

这是我的赛普拉斯代码：

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

当我运行这个测试断言失败，因为期望长度为 3 但得到了 1。

有什么帮助吗？

谢谢

Answer 1

您正在选择一个名为 MuiDataGrid-columnHeaders 的 class，但我在您的 HTML 中没有看到任何包含 class 的元素。我猜这可能是包含您粘贴的所有 HTML 的 class 的名称，在这种情况下它只有一个 child 是正确的：您的 div 与 class MuiDataGrid-columnHeadersInner.

尝试将选择器更改为：

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

如果这不起作用，将它改回原来的样子，但打印出 .children() 的值以查看 children 它看到的是什么，这应该可以解释为什么只有一个 child 而不是三个。

Answer 2

您可以像这样使用 within 并将长度断言为 3：

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

如何在 Cypress 上获取另一个 div 中的 div 数量

How to get number of divs inside another div on Cypress

javascript

cypress