如何在Cypress元素列表中查找并断言指定ID是否存在

你原有写法的核心问题是cy.get()查询到多个元素时，直接调用.should('have.id', xxx)只会对第一个匹配元素执行断言，不会遍历所有元素做校验，同时你原有代码还存在两处语法问题：

• 别名引用需要用引号包裹，cy.get(@selectedId)要改为cy.get('@selectedId')
• 元素选择器需要用引号包裹，cy.get(app .idListA)要改为cy.get('app .idListA')

实现方案 #

方案1：链式调用提取ID数组校验 #

assertSelectedIdMovedToAnotherList() {
  // selectedId 从其他函数产出
  cy.get('@selectedId').then((selectedId) => {
    cy.get('app .idListA')
      // 将查询到的元素集合转为普通数组
      .invoke('toArray')
      // 提取所有元素的id属性
      .then(elements => elements.map(el => el.id))
      // 断言目标ID存在于ID数组中
      .should('include', selectedId)
  });
}

方案2：should回调内自定义断言（自带重试机制） #

assertSelectedIdMovedToAnotherList() {
  cy.get('@selectedId').then((selectedId) => {
    cy.get('app .idListA').should($listElements => {
      // 转数组后提取所有ID
      const idList = [...$listElements].map(item => item.id)
      expect(idList).to.include(selectedId)
    })
  });
}

两种方案都可以实现全列表ID扫描校验，方案2的优势是Cypress会对should内的断言自动重试，适配列表元素异步加载的场景。

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