Webdriverio：访问 shadow dom 元素答案

【问题标题】：Webdriverio: Accessing shadow dom elementsWebdriverio：访问 shadow dom 元素
【发布时间】：2021-01-04 00:51:14
【问题描述】：

I have an app structure like this: 
<shell>
#shadow-root (open)
<mini-app>
#shadow-root (open)
<input id="username" autocomplete="off" name="username" type="text" aria-required="true" required="" value="">
</mini-app>
<shell>
Nested tags with shadow-root element username inside it.I want to access input element username using webdriverio.

我可以使用以下方式访问 dev 中的用户名：

   let a = document.querySelector('shell')
    let b = a.shadowRoot.querySelector('mini-app')
    b.shadowRoot.getElementById('username')

  How can i access the same using webdriverio ? I went through this `https://webdriver.io/blog/2019/02/22/shadow-dom-support.html` but the documentation looks outdated because I am unable to use shadowRoot with shadow$
Any help would be appreciated.

还有其他方法可以通过 webdriver 访问 shadow dom 元素吗？

【问题讨论】：

标签： javascript ui-automation webdriver-io shadow-dom

【解决方案1】：

文档似乎很好，你能说明你是如何使用 shadow$ 方法的吗？

我相信很简单

$('shell').shadow$('.mini-app').shadow$('#username')

应该工作

【讨论】：

我试过了，但它抛出了以下错误：错误：函数选择器“function() { //元素有一个 shadowRoot 属性 if (this.shadowRoot) { return this.shadowRoot.querySelector('mini -app') } // 如果不返回则返回直接查询元素 this.querySelector('mini-app') }" 没有返回 HTMLElement
可能是因为它是一个嵌套的影子根
我忽略了这是嵌套的影子 DOM。试试：$('shell').shadow$('.mini-app').shadow$('#username')
当我尝试这个答案时$(...).shadow$ is not a function - 那是什么意思？