如何在 Cypress 中精确定位 Shadow DOM 内含特定文本的元素

本文详解如何在 Cypress 中遍历多个含 Shadow DOM 的元素，并准确筛选出其内部包含指定文本（如 "7"）的目标元素，避免因重复定位或作用域错误导致的查找失败。

本文详解如何在 cypress 中遍历多个含 shadow dom 的元素，并准确筛选出其内部包含指定文本（如 `"7"`）的目标元素，避免因重复定位或作用域错误导致的查找失败。

在 Cypress 中操作 Shadow DOM 时，一个常见误区是过度嵌套选择器层级——例如先用 cy.get("div") 获取所有 <div>，再对其调用 .find() 并期望自动穿透全部 Shadow Root。但 cy.get("div") 默认只返回 Light DOM 中的 <div>，而你的目标元素实际位于自定义元素（如 <cy-test-element>）的 Shadow Root 内，此时原始 div 并不“拥有”该 Shadow DOM，导致 .find() 无法正确作用于预期上下文。

✅ 正确做法是：直接定位承载 Shadow DOM 的宿主元素（host element），再在其作用域内使用 { includeShadowDom: true } 精准查找深层内容。

以下为推荐实现方案：

// ✅ 推荐：先获取宿主元素（如 cy-test-element），再在其 Shadow DOM 中查找cy.get('cy-test-element')  .find('span:contains("7")', { includeShadowDom: true })  .click();

该写法确保：

• cy.get('cy-test-element') 返回所有自定义宿主元素（每个都带独立 Shadow Root）；
• .find() 在每个宿主元素的 Shadow DOM 上下文中执行（得益于 includeShadowDom: true）；
• :contains("7") 仅匹配其 Shadow DOM 内真实渲染的文本节点，天然完成“五选一”的过滤。

⚠️ 注意事项：

• 不要使用 cy.get("div").find(...) —— 普通 <div> 通常不挂载 Shadow DOM，此链式调用会丢失 Shadow 上下文；
• 若宿主元素无统一标签名（如混用 <my-card>、<ui-panel>），可用属性选择器增强定位：cy.get('[data-role="shadow-host"]')；
• :contains() 是 jQuery 扩展伪类，在 Cypress 12+ 中默认可用；若需更健壮匹配（如忽略空格/换行），建议结合 .invoke('text') 链式断言：

  cy.get('cy-test-element')  .find('span', { includeShadowDom: true })  .filter((el) => el.innerText.trim() === '7')  .click();

? 总结：Shadow DOM 查找的关键在于「从宿主出发，而非从父容器出发」。始终让 cy.get() 锚定到明确声明了 attachShadow() 的自定义元素或启用了 Shadow DOM 的原生组件，再通过 { includeShadowDom: true } 向下穿透，即可稳定、高效地完成多实例中的条件筛选与交互。