在Cypress中获取父Div内特定Div数量及筛选含userid元素的方法

问题1：获取某一div内部特定div的数量 #

核心思路是先定位父容器，再查找内部目标元素，最后获取其长度：

示例代码 #

// 假设父div有类名.parent-container，目标div有类名.target-item
cy.get('.parent-container')
  .find('div.target-item')
  .its('length')
  .then(count => {
    console.log(`目标div数量：${count}`);
    // 可添加断言验证数量符合预期
    expect(count).to.equal(3);
  });

如果父div需要通过文本定位：

cy.get('div:contains("父容器标识文本")')
  .find('div.specific-class')
  .its('length')
  .should('be.gte', 1); // 断言数量至少为1

问题2：筛选id为chatLisHolder的元素下包含'userid'的子元素 #

根据包含内容的类型（文本或属性），有两种常见实现方式：

筛选文本包含'userid'的元素 #

cy.get('#chatLisHolder')
  .children() // 或用.find()查找更深层级的元素
  .filter(':contains("userid")')
  .then(filteredEls => {
    // 对筛选后的元素执行操作，比如遍历或断言
    filteredEls.each((index, el) => {
      cy.wrap(el).should('contain', 'userid');
    });
  });

筛选属性包含'userid'的元素 #

如果元素带有包含'userid'的属性（如data-userid="xxx-userid-xxx"），可以用属性选择器或自定义筛选逻辑：

// 方法1：直接用属性选择器
cy.get('#chatLisHolder [data-userid*="userid"]')
  .should('have.length.greaterThan', 0);

// 方法2：自定义筛选回调
cy.get('#chatLisHolder')
  .find('*')
  .filter((_, el) => {
    return el.getAttribute('data-userid')?.includes('userid');
  });

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