Cypress开启includeShadowDom后获取嵌套Shadow元素文本异常问题

问题根因 #

开启includeShadowDom: true配置后原有写法失效，核心是两个选择器逻辑错误：

• 首次单find写法失败：跳过了中间层自定义Shadow宿主元素（app-toolbar-root、app-csr-content、csr-multi-record），选择器层级和实际DOM结构不匹配，无法命中目标节点。
• 两次find写法返回拼接文本：.csr-content_primary:nth-child(1)的选择器逻辑是匹配所有作为父级第一个子元素的.csr-content_primary节点，会命中页面里10余个同位置的同类元素，后续查询span时会自动拼接所有匹配元素的文本内容。

问题1：是否可以正确获取.csr-content_primary:nth-child(1)下的目标文本？ #

完全可以，只需要在匹配到.csr-content_primary集合后，明确限定取第一个元素即可，代码如下：

cy.get('app-screen')
  .find('.csr-content_primary:nth-child(1)')
  .eq(0) // 锁定匹配集合中的第一个元素，缩小查询范围
  .find('.stud-container .stud-rec .stud__title span')
  .should('have.text', 'Viola');

.eq(0)会把后续查询的范围限定在第一个.csr-content_primary节点内，不会遍历其他同类节点，最终只会返回目标span的文本Viola。

问题2：如何通过单次find方法完成定位，无需拆分两次find调用？ #

单次find的核心是补全选择器中缺失的DOM层级，同时用:first伪类锁定第一个匹配节点，不需要拆分链式调用，开启includeShadowDom: true时可直接运行：

cy.get('app-screen')
  .find('app-toolbar-root .app-container #csrContent app-csr-content .csr-content .csr-content-main .csr-content_primary:first csr-multi-record .stud-container .stud-rec .stud__title span')
  .should('have.text', 'Viola');

写法说明： #

• 补全了所有中间层的Shadow宿主元素，选择器层级和实际渲染的DOM结构完全对齐，自动穿透Shadow DOM时不会出现层级匹配失败的问题
• 用:first替代:nth-child(1)做范围限定：:nth-child(1)会命中所有父容器下排在第一位的.csr-content_primary，:first只会取全局查询结果中的第一个目标节点，直接锁定对应内容。

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