Cypress操作Shadow Dom按钮失败，配置includeShadowDom仍无法定位元素

问题关联截图 #

排查与解决步骤 #

• 确认Shadow宿主定位正确
  调用.shadow()报错的核心原因是#r-searchField并非Shadow DOM的挂载宿主，先执行以下代码验证该元素是否绑定Shadow根：

cy.get('#r-searchField').then($el => {
  // 打开Cypress运行窗口的控制台查看输出结果
  console.log('是否存在Shadow根：', !!$el[0].shadowRoot)
})

如果输出为false，向上层DOM查找真正挂载Shadow DOM的宿主元素，再对该元素调用.shadow()方法。

• 适配对应版本的Cypress配置
  Cypress v10及以上版本已废弃cypress.json配置文件，需将配置写入cypress.config.js/cypress.config.ts，全局开启Shadow DOM穿透的示例配置如下：

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

module.exports = defineConfig({
  includeShadowDom: true,
  e2e: {
    // 其他e2e测试配置
  }
})

配置生效后无需手动调用.shadow()，可直接定位Shadow内部元素：

cy.get('#text-field-container').find('#search-clear').click()

• 处理动态渲染与多层Shadow嵌套
  如果Shadow DOM为页面加载后动态生成，给选择器添加超时参数等待渲染完成：

// 替换为实际的Shadow宿主选择器
cy.get('实际Shadow宿主选择器', {timeout: 10000})
  .shadow()
  .find('#text-field-container')
  .find('#search-clear')
  .click()

如果存在多层Shadow DOM嵌套，需要对每一层的Shadow宿主单独调用.shadow()方法后再向下查找子元素。

• 特殊场景处理
  若目标组件使用closed模式的Shadow DOM，原生JavaScript无法获取Shadow根实例，Cypress也无法直接操作，需协调开发将Shadow DOM调整为open模式后再进行测试。

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