9

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.

alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • I would edit the title to match the context of the question, but I'm not sure if the use cases will differ between Protractor/WebDriver and general use. – BoltClock Feb 23 '15 at 21:40
  • @BoltClock yeah, I agree, good point. If you have a better title, please edit. Also, may be tagging with `selenium` makes sense.. – alecxe Feb 23 '15 at 21:42
  • I'm not going to add this as an answer since someone might have something better to say, but the question is the same as why does protractor have so many locator strategies. Essentially, developers could want to verify elements in the shadowdom since it's part of the UI display. – hankduan Feb 24 '15 at 08:48
  • @hankduan you are right, it might be too broad to answer. I guess most of all I'm just missing on a real world scenario, use case. Thanks. – alecxe Feb 24 '15 at 12:54

2 Answers2

5

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.

hankduan
  • 5,994
  • 1
  • 29
  • 43
  • Good example, now I see it is making much more sense for me and a practical value. Thank you! – alecxe Mar 07 '15 at 01:15
  • Could you also take a look at this thread: [Accessing elements in the shadow DOM](http://stackoverflow.com/questions/28911799/accessing-elements-in-the-shadow-dom)? It appears that we cannot access shadow DOM of native HTML5 elements..is it true? Thanks. – alecxe Mar 12 '15 at 23:25
  • 1
    I haven't tried that, but I wouldn't be surprised if the html5 native shadow doms are hidden. The purpose of this selector has always been to test custom created shadow doms. – hankduan Mar 13 '15 at 18:44
1

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!

Anthony Pham
  • 3,096
  • 5
  • 29
  • 38
  • Thank you for the link. I think I'm getting closer to understanding what is shadow dom for but the question still remains: if someone has hidden implementation details in the shadow DOM, why would we want to access it during end-to-end in browser testing?..it's about a motivation behind it and a real world example.. – alecxe Mar 06 '15 at 15:28