Cypress中如何筛选指定父类的按钮并执行点击操作

针对你遇到的动态DOM场景，这里有几种可行的实现方式：

方法1：直接用CSS选择器实现OR逻辑 #

Cypress完全支持标准CSS选择器，你可以直接通过逗号分隔指定多个目标父元素，定位它们下面的按钮：

// 点击所有符合条件的按钮（red或green卡片下的）
cy.get('.info-card-red button, .info-card-green button').click({ multiple: true })

// 如果只需要点击第一个出现的符合条件的按钮
cy.get('.info-card-red button, .info-card-green button').eq(0).click()

方法2：排除不需要的父元素 #

通过.not()方法排除info-card-grey的卡片，再定位按钮：

// 从共同父元素下筛选出非grey的卡片，再点击按钮
cy.get('.info-card > div')
  .not('.info-card-grey')
  .find('button')
  .click({ multiple: true }) // 去掉该配置可只点击第一个符合条件的按钮

方法3：用.filter()精确筛选目标父元素 #

如果你想明确指定只选择red和green的卡片，可以用.filter()配合CSS选择器：

cy.get('.info-card > div')
  .filter('.info-card-red, .info-card-green')
  .find('button')
  .click({ multiple: true })

你之前代码的问题说明 #

你写的.find('class')是错误用法，find()方法用于查找子元素，这里你应该定位共同父元素下的子div（.info-card > div），再对这些div进行类筛选，而非查找名为class的元素。

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