Блог

Главная - Вопросы по программированию - Webdriverio: Доступ к теневым элементам dom

Webdriverio: Доступ к теневым элементам dom

#javascript #ui-automation #webdriver-io #shadow-dom

#javascript #пользовательский интерфейс-автоматизация #webdriver-ввод-вывод #shadow-dom #webdriver-io

Вопрос:

 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.

Есть ли какой-либо другой способ доступа к элементам shadow dom через webdriver?

Ответ №1:

Документация, похоже, в порядке, можете ли вы показать, как именно вы используете shadow $ method?

Я верю, что это просто

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

должно работать

Комментарии:

1. Я попробовал это, но он выдает следующую ошибку: Ошибка: селектор функций «функция() { // элемент имеет свойство shadowRoot, если (this.shadowRoot) { возвращает this.shadowRoot . querySelector(‘mini-app’) } // вернитесь к прямому запросу элемента, если не верните это. querySelector(‘mini-app’) }» не вернул HTMLЭлемент

2. Вероятно, потому, что это вложенный теневой корень

3. Я упустил из виду, что это вложенный теневой DOM. Попробуйте: $(‘shell’).shadow$(‘.mini-app’).shadow $(‘#username’)

4. Когда я попробовал этот ответ $(...).shadow$ is not a function — что это значит?