如何在 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() 产生了正确的 select 元素。

如果我做这样的事情：

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

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

Answer 1

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

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

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

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

Answer 2

您可以简单地访问 cypress 选择器的长度属性。

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