How Functionize lets you test Shadow DOMs
Shadow DOMs are getting common, but are hard to test
With Functionize you can now test them transparently
What is a shadow DOM, and why use one?
Twitter allows you to embed a Twitter feed as a widget
Testing Shadow DOMs
Why are they hard to test?
Why do you need to test shadow DOMs?
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.
How does Functionize’s solution work?
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:
- Locate the video player in the middle of the page.
- Click on the play button.
- Verify that the video begins to stream.
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.
How can I try this out?
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!