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

Question

如何定位位于嵌套影子 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 中全局启用 shadow DOM 搜索（cypress.json)

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
}

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

How to check nested shadow elements using cypress.io

javascript

automated-tests

shadow-dom

cypress