Finding elements in the shadow DOM

Question

Protractor 1.7.0 has introduced a new feature: a new locator by.deepCss which helps to find elements within a shadow DOM.

Which use cases does it cover? When would you want to reach elements in the shadow DOM?

---

^{The reason I ask the question is that I'm missing on the motivational part of the matter - I thought about protractor mainly as a high-level framework that helps to mimic real user interactions. Accessing shadow trees sounds like a very deep down technical thing and why would you want to do it is confusing me.}

Answer 1

To answer your question, here's a related question: "what information does shadow dom provide that looking at raw html does not?"

The following snippet creates a shadom dom (view via chrome or firefox):

<input type="date">

If you click on the arrow, a pop up opens with all the dates, and you can select it.

Now imagine you are building a hotel reservation app and you made a custom shadow dom date picker, where it would black out (and not allow user to select) dates when rooms are unavailable.

Looking at the raw html, you see <input type="date">, and the value/dates that a user selected. However, how would you test that the black out UI is working as intended? For that you would need to examine the shadow dom, where the pop up resides.

Answer 2

The reason I ask the question is that I'm missing on the motivational part of the matter - I thought about protractor mainly as a high-level framework that helps to mimic real user interactions. Accessing shadow trees sounds like a very deep down technical thing and why would you want to do it is confusing me.

Doesn't seem so in this website that shows an introduction to shadow DOM. It says that:

Shadow DOM separates content from presentation thereby eliminating naming conflicts and improving code expression.

Shadow DOM mainly helps with separating content to avoid naming conflicts and improving your code expression, making it neater and better (I assume). I am sorry to say that I don't actually use Selenium, so here is a website with plenty more information: http://webcomponents.org/polyfills/shadow-dom/

I hope this helps you!