sergueik / shadow-automation-selenium

This project focuses on automation of multi-level shadow root dom using java selenium. You can embed this plugin in your java selenium project.

Shadow root DOM automation using selenium

Shadow DOM:

Shadow DOM is a web standard that offers component style and markup encapsulation. It is a critically important piece of the Web Components story as it ensures that a component will work in any environment even if other CSS or JavaScript is at play on the page.

Custom HTML Tags:

Custom HTML tags can't be directly identified with selenium tools. Using this plugin you can handle any custom HTML tags.

Problem Statement:

• You have already developed your web-based automation framework in java selenium. Your frontend application uses Polymer that uses shadow dom. Selenium doesn't provide any way to deal with shadow-dom elements.
• Your application page contains custom HTML tags that can't be identified directly using selenium.

Solution:

You can use this plugin by adding jar file or by including maven dependency in your java selenium project.

How it works:

Methods:

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 findElement(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

void setImplicitWait(int seconds) : use this method for implicit wait

void setExplicitWait(int seconds, int pollingTime) throws Exception : use this method for explicit wait

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

WebElement getParentElement(WebElement element) : use this to get the parent element if web element.

List<WebElement> getChildElements(WebElement parent) : use this to get all the child elements of parent element.

List<WebElement> getSiblingElements(WebElement element) : use this to get all adjacent (sibling) elements.

WebElement getSiblingElement(WebElement element, String selector) : use this to get adjacent(sibling) element using css selector.

WebElement getNextSiblingElement(WebElement element) : use this to get next adjacent(sibling) element.

WebElement getPreviousSiblingElement(WebElement element) : use this to get previous adjacent(sibling) element..

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.

void scrollTo(WebElement element) : use this to scroll to web element.

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.12</version>
<dependency>

Gradle

implementation 'io.github.sukgu:automation:0.0.12'

You can download the jar file from repository http://central.maven.org/maven2/io/github/sukgu/automation/0.0.12/automation-0.0.12.jar

Selector:

Examples:

for html tag <paper-tab title="Settings"> You can use this code in your framework to grab the paper-tab element Object.

  import io.github.sukgu.*;
  
  Shadow shadow = new Shadow(driver);
  WebElement element = shadow.findElement("paper-tab[title='Settings']");
  List<WebElement> element = shadow.findElements("paper-tab[title='Settings']");
  String text = element.getText();

for html tag that resides under a shadow-root dom element <input title="The name of the employee"> You can use this code in your framework to grab the paper-tab element Object.

  import io.github.sukgu.*;
  
  Shadow shadow = new Shadow(driver);
  WebElement element = shadow.findElement("input[title='The name of the employee']");
  String text = element.getText();

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();

Wait: Implicit and Explicit

If you want to use wait to synchronize your scripts then you should use the implicit or explicit wait feature.

• For Implicit wait, you can use shadow.setImplicitWait(int seconds) method.

• For Explicit wait, you can use shadow.setExplicitWait(int seconds, int pollingTime) method.

• In Implicit wait, the driver will wait for at least n seconds as set in shadow.setImplicitWait(n).

• In Explicit wait, the driver will wait for at max n seconds as set in shadow.setImplicitWait(n,m). In between driver will check for presence of WebElement every m seconds.

  Note: > is used to combine multi level dom structure. So you can combine 5 levels of dom. If you want some more level modify the script and ready to rock.

More Usage

The Shadow Root DOM Automation allows one get rid of fragile and Javasrcipt-heavy calls like

String locator1 = "autohistory-card";
String locator2 = "button-ui";
String locator3 = "button";
// traversing nested Shadow Root elements, found quite often
WebElement element = (WebElement) (js.executeScript(String.format(
    "return document.querySelector('%s')"
  + ".shadowRoot.querySelector('%s')"
  + ".shadowRoot.querySelector('%s')",
  locator, locator2, locator3)));
assertThat(element, notNullValue());

and replace them with core Selenium-like chained methods like

driver.navigate().to("https://avtokod.mos.ru/Autohistory#!/Home");
String locator1 = "autohistory-card";
String locator2 = "button-ui";
String locator3 = "button";


WebElement element1 = driver.findElement(By.tagName(locator1));
WebElement elements2 = shadowDriver.getAllShadowElement(element1,locator2).get(0);
WebElement element3 = shadowDriver.getAllShadowElement(element2, locator3).get(0);
assertThat(element3, notNullValue());

and other methods listed above

JAva 9 stream methods are also supported and useful, helping one browsing the DOM tree inside the shadow root, from Java test.

driver.navigate().to("https://avtokod.mos.ru/Autohistory#!/Home");
String locator = "autohistory-card";
List<WebElement> elements = shadowDriver.findElements(locator);
  elements.stream()
    .map(o -> o.getAttribute("outerHTML"))
    .forEach(System.err::println);

Documentation Link