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.

Leave a comment

Your email address will not be published. Required fields are marked *

Cerberus-Testing Terms Of Service


Website Terms and Conditions of Use

1. Terms

By accessing this Website, accessible from http://vgeouyk.cluster030.hosting.ovh.net, you are agreeing to be bound by these Website Terms and Conditions of Use and agree that you are responsible for the agreement with any applicable local laws. If you disagree with any of these terms, you are prohibited from accessing this site. The materials contained in this Website are protected by copyright and trade mark law. These Terms of Service has been created with the help of the Terms of Service Generator and the Privacy Policy Template.

2. Use License

Permission is granted to temporarily download one copy of the materials on Cerberus Testing's Website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title, and under this license you may not:

  • modify or copy the materials;
  • use the materials for any commercial purpose or for any public display;
  • attempt to reverse engineer any software contained on Cerberus Testing's Website;
  • remove any copyright or other proprietary notations from the materials; or
  • transferring the materials to another person or "mirror" the materials on any other server.

This will let Cerberus Testing to terminate upon violations of any of these restrictions. Upon termination, your viewing right will also be terminated and you should destroy any downloaded materials in your possession whether it is printed or electronic format.

3. Disclaimer

All the materials on Cerberus Testing’s Website are provided "as is". Cerberus Testing makes no warranties, may it be expressed or implied, therefore negates all other warranties. Furthermore, Cerberus Testing does not make any representations concerning the accuracy or reliability of the use of the materials on its Website or otherwise relating to such materials or any sites linked to this Website.

4. Limitations

Cerberus Testing or its suppliers will not be hold accountable for any damages that will arise with the use or inability to use the materials on Cerberus Testing’s Website, even if Cerberus Testing or an authorize representative of this Website has been notified, orally or written, of the possibility of such damage. Some jurisdiction does not allow limitations on implied warranties or limitations of liability for incidental damages, these limitations may not apply to you.

5. Revisions and Errata

The materials appearing on Cerberus Testing’s Website may include technical, typographical, or photographic errors. Cerberus Testing will not promise that any of the materials in this Website are accurate, complete, or current. Cerberus Testing may change the materials contained on its Website at any time without notice. Cerberus Testing does not make any commitment to update the materials.

6. Links

Cerberus Testing has not reviewed all of the sites linked to its Website and is not responsible for the contents of any such linked site. The presence of any link does not imply endorsement by Cerberus Testing of the site. The use of any linked website is at the user’s own risk.

7. Site Terms of Use Modifications

Cerberus Testing may revise these Terms of Use for its Website at any time without prior notice. By using this Website, you are agreeing to be bound by the current version of these Terms and Conditions of Use.

8. Your Privacy

Please read our Privacy Policy.

9. Governing Law

Any claim related to Cerberus Testing's Website shall be governed by the laws of fr without regards to its conflict of law provisions.

Thank you for your interest in cerberus,

In order to proceed with your SaaS we need some in order to confirm your instances accesses.

Please provide accurate contacts to secure the process.

You can cancel any time the subscription, please read Terms of Use.