Cypress v9.6.1嵌套Shadow DOM元素定位与条件判断报错问题

报错核心原因：.shadow()是Cypress专属的链式命令，仅对Cypress内部封装的命令上下文对象生效；.then()回调中拿到的$ce是jQuery包装的DOM元素集合，jQuery本身未实现.shadow()方法，直接调用必然触发「方法不存在」的错误。
另外你贴的示例代码存在中文全角引号、id选择器引号嵌套错误，也会额外导致选择器解析失败，调试时需要先修正为英文半角引号。

方案1：全程用Cypress命令链做判断（推荐，适配v9.6.1版本） #

不要中途取出jQuery对象混合调用Cypress命令，直接把多层Shadow DOM穿透逻辑放在Cypress命令链中，到最终目标元素层再取出jQuery对象判断长度即可。
注意Cypress默认找不到元素会重试到超时后报错中断，需要给最终查找逻辑加timeout: 0关闭长等待，避免流程卡住：

cy.get('custom-element-1')
  .shadow()
  .find('custom-element-2')
  .shadow()
  .find('custom-element-3')
  .shadow()
  .find('custom-element-4[id="ce4"]')
  .shadow()
  .find('input', { timeout: 0, failOnError: false })
  .then(($targetInput) => {
    // 元素不存在时点击button-a
    if ($targetInput.length === 0) {
      cy.get('button-a').click()
    }
    // 元素存在时不做操作，直接走后续测试流程
  })

方案2：开启全局Shadow DOM穿透简化写法 #

Cypress v9.6.1已经支持includeShadowDom全局配置，开启后所有cy.get()/.find()命令会自动穿透任意层级的Shadow DOM，不需要手动逐层调用.shadow()，配置方式是在项目根目录的cypress.json中添加：

{
  "includeShadowDom": true
}

配置完成后，判断逻辑可以简化为：

cy.get('custom-element-4[id="ce4"] input', { timeout: 0, failOnError: false })
  .then(($targetInput) => {
    if ($targetInput.length === 0) {
      cy.get('button-a').click()
    }
  })

方案3：原生DOM逐层穿透（无Cypress命令依赖） #

如果不想修改全局配置，可以在回调中用原生DOM标准的.shadowRoot属性逐层访问影子根，完全绕开Cypress命令和jQuery对象的兼容问题：

cy.document().then((doc) => {
  // 逐层穿透Shadow DOM，某一层不存在直接判定目标元素不存在
  const ce1 = doc.querySelector('custom-element-1')
  if (!ce1?.shadowRoot) return cy.get('button-a').click()

  const ce2 = ce1.shadowRoot.querySelector('custom-element-2')
  if (!ce2?.shadowRoot) return cy.get('button-a').click()

  const ce3 = ce2.shadowRoot.querySelector('custom-element-3')
  if (!ce3?.shadowRoot) return cy.get('button-a').click()

  const ce4 = ce3.shadowRoot.querySelector('custom-element-4[id="ce4"]')
  if (!ce4?.shadowRoot) return cy.get('button-a').click()

  const targetInput = ce4.shadowRoot.querySelector('input')
  if (!targetInput) {
    cy.get('button-a').click()
  }
})

• 禁止在jQuery包装的DOM对象上调用Cypress专属命令，.shadow()只能在Cypress命令链中使用；如果已经拿到jQuery/原生DOM节点，要访问影子根请用原生的.shadowRoot属性
• 所有元素存在性的条件测试，都必须给查找命令设置timeout: 0，否则Cypress会默认重试4秒直到超时抛错，无法走到后续的分支判断逻辑
• 选择器中所有引号必须使用英文半角格式，避免出现引号嵌套错误导致选择器失效

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