Cypress 与 Shadow dom 按钮交互

Question

HTML 屏幕截图

我无法使用我尝试过添加和不添加"includeShadowDom": true到 cypress.json 的 cypress 与影子 dom 按钮进行交互。

我尝试了下面代码的各种排列，但它始终无法找到该元素。

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

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

Answer 1

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

根据这个答案How to get element in user-agentshadow root with JavaScript，你无法使用javascript获取这种类型的shadow DOM。

您无法访问浏览器创建的 Shadow DOM 来显示控件，该控件在开发工具中称为#shadow-root（用户代理） 。<input>就是一个例子。

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

尝试点击输入

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