如何解决如何使用 cypress.io 检查嵌套的阴影元素
如何定位位于嵌套 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')
}
//...
}
解决方法
嵌套的 shadow-root 使得很难确定应该添加 .shadow()
命令的位置,但您可以在 config (cypress.json) 中全局启用 shadow DOM 搜索
includeShadowDom
是否遍历 shadow DOM 边界并在查询命令的结果中包含 shadow DOM 内的元素(例如 cy.get())
cypress.json
{
...
includeShadowDom: true
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。