Cypress 与 shadow dom 按钮交互答案

【问题标题】：Cypress interacting with shadow dom buttonCypress 与 shadow dom 按钮交互
【发布时间】：2021-11-11 14:46:17
【问题描述】：

HTML 屏幕截图

我无法使用 cypress 与 shadow dom 按钮交互我尝试过在 cypress.json 中添加和不添加 "includeShadowDom": true。

我尝试了以下代码的各种排列，但它一直无法找到元素。

仅将.shadow() 与父级一起使用会显示一个错误，指出找不到影子 dom。

cy.get('#r-searchField').shadow().find('#text-field-container').find('#search-clear').click()

【问题讨论】：

你用cy.get('#r-searchField').shadow().find('#search-clear').click({force: true})怎么样？
不幸的是，这不起作用。 “在 15000 毫秒后重试超时：预计主题会托管影子根，但从未找到。”

【解决方案1】：

你有#shadow-root (user-agent)，这意味着浏览器正在创建shadow DOM。

根据这个答案How to get element in user-agent shadow root with JavaScript，您无法使用 javascript 访问这种类型的影子 DOM。

您无法访问由浏览器创建的 Shadow DOM 来显示控件，该控件在开发工具中称为 #shadow-root (user-agent)。 <input> 就是一个例子。

您只能使用 { mode: 'open' } 选项访问打开的自定义 Shadow DOM（您自己创建的）。

尝试点击输入

cy.get('input#r-searchField').click()

【讨论】：