Cypress如何基于父容器下的指定title子元素获取对应子item元素

有两种常用的稳定实现方案：

方案1：使用filter方法过滤目标容器 #

cy.get('.collapse')
  // 过滤出内部title文本为Apple的collapse容器
  .filter((_, collapseEl) => {
    return collapseEl.querySelector('.title')?.textContent.trim() === 'Apple'
  })
  .find('item')
  .eq(1) // *索引从0开始计数，第二个item对应下标1*
  .then(targetItem => {
    // 这里处理获取到的Apple 2元素
  })

方案2：更符合Cypress风格的链式定位 #

cy.contains('.collapse .title', 'Apple')
  // 向上查找最近的class为collapse的祖先元素，比直接用parent更稳定，避免DOM层级变化导致失效
  .closest('.collapse')
  .find('item')
  .eq(1)
  // 后续可直接加断言/操作，比如.should('have.text', 'Apple 2')

原有写法的问题 #

• Cypress所有命令都是异步入队执行的，cy.contains()返回的是Cypress实例对象，不能直接作为if的判断条件，你写的判断逻辑完全不生效
• cy.get('.collapse')会匹配页面上所有class为collapse的元素，within回调会在每个匹配到的元素内都执行一次，不符合只处理Apple对应容器的需求
• 原有代码里cy.get(item)没有给item加引号，属于语法错误，需要写成字符串'item'

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