如何在Cypress断言中计算DOM元素数量

Question

我想要计算一个select元素中选项的数量，以及DOM中某个类别的元素数量。我需要将这两个数量进行比较，并使用Cypress断言。我可以选择所需的选项，并使用each()进行迭代，通过递增计数器来实现。然而，这种方法是异步的，而且也不够优雅。我确定由cy.get()返回的对象具有length属性，但我似乎无法访问它。以下是我期望能够起作用的代码之一。它会向控制台记录undefined。

cy.get('div[data-cy-type="group-component"]:first').as('firstGroup');
cy.get('@firstGroup').find('[name=group_id]').as('groupSelect');
console.log(cy.get('@groupSelect').children('option').length);

我知道我的别名很好，而且我的cy.get()正在产生正确的选择元素。

如果我做这样的事情：

cy.get('@groupSelect').children('option').each(function(){
    console.log(i++);
});

然后它将迭代每个选项。但由于它是异步的，因此在这个流程中没有太大帮助。

- charliefortune

---

我不太明白你的问题，但这个可能会有所帮助 - cy.get('@groupSelect').children('option').then(options => expect(options.length).to.eq(otherTotal))。我不确定其他总数（DOM中类的数量）是如何推导出来的，也许如果你发布更多代码，我们可以进一步帮助你。 - Richard Matsen

Answer 1

也许你可以利用 Cypress.$。但请注意，文档并没有明确将其宣传为测试工具：

这是从开发者工具进行调试时同步查询元素的好方法。

无论如何，我相信沿着这条线路做一些事情会产生你期望的值：

selector = 'div[data-cy-type="group-component"]:first select[name=group_id] option'
count = Cypress.$(selector).length

- Arnaud P

Answer 2

你可以简单地访问Cypress选择器的length属性。

cy.get('.elements')
        .its('length')
        .then(lengthOfClassElements => cy
           .get('select > option')
           .its('length')
           .then(lengthOfOptions => {
               expect(lengthOfClassElements).to.be.moreThan(lengthOfOptions)
           });

- Francis Malloch

---

我正在尝试比较选择框中选项的数量与按类选择的元素的数量。我并不是要断言它具有固定的数量，而是两个数量相匹配。 - charliefortune

我已经更新了我的答案，我们首先获取所选类别的元素长度，然后获取选择元素中的元素长度，然后进行断言。没有测试过代码，但稍加修改后它将能够工作。 - Francis Malloch

Answer 3

我发现，出于某种原因，我需要两次链接get。第一个get应选择父元素，然后第二个get应选择该父元素下的所有元素，您希望计数这些元素。

const expectedCount = 5; // whatever count you expect
cy.get('.parentClass').get('.childClass').should('have.length', expectedCount);

- cham

Answer 4

我在一个问题中成功地完成了计数/长度的操作，
类似的建议可以从这里开始-

cy.get('@groupSelect').children('option').length

转换为这个 -

cy.get('@groupSelect').children('option')
  .then((optionObj)=>{
    let count= Cypress.$(optionObj).length
    console.log('option count: ', count);
  })  

注意：console.log也可以在cy.get()之前使用。

- CodeWorld