在赛普拉斯，如何计算选择的项目并获得长度？

Question

我开始学习赛普拉斯。我有一个4行表（有一类数据表）。我可以通过这种方式验证行数：

cy.get('.datatable').find('tr').each(function(row, i){
        expect(i).to.be.lessThan(4)
})

这很好，但看起来很尴尬，因为我只想计算长度并且不需要访问行中的东西，我认为做一件事比做4件事更快。

如果我记录选择（不知道还有什么可以调用它）：

cy.log(cy.get('.datatable').find('tr'))

它出现为[object Object]，我不太确定如何解构这一点，这对我来说，我认为这一切都是错误的。

如果我尝试：

expect(cy.get('.datatable').find('tr')).to.have.lengthOf(4)

我得到AssertionError: expected { Object (chainerId, firstCall) } to have a property 'length'

如果我尝试：

    expect(Cypress.$('.datatable > tr')).to.have.lengthOf(4)

我得到AssertionError: expected { Object (length, prevObject, ...) } to have a length of 4 but got 0所以至少它有一个长度吗？

如果我记录选择方法，我会得到Object{4}。我不知道从哪里开始。这似乎是一件非常普遍的事情。

Answer 1

找到解决方案，这可用于检查项目数：

cy.get('.datatable').find('tr').should('have.length', 4)

这不适用于Cypress.$()符号方法。

参考：https://docs.cypress.io/guides/references/assertions.html#Length

Answer 2

您还可以获取所选项目through its property的长度，例如：

cy.get('.datatable').find('tr').its('length').should('eq', 4)
cy.get('.datatable').find('tr').its('length').should('be.gte', 4)

除了should('have.length', 4)

我使用赛普拉斯3.1.0和3.2.0版本进行了测试。

Answer 3

如果您想更加灵活并获得动态结果，请使用此功能。

cy.get('.listings-grid')
  .find('.listing')
  .then(listing => {
    const listingCount = Cypress.$(listing).length;
    expect(listing).to.have.length(listingCount);
  });

Answer 4

使用cypress API docs .should() section来自arrow function：

cy.get('.datatable').find('tr').should(($listOfElements) => {
   expect($listOfElements).to.have.length(4)
   // any other assertions, for example the below one
   // expect($listOfElements).to.have.any.keys('key1', 'key2')
})

此方法允许您使用Chai BDD notation并在元素列表中声明多个内容。

Answer 5

一种选择是使用“ have.length” ...

cy.get('.datatable tr').should('have.length', 4)

...另一种选择是使用

cy.get('.datatable tr').should(($tr) => {
    expect($tr).to.have.length(4)
})

...或者然后（同步查询）

cy.get('.datatable').then(($table) => {
  // synchronously query to find length of elements
  expect($table.find('td').length).to.equal(4)
})

Answer 6

我的用例是比较它，说不。页面上的“i”图标数量应与编号匹配。表行。所以，这个解决方案适用于它，即当我想比较没有。一个选择器与另一个选择器的元素数量

cy.get('first element').its('length').then((val)=>{
     cy.get('second element).its('length').should('eq',val)
})

在 then 捕获请求的属性（在本例中为长度）之后写入 its，并且在第一个 then 块中，我们通过获取第二个元素的长度进行比较< /p>

Answer 7

• .children (selector(byId, class, custom attribute) 生成 DOM 元素并重试直到超过 defaultCommandTimeout。

  cypress 配置 defaultCommandTimeout

• 一旦 DOM 元素存在并产生，就添加了 length 断言。

<ul data-qa="qa-navbar">
  <li>Home</li>
  <li>About</li>
  <li>Services</li>
  <li>Our Team</li>
  <li>Contact Us</li>
</ul>

    cy
      .get('[data-qa="qa-navbar"]') // selector
      .children() // get direct decendents 
      .should('have.length', 5); // add assertion to have lenght of 5