Twitter allows you to embed a Twitter feed as a widget
Shadow DOMs are becoming increasingly common within websites and web applications. So, if you can’t test them, you are unable to test whole swathes of functionality in your site. Clearly, this is suboptimal to say the least! As a result, here at Functionize, we saw a slew of customer requests to add this functionality. And, as you know, we always try to solve any such problems our customers have.
When we began to look at solving this issue we quickly found out why this is a hard problem. Put simply, shadow DOMs are invisible to most test frameworks. If you can’t see it, you can’t test it. Testing is a two-stage process. First, you have to create the test, then you need to be able to replay it. So, first, we had to come up with a way to locate the shadow DOM. Then we had to drill down through it and find the enclosed elements. Finally, having added those to the test we needed to be able to access them again when replaying the test.
Within your test plan you may have a couple of lines saying:
These will be converted into a test and when the system comes to replay the test it will simply find the player, click Play and check the result. Effectively you are just treating widgets and other shadow DOM elements like any element within your web page.
Trying this out couldn’t be simpler! Find one of your pages that includes a widget in a shadow DOM and simply write a test that interacts with it! Chances are that some of you are already doing this without even realizing it!