javascript - 如何使用 cypress.io 检查嵌套的阴影元素

Question

如何定位位于嵌套 shadow DOM 内的搜索框？

到目前为止，我已经尝试了几种不同的方法来定位，下面是其中之一，但没有奏效:
定位器:

//Shadow roots
const SDW_MAINAPP_G1 = "main-app"
const SDW_VOYAGETOPBAR_G2A = "voyage-topbar"
const SDW_VOYAGEPANEL_G2B = "voyage-float-panel"
const SDW_VESSELLIST_G3B = "voyage-vessel-list"
const SDW_VOYAGEFILTER_G4B1 = "voyage-filter"
const SDW_LISTSORT_G4B2 = "voyage-vessel-list-sort"

//Left Panel - Search Box
const INP_SEARCH_VESSEL = "#filter"

实际代码:

class SearchComponents {
    static validateSearchBar() {
         cy.get(SDW_MAINAPP_G1)
        .shadow()
        .find(SDW_VOYAGEPANEL_G2B)
        .find(SDW_VESSELLIST_G3B)
        .find(SDW_VOYAGEFILTER_G4B1)
        .find(INP_SEARCH_VESSEL)
        .should('be.visible')
        .should('be.enabled')
    }
   //...
   }

测试运行器中的错误:

Answer 1

嵌套的 shadow-root 使得很难确定应该添加 .shadow() 命令的位置，但是您可以在 config (cypress.json) 中全局启用 shadow DOM 搜索

includeShadowDom

Whether to traverse shadow DOM boundaries and include elements within the shadow DOM in the results of query commands (e.g. cy.get())

cypress.json

{
  ...
  includeShadowDom: true
}