Cypress技术问题：如何遍历元素并筛选含Shadow DOM的目标div？

原代码的问题在于没有先筛选出带Shadow Root的目标div，直接从所有div中查找导致范围过大，无法精准定位。可以按以下方式调整：

1. 先筛选出带Shadow DOM的div #

页面中只有那5个div带有Shadow Root，先过滤出这些div，排除无关元素干扰：

cy.get('div').filter((index, element) => {
  // 判断元素是否存在Shadow Root
  return element.shadowRoot !== null;
})

2. 在筛选后的div中定位目标元素 #

遍历这些带Shadow DOM的div，检查其内部是否包含目标文本，找到后执行点击操作：

cy.get('div')
  .filter((index, element) => element.shadowRoot !== null)
  .each(($div) => {
    // 访问当前div的Shadow DOM，查找目标文本元素
    cy.wrap($div).shadow().find('div.items span')
      .contains('7')
      .then(() => {
        // 找到目标后执行点击
        cy.wrap($div).shadow().find('div.items span:contains("7")').click();
        return false; // 停止遍历，避免无效检查
      });
  });

更简洁的写法（自定义命令） #

如果需要重复使用筛选带Shadow DOM元素的逻辑，可以注册一个自定义命令：

// 在cypress/support/commands.js中添加
Cypress.Commands.add('hasShadowDom', { prevSubject: 'element' }, (subject) => {
  return subject.filter((index, el) => el.shadowRoot !== null);
});

之后就能用更简洁的代码实现需求：

cy.get('div')
  .hasShadowDom()
  .contains({ includeShadowDom: true }, '7')
  .click();

关键说明 #

• 先过滤带Shadow Root的div是核心，能大幅缩小定位范围，避免误匹配普通div。
• 使用.shadow()命令才能访问Shadow DOM内部的元素，确保能查到目标文本。
• 找到目标后终止遍历，提升执行效率。

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