Нужна помощь, чтобы щелкнуть по элементу под тенью Корневой (закрытый) тип

Исключение нулевого указателя при щелчке по элементу, расположенному внутри теневого корня (закрыто)

Пытался справиться с этим с помощью Java Script:

public WebElement getShadowRootElement(WebElement element) {
    return (WebElement)
            ((JavascriptExecutor)
                    driver).executeScript("return 
arguments[0].shadowRoot", element);
}

введите здесь описание изображения

Результат:

Cannot read property 'shadowRoot' of null

Добавлены скриншоты: 1.  введите описание изображения здесь

введите здесь описание изображения


person Y_Sh    schedule 07.06.2019    source источник
comment
Какая у тебя стихия? Это тег use?   -  person supputuri    schedule 07.06.2019
comment
@supputuri элемент - это кнопка, которая находится над корнем. Но когда я нажимаю на эту кнопку, он снова возвращает NPE. Вот почему я решил копать диппер в svg / path   -  person Y_Sh    schedule 07.06.2019
comment
shadow-root не прикреплен к кнопке. Таким образом, вы должны использовать xpath //button//use[@lightning-primitiveIcon_primitiveIcon] в качестве shadowHost, как указано в my ответ   -  person supputuri    schedule 07.06.2019
comment
Также проверьте, находится ли button под теневым корнем.   -  person supputuri    schedule 07.06.2019
comment
как вы можете видеть, кнопка находится под теневым корнем. По логике, браузер должен щелкнуть по нему, но с NPE это тоже не удалось. Так странно.   -  person Y_Sh    schedule 11.06.2019
comment
Проверьте мой комментарий и обновленный ответ (который поможет вам найти путь к теневому элементу).   -  person supputuri    schedule 11.06.2019
comment
Я понял, что не так с идентификатором элемента. Перед нажатием этой кнопки драйвер переключился на iframe, который не позволяет водителю найти веб-элемент кнопки закрытия. Теперь нужно понять, как выйти из этого кадра.   -  person Y_Sh    schedule 13.06.2019
comment
Просто переключитесь в окно по умолчанию.   -  person supputuri    schedule 13.06.2019


Ответы (3)


Если ваш вариант использования заключается в взаимодействии с элементом <path>, который находится внутри тега <svg>, он действительно находится внутри #shadow-root (closed).

@hayatoito (создатель Shadow DOM) в этом комментарии четко упоминает:

Первоначальная мотивация введения закрытого теневого дерева - "Never allow an access to a node in a closed shadow tree, via any APIs, from outside", AFAIK. Таким образом, мы не можем получить доступ к узлу во внутреннем дереве скрытых теней, которое используется в элементе <video> в Blink.

Фактически, таким образом я спроектировал закрытое теневое дерево. Если есть способ получить доступ к узлу в закрытом теневом дереве, это следует рассматривать как ошибку спецификации.

Я думаю, что совершенно нормально иметь API, разрешающий доступ на уровне приложений или расширений Chrome. Однако для обычного веб-приложения я думаю, что текущее соглашение - "Never allow it".

Если мы это разрешили, значит, нам не нужно закрытое теневое дерево. Думаю, достаточно иметь открытое теневое дерево.


Перспектива WebDriver

Недавно @AutomatedTester [Дэвид Бернс, главный специалист по Бэкону, Mozilla Corporation] инициировал обсуждение WebDriver - Testability веб-компонентов

В настоящее время Selenium Team открыта для приема запросов на вытягивание.


Outro

Здесь вы можете найти соответствующее обсуждение Как автоматизировать тень Элементы DOM, использующие селен?

person DebanjanB    schedule 07.06.2019

Вот решение.

WebElement closeElement = (WebElement) js.executeScript("return document.querySelector('button[title='Close Order Status'] svg use').shadowRoot.querySelector('svg path')");
closeElement.click();     

Быстрый способ найти путь

Просто предоставьте снимок экрана, который даст представление, как найти путь. (К вашему сведению, этот снимок экрана предназначен для кнопки очистки данных в истории очистки Chrome)  введите описание изображения здесь

person supputuri    schedule 07.06.2019
comment
Можете ли вы сейчас щелкнуть элемент пути? - person supputuri; 08.06.2019
comment
Спасибо, попробовал, но кнопка xpath: // [@ title = 'Close Order Status'] // использование с // идентификатором использования НЕ могла быть обнаружена через консоль ни через selenium: org.openqa.selenium.NoSuchElementException: нет такого element: невозможно найти элемент: {method: xpath, selector: // button [@ title = 'Close Order Status'] // use} - person Y_Sh; 11.06.2019
comment
Не могли бы вы поделиться снимком экрана базы Dev Tools > Element tab, где вы видите путь css. Как показано в разделе Quick Way to find path в моем обновленном ответе. - person supputuri; 11.06.2019
comment
Добавил несколько скриншотов. Пожалуйста, смотрите основное описание. - person Y_Sh; 12.06.2019
comment
Проверьте обновленный ответ. button[title='Close Order Status'] svg use - правильный элемент теневого хоста, теперь он должен работать. - person supputuri; 12.06.2019
comment
нет, он не нашел ни одного элемента или вывода из DevTools- ›Elements. Я изменил xpath на // button [@ title = 'Close Order Status'] / lightning-primitive-icon // * [@ data-key] // * и, наконец, он доступен для поиска в DevTools, но веб-драйвер по-прежнему не может найти этот элемент. - person Y_Sh; 12.06.2019
comment
org.openqa.selenium.InvalidSelectorException: недопустимый селектор: Невозможно найти элемент с помощью кнопки выражения xpath [title = 'Close Order Status'] svg использует из-за следующей ошибки: SyntaxError: Не удалось выполнить 'оценивать' в 'Документе' : Строка 'button [title =' Close Order Status '] svg use' не является допустимым выражением XPath. - person Y_Sh; 12.06.2019
comment
button[title='Close Order Status'] svg use - это css, а не xpath. - person supputuri; 12.06.2019
comment
Да я получил его. Еще НПЕ. Проблема с кнопкой «Close Order Status» в том, что ее элемент вообще не может быть обнаружен. Пытался получить размер, местоположение, но всегда возвращал: элемент не найден. - person Y_Sh; 12.06.2019
comment
хорошо, можешь попробовать этот xpath //button[@title='Close Order Status']//*[local-name()='use']. Проверьте, возвращает ли это элемент use, это должен быть отдельный шаг, но в предоставленном мною javascript. - person supputuri; 12.06.2019
comment
Сообщите мне, если это вернет элемент use, тогда я могу обновить ответ, чтобы использовать элемент use в javascript. - person supputuri; 12.06.2019
comment
вышеуказанный js с return document.querySelector? - person Y_Sh; 13.06.2019
comment
document.querySelector('button[title='Close Order Status'] svg use') запустите это в своей консоли Chrome и посмотрите, получите ли вы элемент use. - person supputuri; 13.06.2019
comment
NPE при нажатии на веб-элемент возврата: - person Y_Sh; 13.06.2019
comment
Извините, вы можете проверить это в консоли браузера. Не в твоем сценарии - person supputuri; 13.06.2019
comment
Я могу найти путь в консоли (инструменты разработчика), но драйвер НЕ может найти этот элемент и всегда возвращает NPE: элемент не найден. Это проблема. Все варианты перепробовал: xpath, css. Тот же результат. - person Y_Sh; 13.06.2019

Вы можете использовать javascript примерно так.

WebElement clearData = (WebElement) js.executeScript("return document.querySelector('button[title='Close Order Status'] svg use').shadowRoot.querySelector('svg path')");

Проверьте Как найти # shadow- корневые (открытые) элементы через ссылку cssSelector для получения дополнительной информации.

person userFollow    schedule 07.06.2019
comment
проверьте обновленный ответ, обновленный javascript с тегом на основе вашего снимка экрана. - person userFollow; 07.06.2019
comment
это работает только для (открытого) shadowRoot, но у меня (закрыто) - person Y_Sh; 07.06.2019
comment
@userFollow Обновил ваш ответ по ошибке. Однако это был бы правильный ответ. - person supputuri; 12.06.2019