如何在Cypress断言中统计并比较两类DOM元素的数量

我明白你遇到的问题了——Cypress的异步特性确实很容易在这里踩坑，直接访问cy.get(...).length会返回undefined，是因为cy.get()返回的并不是直接的DOM元素集合，而是Cypress的Chainable命令对象，它还没真正执行获取元素的操作呢。

接下来我给你几个简洁且符合Cypress流程的解决方案，帮你轻松获取两个元素数量并完成断言：

方法一：链式.then()获取并比较 #

这种方式最直观，先拿到select下option的数量，再获取目标类元素的数量，最后在回调里完成断言：

// 先获取第一个分组select的option数量
cy.get('div[data-cy-type="group-component"]:first')
  .find('[name=group_id] option') // 直接定位option，比children更简洁
  .then($options => {
    const optionCount = $options.length;
    
    // 接着获取你要对比的目标元素数量（这里假设目标元素类是.group-item，可替换成你的选择器）
    cy.get('.group-item').then($targetElements => {
      const targetCount = $targetElements.length;
      
      // 执行断言，比如判断数量相等
      expect(targetCount).to.equal(optionCount);
      // 也可根据需求改成其他断言，比如to.be.greaterThan等
    });
  });

方法二：用.its()简化长度获取 #

Cypress的.its()命令可以直接提取对象的属性，用它来获取length会更简洁：

cy.get('div[data-cy-type="group-component"]:first')
  .find('[name=group_id] option')
  .its('length') // 直接拿到option的数量
  .then(optionCount => {
    // 把目标元素的长度和optionCount做断言对比
    cy.get('.group-item')
      .its('length')
      .should('equal', optionCount);
  });

方法三：用别名存储数量后对比 #

如果你需要在多个地方复用这两个数量，可以用别名存储，再在回调里取出比较：

// 存储option数量到别名
cy.get('div[data-cy-type="group-component"]:first')
  .find('[name=group_id] option')
  .its('length')
  .as('optionCount');

// 存储目标元素数量到别名
cy.get('.group-item')
  .its('length')
  .as('targetCount');

// 取出两个别名的值进行断言
cy.get('@optionCount').then(optionCount => {
  cy.get('@targetCount').should('equal', optionCount);
});

为什么你之前的方法不行？ #

• 直接console.log(cy.get(...).length)：cy.get()是异步命令，此时它还没执行完，返回的是Cypress的命令包装对象，不是实际的DOM元素，所以length是undefined。
• 用each()遍历计数：each()是Cypress命令队列的一部分，它的回调是异步执行的，你无法把计数同步传递到外部流程中，自然无法满足同步比较的需求。

这些方法都完全符合Cypress的异步流程，不会出现时序问题，你可以根据自己的场景选择最合适的一种~

内容的提问来源于stack exchange，提问作者charliefortune