ShadowDOM support request

[firstor]

Seems that ShadowDOM support is still missing:

Background

I am working with some Polymer 2 components which implements ShadowDOM v1 spec and I need to select elements inside their shadowRoots to run e2e tests. deepCss might be a solution but it doesn't work for me. As far as I can see, by.deepCss is nothing special difference with by.css but appending * /deep/ at the beginning of the given CSS selector, however, /deep/ seems deprecated on the browser.

I am working with the following versions:

• Node Version: v6.10.3
• Protractor Version: v5.1.2
• Angular Version: v4.2.4
• Browser(s): Chrome
• Operating System and Version: Ubuntu v16.04.2 AMD64 LTS Xenial

I think I checked all relevant articles including the followings and I couldn't get any satisfied answer:

• Shadow DOM support
• css * /deep/ selector is not working in Firefox

Workaround

Anyway, I can select inner elements of ShadowDOM elements by adding a custom locator. Here is my workaround:

/**
 * Usage:
 *   O  element(by.css_sr('#parentElement #innerElement'))          <=> $('#parentElement #innerElement')
 *   O  element(by.css_sr('#parentElement::sr #innerElement'))      <=> $('#parentElement').shadowRoot.$('#innerElement')
 *   O  element.all(by.css_sr('#parentElement .inner-element'))     <=> $$('#parentElement .inner-element')
 *   O  element.all(by.css_sr('#parentElement::sr .inner-element')) <=> $$('#parentElement').shadowRoot.$$('.inner-element')
 *   O  parentElement.element(by.css_sr('#innerElement'))           <=> parentElement.$('#innerElement')
 *   O  parentElement.element(by.css_sr('::sr #innerElement'))      <=> parentElement.shadowRoot.$('#innerElement')
 *   O  parentElement.all(by.css_sr('.inner-element'))              <=> parentElement.$$('.inner-element')
 *   O  parentElement.all(by.css_sr('::sr .inner-element'))         <=> parentElement.shadowRoot.$$('.inner-element')
 */
by.addLocator('css_sr', (cssSelector: string, opt_parentElement, opt_rootSelector) => {
    let selectors = cssSelector.split('::sr');
    if (selectors.length === 0) {
        return [];
    }

    let shadowDomInUse = (document.head.createShadowRoot || document.head.attachShadow);
    let getShadowRoot  = (el) => ((el && shadowDomInUse) ? el.shadowRoot : el);
    let findAllMatches = (selector: string, targets: any[], firstTry: boolean) => {
        let using, i, matches = [];
        for (i = 0; i < targets.length; ++i) {
            using = (firstTry) ? targets[i] : getShadowRoot(targets[i]);
            if (using) {
                if (selector === '') {
                    matches.push(using);
                } else {
                    Array.prototype.push.apply(matches, using.querySelectorAll(selector));
                }
            }
        }
        return matches;
    };

    let matches = findAllMatches(selectors.shift().trim(), [opt_parentElement || document], true);
    while (selectors.length > 0 && matches.length > 0) {
        matches = findAllMatches(selectors.shift().trim(), matches, false);
    }
    return matches;
});

Conclusion

Since the workaround works on my side, so I am asking~ is there anything I missed or I misused the background principle of Protractor in my workaround? I am politely saying ... if I don't violate your certain rules too much, is it possible to add ShadowDOM support something like that into the next update of Protractor?

Thank you.

[wswebcreation]

@First87

Tnx for sharing this. It looks nice and it's a nice workaround.

If you would like to see this in a newer version of Protractor you could add a PR with a new locator like element(by. shadowRoot('#parentElement #innerElement'))

[firstor]

@wswebcreation Ok, good. I will add a PR.
But I want to make sure just one thing before go: are you okay with this style of selector #parentElement::sr #innerElement to indicate the element #innerElement inside the shadow tree of the #parentElement?

[wswebcreation]

@First87

Looks good to me 👍

I'm only not the (only) one who decides about the PR's. The core members, that will also review your PR, decide in the end.

I think it will be a great addition and a clear logging, so go for it 😉

[firstor]

@wswebcreation How can I push my commits? Seems that I have no enough permission to contribute.

[wswebcreation]

Hi @First87 ,

Have you seen this document. It holds all the steps you need to take.

[firstor]

@wswebcreation Yes, I checked DEVELOPER.md and did not find any guide to push. These are steps I went:

• git clone git@github.com:angular/protractor.git
• cd protractor/
• git remote add upstream https://github.com/angular/protractor.git
• git checkout -b feature/shadow-root-locator master to create my own branch
• npm install
• made several commits
• gulp lint to check if code formatted correctly
• npm start, webdriver-manager start, npm test to pass all tests

Now what should I do for next?

[wswebcreation]

Hi @First87,

• You start by forking the project.
• Then it will be add to your account.
• Do a clone to your local machine
• Then push your changes and click on the "Create PR"-button.

That should do the trick

[firstor]

@wswebcreation Ok, thank you for guiding.

[firstor]

@wswebcreation I just created a PR #4392.

[wswebcreation]

@First87 Tnx!!

[SirJackovich]

What is the status on this? We would like to be able to use the by.shadowRoot function.

[firstor]

Hope someone helps me resolve this: #4392 (comment)