В процессе поиска локаторов вы можете столкнуться с такой проблемой, как ShadowRoot. Возможно, вы уже научились находить локаторы и взаимодействовать с ними, но эта аббревиатура может вызвать у вас затруднения. Давайте разберемся, что такое ShadowRoot и как с ним работать!
Shadow DOM
Shadow DOM применяется для инкапсуляции. Он позволяет компонентам иметь своё «теневое» DOM-дерево, изолированное от основного документа, с собственными CSS-правилами и т. д.
Браузер самостоятельно создаёт и отображает такие элементы. Обычно их DOM-структуру нельзя увидеть, но в инструментах разработчика она доступна для просмотра.
В Chrome, например, нужно активировать пункт «Show user agent shadow DOM».
Чтобы увидеть Shadow DOM, перейдите на нужный сайт, нажмите F12, затем перейдите в настройки и выберите отображение Shadow DOM.
Сейчас мы видим нужный элемент, но не можем получить к нему доступ. Что же делать?
С помощью обычного JavaScript или селекторов нельзя получить доступ к Shadow DOM встроенных элементов. Shadow DOM — это не просто обычные потомки, а мощное средство инкапсуляции.
Как взять значение под ShadowRoot.
Давайте представим ситуацию, когда нам нужно извлечь определённое значение в рамках автоматического тестирования. Например, возьмём какое-то значение и выведем его в консоль.
У нас есть поле с заполнением данных. Получим значение из него.
В Doom это выглядит так:
Из статьи мы уже умеем искать локаторы. Так что давайте напишем его.
И мы спокойно находим нужный нам элемент:
Но если мы напишем, стандартный код для определения элемента в переменную, то консоль нам ничего не выдаст.
String Surname = driver.findElement(By.xpath("//input[@placeholder='Фамилия']")).getText();
System.out.println(Surname);
Исправить это поможет JavascriptExecutor.
Всё что нужно это прописать следующий код (Оформим сразу в метод):
@Step("Ввод текста под Shadow root")
public static void inputWord(WebElement element, String word) {
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].value='" + word + "'", element);
element.sendKeys(Keys.BACK_SPACE);
}
Мы просто создаём экземпляр JavascriptExecutor и прописываем на языке JavaScript нужный код.
Важно отметить, что локатор мы прописываем элемента, в котором находится ShadowRoot. Если напишите локатор самого ShadowRoot, то ничего не выйдет, система попросту не найдёт его.
И в итоге получаем
inputWord(driver.findElement(By.xpath(
"//input[@placeholder='Ctrl+K for advanced search']")), "Тест ");
Записать значение в элемент под ShadowRoot.
Процесс записи значения очень похож на процесс его извлечения, но вместо того, чтобы просто прочитать существующее значение, мы указываем новое значение, которое хотим записать.
Однако стоит учесть, что в зависимости от специфики вашего проекта, некоторые методы могут оказаться неподходящими. Поэтому мы предлагаем вам несколько различных подходов, чтобы вы могли выбрать наиболее подходящий для вашей конкретной ситуации.
1 вариант, с помощью sendKeys
Используем вариант с sendKeys
Далее мы определяем в WebElement наш локатор, куда будем записывать значение. И также определяем в WebElement наш метод.
После используем стандартный способ записи значения в локатор:
2 вариант, с помощью JavaScript
Этим вариантом пользуюсь сам. Как говорил выше, некоторые способы могут не подойти. В моём случае при запуске 1 варианта, происходит запись нужного параметра, но он тут же стирается. Поэтому применяю следующий способ.
@Step("Ввод текста под Shadow root")
public static void inputWord(WebElement element, String word) {
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("arguments[0].value='" + word + "'", element);
element.sendKeys(Keys.BACK_SPACE);
}
Я реализовал метод, который заключается в том, что в нужном локаторе мы вписываем слово, но на один символ длиннее, а затем удаляем последний символ. Удивительно, но это сработало! Текст перестал исчезать, и запись успешно выполнилась!
3 вариант, также с помощью JavaScript
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("document.querySelector('input[@placeholder='Фамилия']').shadowRoot.querySelector('#placeholder').value=Иванов");
Всё также используем JavaScript и записываем нужное значение.
Как взять значение из ShadowRoot
Используем сразу в методе
@Step("Возвращает значение из Shadow root")
public static String getShadow (WebElement element) {
JavascriptExecutor js = (JavascriptExecutor) driver;
String shadow = (String) js.executeScript("return arguments[0].value", element);
return shadow;
}
Использование
getShadow(By.xpath(
"//input[@placeholder='Ctrl+K for advanced search']"));
После этой статьи у вас не должно возникнуть вопросов, как же взаимодействовать с ShadowRoot
Если у вас есть вопросы или вы просто хотите стать частью команды тестировщиков, то переходи в ТГ канал, где можем пообщаться с единомышленниками и найти много интересных и полезных знаний!Также если вам нужна индивидуальная консультация, менторство и помощь в создании проекта пишите в ТГ канал!