css * /deep/ selector is not working in Firefox

[rolandjitsu]

Bug report

I just ran into some issues with my tests when I tried to run the tests on Firefox and IE11.
One of the issues is with the * /deep/ CSS selector which I think is used in by.deepCss() that I use in astronauts.po.ts#L4 (and other places) to query elements in a Angular 2 app.
You can see the error on my Travis build at 204863742#L644 and 204863742#L1206.
According to MDN, that selector does not seem to be supported in Firefox and IE at the moment.

• Node Version: 7.4
• Protractor Version: 5.1
• Angular Version: 2.4
• Browser(s): Firefox, IE11
• Operating System and Version Windows 8.1
• Your protractor configuration file: protractor.conf.js
• A relevant example test: astronauts.e2e-spec.ts
• Output from running the test: 204863742#L486

[NickTomlin]

I'm not sure if this issue fits well here. Protractor won't be able to support these until the support is in the respective browsers.

We could attempt to Polyfill support (i'm not super knowledgable here though).

What do you see being the ideal state here?

[rolandjitsu]

@NickTomlin I understand. True, there isn't much that can be done to provide support for shadow DOM piercing selectors. Of course, an attempt to implement a polyfill could be a solution (if that's even possible), but I'm not sure about the future of /deep/ as it seems to have been deprecated.

Perhaps removing the by.deepCss() selector (first deprecating) would be a good idea.
But I'm not sure how else you'd query elements in an Angular 2 app that uses native encapsulation (Shadow DOM) for some of the components.

Angular 2 uses ViewEncapsulation.Emulated by default (emulated shadow DOM), which means that for most users it would not be an issue, unless they specifically switch to native Shadow DOM. Then it becomes an issue if they intend to query some element that's in the shadow DOM during e2e tests.

Alternatively, the method could look in .shadowRoot of each child as well to lookup what the user wants instead of querying by the CSS selector. But maybe that will affect performance to a degree that's noticeable and unacceptable.

Maybe someone from the Angular 2 team can help clarify their plans for Shadow DOM usage and how would that play with Protractor?

[NickTomlin]

Ah okay; I don't think I understood that this is being sunset. Thanks for clarifying! It sounds like deprecation (or removal in a major version) is the best path forward for this since browser support is not going to happen.

@sjelin I'm not sure if you have any Angular 2 contacts that could weigh in on this? It may be a non-issue if the typical use case is to not use native shadow DOM.

Once we have consensus on the approach I'm happy to add a deprecation warning (or accept a PR for one).

[firstor]

@rolandjitsu Please refer #4367 (comment). It works for me, but not sure if it will still work in your case.