如何使用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 搜索

包括ShadowDom

是否遍历shadow DOM边界并在查询命令的结果中包含shadow DOM内的元素（例如cy.get()）

cypress.json

{
  ...
  includeShadowDom: true
}

Answer 2

对于嵌套的 Shadow dom 元素，您需要首先获取 Shadow 元素，然后对其调用

find

方法：

 cy.get('parent')
     .shadow()
     .find('child')
     .shadow()
     .find('grandchild')
     .should('exist');