如何计算Cypress断言中的DOM元素

Question

我试图计算select元素中的选项数，以及DOM中某个类的元素数。

我需要比较这两个总数来得出赛普拉斯的断言。

我可以选择所需的选项，并使用each（）对它们进行迭代，然后以这种方式递增一个计数器。然而，它是异步的，也是一个笨拙的解决方案。我确信我的cy.get（）生成的对象有一个length属性，我就是看不懂它。

这是我期望的事情之一。它将未定义的日志记录到控制台。

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（）正在生成正确的select元素。

如果我这样做：

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

然后它将迭代每个选项。但是它是异步的，所以在这个流程中没有多大帮助。

Answer 1

我发现，不管出于什么原因，我需要两次链接get。第一个get应该选择一个父元素，然后第二个应该选择所有的元素，生活在该父元素下，你要计数。

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

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

Answer 3

也许你可以利用Cypress。但是，请注意，文档并没有确切地宣传它是一种测试工具：

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

无论如何，我相信沿着这条路线的某些东西会产生你期望的价值：

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