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

【问题标题】：How to check nested shadow elements using cypress.io如何使用 cypress.io 检查嵌套的阴影元素
【发布时间】：2021-07-13 09:13:32
【问题描述】：

如何定位嵌套阴影 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')
    }
   //...
   }

测试运行器出错：

【问题讨论】：

您遇到的错误是什么？
添加了错误截图。
您是否尝试将includeShadowDom: true 添加到cypress.json？这可能使您不必在每个级别添加.shadow()。
更新后现在可以使用，您可以将其添加到您的答案中吗？

标签： javascript automated-tests cypress shadow-dom

【解决方案1】：

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

包括ShadowDom

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

cypress.json

{
  ...
  includeShadowDom: true
}

【讨论】：

顶部有几个阴影根。，上面的解决方案不起作用，我也测试过。
是的，我注意到了。从来没有测试过这么多的影子根！会检查并修改。