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.
- 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.
In this article, we will try to solve 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 as Chrome version 53 or later fully supports shadow DOM.
In one of our projects, a workflow automation tool Frevvo, developers started using the Google Polymer framework that creates Shadow DOM elements. As our automation framework was developed using java selenium, we were stuck as selenium was not able to find any elements under the Shadow DOM.
You can use this plugin by adding the jar file or by including a dependency in your java selenium project.
Add the following dependency
<dependency> <groupId>io.github.sukgu</groupId> <artifactId>automation</artifactId> <version>0.0.1</version> <dependency>
You can also download the jar file from the Maven Central repository and include it in your project
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 an 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();
This plugin supports upto 3 levels of shadow-dom elements. The plugin is available as an open source project on GitHub, you can fork and make changes as per your requirements.
Shadow DOM: //www.w3.org/TR/shadow-dom/