Cypress如何定位嵌套多层shadow-root内的DOM元素

你之前用的.shadow()命令本身就支持链式调用，完全可以处理多层嵌套的shadow DOM场景，不需要额外依赖第三方工具。

基础链式调用写法 #

顺着每一层shadow-root的宿主元素，每进入一层影子DOM就调用一次.shadow()即可。
比如你的DOM结构是如下嵌套结构：

<!-- 页面常规Light DOM层 -->
<outer-custom-element>
  <!-- 第一层shadow-root -->
  #shadow-root (open)
    <inner-custom-element>
      <!-- 第二层嵌套shadow-root -->
      #shadow-root (open)
        <button class="target-button">需要定位的目标元素</button>
    </inner-custom-element>
</outer-custom-element>

对应定位代码直接链式编写：

cy.get('outer-custom-element')
  .shadow() // 进入第一层shadow-root
  .find('inner-custom-element')
  .shadow() // 进入嵌套的第二层shadow-root
  .find('.target-button') // 命中目标元素
  .should('be.visible')

注意这里进入上一层shadow-root后，找下一层宿主元素推荐用.find()而不是继续用.get()，避免全局查找脱离当前shadow DOM的上下文。

简化写法（多层嵌套推荐） #

如果你的项目里shadow DOM嵌套很多，每次手动加.shadow()太繁琐，可以直接修改Cypress全局配置，开启自动穿透shadow DOM的能力：

• 打开项目根目录下的cypress.config.js/cypress.config.ts配置文件
• 在对应测试类型的配置块中添加includeShadowDom: true配置项

配置参考：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    includeShadowDom: true, // 全局开启shadow DOM自动穿透
    // 其余原有配置...
  },
});

开启该配置后，无论shadow-root嵌套多少层，直接使用cy.get('.target-button')就可以自动穿透所有shadow边界定位到目标元素，不需要手动逐层调用.shadow()。

注意事项 #

以上所有方法仅对mode: open模式的shadow-root生效。如果是mode: closed模式的关闭态shadow-root，浏览器本身会禁止外部JS访问内部DOM，Cypress也没有通用的定位方案，这种场景需要协调前端开发将对应shadow-root调整为open模式，或者通过组件实例暴露的shadow根引用做特殊处理。

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