Revealing How To Make Shadow DOM Test Automation

New reactive applications are challenging to test.

Software uses more and more components with independent modules reacting to specific events. This change enables to enrich the user experience with dynamic blocks without reloading the full page.

While improving the user experience is necessary, the module’s implementation creates the problem of shadow DOM. The code isolated inside a module is by nature not visible in the main DOM of the HTML page.

You have now the possibility to test shadow DOM elements from Cerberus Testing 4.13, the open source test automation platform. The feature is available within the standard framework to ease your testing journey.

This article shares how to implement automated tests of shadow DOM elements. You can follow the tutorial using a Cerberus Testing plan for free here.

Understanding Shadow DOM generation

The first thing is to identify the elements that will be part of your automated tests. Trying to use Selenium for that will result in a ‘NoSuchElementException’. You therefore need another solution.

You can access the shadow DOM elements by navigating inside the source code of the page. They are located inside the “shadow host” part that links to the Shadow Tree. This is your starting point to identify the remaining elements.

Figure 1: An example of shadow DOM tree presence, Shadow DOM Tips.

Accessing the tree of your pages under test is essential to identify the various locators. You can alternatively browse the source code to have a look at their generation. Be sure that the shadow DOM you want to test is “open”, as it can be forced in a “close” mode.

You are now ready to identify the locators.

Identify the shadow DOM query locator

Shadow DOM elements are organized inside a tree, similarly to the DOM. Accessing these hidden elements requires a language to navigate inside the tree. In Cerberus Testing, a simple syntax is available on the user interface.

We will use an example website containing Shadow DOM: Demo Icon Set. Let’s look for an element inside the summary table. When we find it, we can compose the query locator by specifying the successive path leading to the element.

Figure 2 : An example of Shadow DOM marked as open.

In our case, accessing the link creates the following query “ iron-component-page>>iron-doc-viewer>>a”. We can follow the same logic for any elements open in the DOM to create our collection of objects.

Your last step is to configure these paths in your tests.

Use the new action property in Cerberus Testing

Cerberus Testing lets you configure different test typologies inside the web interface. The standard test case structure contains actions, controls and data. The shadow DOM paths can be configured in any element involving a locator.

You need to use the “querySelector” keyword to enable the search of shadow DOM elements. The keyword is expecting the tree as a query separated by “>>”. In our case, we set “querySelector=iron-component-page>>iron-doc-viewer>>a”.

Figure 3: The configuration of a shadow DOM querySelector in Cerberus Testing.

You can use the same mechanism for other types of actions or even controls. The only requirement is for the query locator to be a valid parameter.

You are now ready to execute your tests.

Leverage the framework to execute your tests

Launching automated tests can be done in various ways in Cerberus Testing. You can manually launch the tests in the web interface, trigger them using the internal scheduler or the APIs. It is your choice depending on your context.

For the sake of demonstration, we configured one test using the xpath locator and another using the querySelector. That way you can see the minor configuration difference and see which tests effectively work in action.

Figure 4: The comparison and validation of the XPath vs querySelector for shadow DOM.

You are now ready to expand your test automation.

Expand with Cerberus Testing, the open test automation platform

Shadow DOMs are becoming widely used in modern applications. The capacity to perform test automation is a game-changer for the software delivery on your team.

Done well, you enable the team to accelerate with confidence and increased reliability.

You need time to effectively focus on the product and your team. We open-sourced Cerberus Testing as a framework in 2013 to let most of us benefit from a ready-to-use test automation solution.

Cerberus Testing is today a test automation platform increasing its capability of supported use-cases, integrations and ease of use. You can use a single platform to collaborate with your team on web, mobile, API, desktop and database tests.

Start making a difference today.

Revealing How To Make Shadow DOM Test Automation