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 w

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):

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 , 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.