Skip to content

Home

Jump to bottom
Sushil Kumar Gupta edited this page Sep 24, 2019 · 1 revision

Welcome to the shadow-automation-katalon-plugin wiki!

Shadow root DOM automation using Katalon

Build Status codecov Maven Central License

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 Katalon Groovy. Your frontend application uses Polymer that uses shadow dom. Katalon doesn't provide any way to deal with multi level shadow-dom elements.
  • Your application page contains custom HTML tags that is not always easy to be identified directly using Katalon.

Solution:

You can use this Katalon Keyword Plugin by importing jar file or by installing plugin from Katalon Plugin store in your 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 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

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 install Katalon Plugin in your Katalon IDE.

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

Documentation Link

Clone this wiki locally