New Shadow Root Locator

[firstor]

Added new Protractor locator to select elements inside shadow-root.
For the background, refer to #4367.

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here (e.g. I signed it!) and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here (e.g. I signed it!) and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

[firstor]

@Bethannfrum What do you mean by "Fix and restore it to the original format and release old documents"?

[cnhe]

Any progress on this PR? Would be extremely helpful for me to have

[azorrozua]

Also waiting for native Shadow Root locators

[BorntraegerMarc]

@firstor are you still working on this? :)

[alexzavg]

any update?)

[gmazlami]

Would love to see this added to protractor as soon as possible :)

[WizardPC]

Any update ? I use a graphic lib and i want to check if updating it doesn't break to much things...

[DanielRuf]

Bump. I can patch protractor using patch-package but would be great to see this in the next releases.

Also the docs are not correct as they say that deepCss supports Shadow DOM which does not seem to be correct?

https://www.protractortest.org/#/api?view=ProtractorBy.prototype.deepCss

Find an element by css selector within the Shadow DOM.

[DanielRuf]

Here is a patch generated with patch-package for protractor 5.4.3 (protractor+5.4.3.patch):

diff --git a/node_modules/protractor/built/clientsidescripts.js b/node_modules/protractor/built/clientsidescripts.js
index 73c157d..0f082fd 100644
--- a/node_modules/protractor/built/clientsidescripts.js
+++ b/node_modules/protractor/built/clientsidescripts.js
@@ -706,6 +706,60 @@ functions.findByCssContainingText = function(cssSelector, searchText, using) {
   return matches;
 };
 
+/**
+ * Find an element throughout the Shadow DOM by extended css selector.
+ * In order to go into the shadow tree of the element, a special selector `::sr` is used.
+ * As compatible with both Shadow DOM v1 and prior specification, `::sr` will be ignored
+ * for the browser with no support of Shadow DOM, so the result will be same.
+ *
+ * Usage:
+ *   element(by.shadowRoot('#outer #inner'))          <=>  $('#outer #inner')
+ *   element(by.shadowRoot('#outer::sr #inner'))      <=>  $('#outer').shadowRoot.$('#inner')
+ *   element.all(by.shadowRoot('#outer .inner'))      <=>  $$('#outer .inner')
+ *   element.all(by.shadowRoot('#outer::sr .inner'))  <=>  $$('#outer').shadowRoot.$$('.inner')
+ *   outer.element(by.shadowRoot('#inner'))           <=>  outer.$('#inner')
+ *   outer.element(by.shadowRoot('::sr #inner'))      <=>  outer.shadowRoot.$('#inner')
+ *   outer.all(by.shadowRoot('.inner'))               <=>  outer.$$('.inner')
+ *   outer.all(by.shadowRoot('::sr .inner'))          <=>  outer.shadowRoot.$$('.inner')
+ *
+ * @param {string} selector An extended css selector, each `::sr` in which
+ *   will go into the shadow root of the element.
+ * @param {Element} using The scope of the search.
+ *
+ * @return {Array.<Element>} The matching elements.
+ */
+functions.findByShadowRoot = function(selector, using) {
+  var selectors = selector.split('::sr');
+  if (selectors.length === 0) {
+      return [];
+  }
+
+  var shadowDomInUse = (document.head.createShadowRoot || document.head.attachShadow);
+  var getShadowRoot  = function (el) {
+    return ((el && shadowDomInUse) ? el.shadowRoot : el);
+  };
+  var findAllMatches = function (selector /*string*/, targets /*array*/, firstTry /*boolean*/) {
+      var scope, i, matches = [];
+      for (i = 0; i < targets.length; ++i) {
+          scope = (firstTry) ? targets[i] : getShadowRoot(targets[i]);
+          if (scope) {
+              if (selector === '') {
+                  matches.push(scope);
+              } else {
+                  Array.prototype.push.apply(matches, scope.querySelectorAll(selector));
+              }
+          }
+      }
+      return matches;
+  };
+
+  var matches = findAllMatches(selectors.shift().trim(), [using || document], true);
+  while (selectors.length > 0 && matches.length > 0) {
+      matches = findAllMatches(selectors.shift().trim(), matches, false);
+  }
+  return matches;
+};
+
 /**
  * Tests whether the angular global variable is present on a page. Retries
  * in case the page is just loading slowly.
diff --git a/node_modules/protractor/built/locators.js b/node_modules/protractor/built/locators.js
index a9aafa2..ea212df 100644
--- a/node_modules/protractor/built/locators.js
+++ b/node_modules/protractor/built/locators.js
@@ -446,6 +446,42 @@ class ProtractorBy extends WebdriverBy {
         return selenium_webdriver_1.By.css('* /deep/ ' + selector);
     }
     ;
+
+    /**
+     * Find an element throughout the Shadow DOM by extended css selector.
+     * In order to go into the shadow tree of the element, use a special selector `::sr`.
+     * As compatible with both Shadow DOM v1 and prior specification, `::sr` will be ignored
+     * for the browser with no support of Shadow DOM, so the result will be same.
+     *
+     * @alias by.shadowRoot(selector)
+     * @view
+     * <div>
+     *   <span id="outerspan">
+     *   <"shadow tree">
+     *     <span id="span1"></span>
+     *     <"shadow tree">
+     *       <span id="span2"></span>
+     *     </>
+     *   </>
+     * </div>
+     * @example
+     * var span1 = element(by.shadowRoot('#outerspan::sr #span1'));
+     * var span2 = element(by.shadowRoot('#outerspan::sr #span1::sr #span2'));
+     *
+     * @param {string} selector an extended css selector, each `::sr` in which will go into the shadow root of the element
+     * @returns {Locator} location strategy
+     */
+    shadowRoot(selector) {
+        return {
+        findElementsOverride: (driver, using, rootSelector) => {
+            return driver.findElements(
+                By.js(clientSideScripts.findByShadowRoot, selector, using, rootSelector));
+        },
+        toString: () => {
+            return 'by.shadowRoot("' + selector + '")';
+        }
+        };
+    };
 }
 exports.ProtractorBy = ProtractorBy;
 //# sourceMappingURL=locators.js.map
\ No newline at end of file

[snehal4it]

Waiting for the fix

[DaiGumms]

What's the ETA on this? Really struggling with Shadow DOM compatibility

[ohlori]

Any updates on this??