javascriptjavaseleniumpolymershadow-dom

How to automate shadow DOM elements using selenium?


I am using Java Selenium project for web page automation. The web page contains lots of multi-level shadow-root DOM elements that I am not able to interact with using selenium findElement method.

I have tried the following solutions:

Note:

If you know any other solution other than listed above that I can implement in Selenium Java framework , please pass on the solution. Thanks in advance !.


Solution

  • There is a very good plugin that can be used with selenium project shadow-automation-selenium. It helps in writing much better, readable and maintainable code. Using this you can access multi level of shadow DOM (up to 4 levels). This uses simple css selector to identify elements.

    WebElement findElement(String cssSelector) : use this method if want single element from DOM

    List<WebElement> findElements(String cssSelector) : use this if you want to find all elements from DOM

    WebElement findElements(WebElement parent, String cssSelector) : use this if you want to find a single elements from parent object DOM

    List<WebElement> findElements(WebElement parent, String cssSelector) : use this if you want to find all elements from parent object DOM

    WebElement getShadowElement(WebElement parent,String selector) : use this if you want to find a single element from parent DOM

    List<WebElement> getAllShadowElement(WebElement parent,String selector) : use this if you want to find all elements from parent DOM

    boolean isVisible(WebElement element) : use this if you want to find visibility of element

    boolean isChecked(WebElement element) : use this if you want to check if checkbox is selected

    boolean isDisabled(WebElement element) : use this if you want to check if element is disabled

    String getAttribute(WebElement element,String attribute) : use this if you want to get attribute like aria-selected and other custom attributes of elements.

    void selectCheckbox(String label) : use this to select checkbox element using label.

    void selectCheckbox(WebElement parentElement, String label) : use this to select checkbox element using label.

    void selectRadio(String label) : use this to select radio element using label.

    void selectRadio(WebElement parentElement, String label) : use this to select radio element from parent DOM using label.

    void selectDropdown(String label) : use this to select dropdown list item using label (use this if only one dropdown is present or loaded on UI).

    void selectDropdown(WebElement parentElement, String label) : use this to select dropdown list item from parent DOM using label.

    How to use this plugin: You will have to dependency in your project.

    Maven

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

    for html tag that resides under a shadow-root dom element

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

    You can use this code in your framework to grab the textarea element Object.

    import io.github.sukgu.*;
    Shadow shadow = new Shadow(driver);
    WebElement element = shadow.findElement("properties-page#settingsPage>textarea#textarea");
    String text = element.getText();