Как автоматизировать теневые элементы DOM с помощью селена? - PullRequest
1 голос
/ 19 апреля 2019

Я использую проект Java Selenium для автоматизации веб-страниц.Веб-страница содержит много многоуровневых теневых корневых элементов DOM, с которыми я не могу взаимодействовать с помощью метода selenium findElement.

Я пробовал следующие решения:

  • глубокий CSS (не работает на последнем браузере Chrome)
  • JS Executor.(Это действительно утомительно и становится сложно поддерживать)решение.Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 15 мая 2019

Существует очень хороший плагин, который можно использовать с проектом Селен ссылка . Это помогает в написании гораздо лучшего, удобочитаемого и обслуживаемого кода. С его помощью вы можете получить доступ к многоуровневому теневому DOM (до 4 уровней). Это использует простой селектор CSS для идентификации элементов.

WebElement findElement(String cssSelector): используйте этот метод, если хотите отдельный элемент из DOM

List<WebElement> findElements(String cssSelector): используйте это, если хотите найти все элементы из DOM

WebElement findElements(WebElement parent, String cssSelector): используйте это, если вы хотите найти отдельные элементы из родительского объекта DOM

List<WebElement> findElements(WebElement parent, String cssSelector): используйте это, если вы хотите найти все элементы из родительского объекта DOM

WebElement getShadowElement(WebElement parent,String selector): используйте это, если вы хотите найти один элемент из родительского DOM

List<WebElement> getAllShadowElement(WebElement parent,String selector): используйте это, если хотите найти все элементы из родительского DOM

boolean isVisible(WebElement element): используйте это, если вы хотите найти видимость элемента

boolean isChecked(WebElement element): используйте это, если хотите проверить, установлен ли флажок

boolean isDisabled(WebElement element): используйте это, если хотите проверить, отключен ли элемент

String getAttribute(WebElement element,String attribute): используйте это, если вы хотите получить атрибут, подобный aria-selected и другим настраиваемым атрибутам элементов.

void selectCheckbox(String label): используйте для выбора элемента флажка с помощью метки.

void selectCheckbox(WebElement parentElement, String label): используйте для выбора элемента флажка с помощью метки.

void selectRadio(String label): используйте для выбора радиоэлемента с помощью метки.

void selectRadio(WebElement parentElement, String label): используйте это для выбора радиоэлемента из родительского DOM с помощью метки.

void selectDropdown(String label): используйте это, чтобы выбрать элемент раскрывающегося списка, используя метку (используйте это, если только один раскрывающийся список присутствует или загружен в пользовательский интерфейс).

void selectDropdown(WebElement parentElement, String label): используйте это, чтобы выбрать элемент раскрывающегося списка из родительского DOM, используя метку.

Как использовать этот плагин: Вам придётся зависеть в вашем проекте.

Maven

<dependency>
  <groupId>io.github.sukgu</groupId>
  <artifactId>automation</artifactId>
  <version>0.0.4</version>
<dependency>

для html-тега, который находится под теневым корневым элементом dom

<properties-page id="settingsPage"> 
  <textarea id="textarea">
</properties-page>

Вы можете использовать этот код в своей инфраструктуре для захвата элемента textarea Object.

  import io.github.sukgu.*;
  Shadow shadow = new Shadow(driver);
  WebElement element = shadow.findElement("properties-page#settingsPage>textarea#textarea");
  String text = element.getText();
1 голос
/ 19 апреля 2019

Для демонстрации автоматизации из теневого DOM с использованием Selenium v3.x , ChromeDriver v2.46 и Chrome v73.x вот несколько подходов, которые открывают URL chrome://downloads/ и, используя метод executeScript(), отправляют последовательность символов pdf как поиск текста в поле поиска .


Использование document.querySelector()

В качестве канонического подхода вы можете использовать метод document.querySelector() следующим образом:

  • Кодовый блок:

    import org.openqa.selenium.JavascriptExecutor;
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.WebElement;
    import org.openqa.selenium.chrome.ChromeDriver;
    import org.openqa.selenium.chrome.ChromeOptions;
    
    public class shadow_DOM_search_download_querySelector {
    
        public static void main(String[] args)
        {
            System.setProperty("webdriver.chrome.driver", "C:\\Utility\\BrowserDrivers\\chromedriver.exe");
            ChromeOptions options = new ChromeOptions();
            options.addArguments("start-maximized");
            options.addArguments("disable-infobars");
            options.addArguments("--disable-extensions"); 
            WebDriver driver = new ChromeDriver(options);
            driver.get("chrome://downloads/");
            JavascriptExecutor jse = (JavascriptExecutor) driver; 
            WebElement search_box = (WebElement) jse.executeScript("return document.querySelector('downloads-manager').shadowRoot.querySelector('downloads-toolbar#toolbar').shadowRoot.querySelector('cr-toolbar#toolbar').shadowRoot.querySelector('cr-toolbar-search-field#search').shadowRoot.querySelector('div#searchTerm input#searchInput')");
            String js = "arguments[0].setAttribute('value','pdf')";
            ((JavascriptExecutor) driver).executeScript(js, search_box);
        }
    }
    

Это же решение можно переписать поэтапно следующим образом:

  • Кодовый блок:

    import org.openqa.selenium.By;
    import org.openqa.selenium.JavascriptExecutor;
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.WebElement;
    import org.openqa.selenium.chrome.ChromeDriver;
    import org.openqa.selenium.chrome.ChromeOptions;
    
    public class shadow_DOM {
    
        static WebDriver driver;
        public static void main(String[] args) 
        {   
            System.setProperty("webdriver.chrome.driver", "C:\\Utility\\BrowserDrivers\\chromedriver.exe");
            ChromeOptions options = new ChromeOptions();
            options.addArguments("start-maximized");
            //options.addArguments("disable-infobars");
            options.addArguments("--disable-extensions"); 
            driver = new ChromeDriver(options);
            driver.get("chrome://downloads/");
            WebElement root1 = driver.findElement(By.tagName("downloads-manager"));
            WebElement shadow_root1 = expand_shadow_element(root1);
    
            WebElement root2 = shadow_root1.findElement(By.cssSelector("downloads-toolbar#toolbar"));
            WebElement shadow_root2 = expand_shadow_element(root2);
    
            WebElement root3 = shadow_root2.findElement(By.cssSelector("cr-toolbar#toolbar"));
            WebElement shadow_root3 = expand_shadow_element(root3);
    
            WebElement root4 = shadow_root3.findElement(By.cssSelector("cr-toolbar-search-field#search"));
            WebElement shadow_root4 = expand_shadow_element(root4);
    
            WebElement search_term = shadow_root4.findElement(By.cssSelector("div#searchTerm input#searchInput"));
            String js = "arguments[0].setAttribute('value','pdf')";
            ((JavascriptExecutor) driver).executeScript(js, search_term);
    
            WebElement search_button = shadow_root4.findElement(By.cssSelector("paper-icon-button#icon"));
            search_button.click();
    
            System.out.println("Search Button Clicked");
        }
    
        public static WebElement expand_shadow_element(WebElement element)
        {
            WebElement shadow_root = (WebElement)((JavascriptExecutor)driver).executeScript("return arguments[0].shadowRoot", element);
            return shadow_root;
        }
    
    }
    

  • Консольный выход:

    Search Button Clicked
    

  • Снимок браузера:

shadowDOM


Outro

Согласно обсуждению в Определите судьбу экспериментального комбинатора '>>>' >>>*Комбинатор 1076 *, который был заменой комбинатора /deep/ для прокалывания всех теневых границ DOM к стилю, который был реализован за флагом в Blink, устарел.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...