如何在Cypress中筛选不包含指定值集合的元素并操作？

方案一：使用.filter()自定义过滤逻辑 #

通过.filter()方法筛选出文本不在目标数组中的元素，再选择第一个执行点击操作：

const value = [6, 9, 21];

cy.get(".list > div")
  .filter((index, element) => {
    // 提取元素文本并转为数字（适配纯数字内容的场景）
    const elementText = parseInt(element.textContent.trim(), 10);
    // 返回不在排除列表中的元素
    return !value.includes(elementText);
  })
  .eq(0)
  .click();

适配非纯数字文本场景 #

如果元素文本包含其他字符（比如"编号：6"），调整为字符串匹配逻辑：

const elementText = element.textContent.trim();
return !value.map(String).includes(elementText);

方案二：拼接:not(:contains())选择器 #

把需要排除的内容拼接成复合选择器，直接过滤元素：

const value = [6, 9, 21];
// 拼接成:not(:contains('6')):not(:contains('9')):not(:contains('21'))格式
const excludeRule = value.map(val => `:contains('${val}')`).join(':not');

cy.get(`.list > div:not(${excludeRule})`)
  .eq(0)
  .click();

注意 #

这个方法依赖:contains匹配，会命中包含目标值的元素（比如文本是"商品6号"也会被排除），如果需要精确匹配，优先用方案一。

方案三：遍历元素筛选并点击 #

通过.each()遍历元素，找到第一个符合条件的元素后点击并终止遍历：

const value = [6, 9, 21];

cy.get(".list > div").each(($el) => {
  const text = parseInt($el.text().trim(), 10);
  if (!value.includes(text)) {
    cy.wrap($el).click();
    return false; // 终止遍历，只处理第一个匹配项
  }
});

这种方式适合需要添加额外判断逻辑的场景。

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