Cypress测试执行触发RangeError 最大调用栈溢出问题求助

这个RangeError: Maximum call stack size exceeded报错是Cypress旧版本处理Shadow DOM时的已知缺陷，报错栈里的collectRoots是Cypress遍历DOM收集所有Shadow Root的递归方法，当页面存在嵌套层级较深、或者存在引用循环的自定义Web Component时，递归逻辑就会触发栈溢出，刚好在查询data-cy="personalAttributes-language"对应的pd-combobox组件时触发了异常。

另外你的测试用例里也存在Shadow DOM查询的写法错误：你调用了cy.get('pd-table.hydrated').shadow()获取Shadow Root，但后续的元素查询没有链式调用.find()，而是直接用全局cy.get()，会导致Cypress每次查询都要全量遍历整个页面的所有Shadow Root，大幅提升了栈溢出的触发概率。

• 优先升级Cypress到12.0及以上的稳定版本，该版本已经修复了大部分Shadow DOM遍历的递归爆栈问题。
• 修正Shadow DOM的查询写法，所有Shadow Root内部的元素都通过链式调用.find()查询，避免全局遍历：

// 先给上层Shadow Root起别名复用
cy.get('pd-table.hydrated').shadow().as('pageShadow')

// 后续查询都从别名的Shadow Root开始查找
cy.get('@pageShadow')
  .find('.pd-table-horizontal-scroll .pd-table-row').first().click()

• 调整pd-combobox组件的操作逻辑，先确认组件加载完成，再操作其内部Shadow DOM的可点击元素，同时注意多数组件库的下拉选项会挂载到全局body而非当前组件内部，不要用within()包裹查询：

// 先确认combobox组件已完成hydration
cy.get('[data-cy="personalAttributes-language"].hydrated')
  .should('be.visible')
  .shadow()
  // 点击组件内部实际可交互的输入框/触发按钮，替换为你组件内部触发下拉的实际选择器
  .find('.combobox-trigger') 
  .click({force: true})

// 直接全局查询可见的下拉选项
cy.get('pd-dropdown-item.hydrated:visible').eq(3).click({force: true})

• 如果还是触发问题，可以临时在cypress.config.js中关闭Shadow DOM自动探测，手动处理所有Shadow Root查询：

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    experimentalShadowDomSupport: false
  }
})

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