如何在赛普拉斯断言中计算 DOM 元素答案

【问题标题】：How to count DOM elements in Cypress assertion如何在赛普拉斯断言中计算 DOM 元素
【发布时间】：2018-11-09 14:25:51
【问题描述】：

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

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

我可以选择我需要的选项，并使用 each() 对其进行迭代，然后以这种方式增加一个计数器。但是，它是异步的，也是一种笨拙的解决方案。我确定我的 cy.get() 产生的对象具有长度属性，但我似乎无法理解它。

这是我期望的工作之一。它将 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++);
});

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

【问题讨论】：

我不完全理解您的问题，但这可能会有所帮助 - cy.get('@groupSelect').children('option').then(options => expect(options.length).to.eq(otherTotal))。我不确定其他总数（DOM 中的类计数）是如何得出的，也许如果您发布更多代码，我们可以提供进一步的帮助。

标签： javascript testing cypress

【解决方案1】：

也许您可以利用Cypress.$。但请注意，文档并未准确宣传它是一种测试工具：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

我正在尝试将选择中的选项数量与类选择的元素数量进行比较。我并不是要断言它有一个固定的数量，而是这两个数量匹配。
我已经更新了我的答案，我们首先得到类选择的元素的长度，然后得到选择元素中元素的长度，然后我们做一个断言。没有测试代码，但稍作调整就可以工作。

【解决方案3】：

我发现，无论出于何种原因，我都需要链接get 两次。第一个 get 应该选择一个父元素，然后第二个应该选择所有元素，这些元素位于该父元素下，您可以计算。

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

【讨论】：

【解决方案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() 之前使用

【讨论】：