Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Shadow Root DOM and Custom HTML Tags Automation Using Selenium

DZone 's Guide to

Shadow Root DOM and Custom HTML Tags Automation Using Selenium

In this post, you'll learn how to work with multi-level shadow DOMs using the open source Java Selenium project.

· Web Dev Zone ·
Free Resource

In this article, we will try to solve a multi-level shadow DOM automation problem using an open source GitHub project that will let you test multi-level shadow DOM elements in your Java Selenium project. We will use Chrome as the main browser for testing this feature since Chrome v53+ fully supports shadow DOM.

Now let's talk about how this all started. I was working with a project that works on a workflow automation tool called Frevvo. In one of the improvements, we started using the Google Polymer framework that creates shadow DOM elements. As our automation framework was developed with Java Selenium, we were stuck, as the Selenium tool was not able to find elements under the shadow DOM.

After doing some research, I found that the Selenium JavaScript executer can help, but found later that its maintenance and development cost is very high.

Then I found this working solution that can be directly integrated with our Selenium code and is very easy to use and maintain. This project uses Selenium Webdriver and injects some JavaScript code internally that interacts with the shadow DOM or custom elements and returns the Selenium element's object.

Shadow DOM

The shadow DOM is a web standard that developers use to encapsulate their HTML code and style components so that no other style components can override their code. It is a critically important piece of the web component 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 elements provide a way for authors to build their own fully-featured DOM elements and these custom HTML tags can't be directly identified with Selenium tools.

Problem Statement

  • You have already developed your web-based automation framework in Java Selenium. Your front-end application uses Polymer, which uses a 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 a .jar file or by including dependency in your Java Selenium project.

Methods

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

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

How to Use This Plugin

You will have to add this dependency to your project.

Maven

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

Gradle

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

Or you can download the .jar file from the Maven Central repository. 

Selectors

Examples

For the 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 the HTML tag that resides under a shadow root's DOM element, such as<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 the HTML tag that resides under a shadow root's  DOM element, such as:

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

Katalon also supports the shadow DOM, but only for one level and not for multi-level.

This tool supports three levels of shadow DOM elements. As it is an open source project you can fork and make changes as per your need.

Topics:
automation selenium ,shadow dom ,test automation ,open source project ,web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}