@cypress/unique-selector 2.0.1 → 2.1.1

package/README.md

@@ -15,6 +15,7 @@ This is particularly useful when tracking in custom variables in analytics:
         _gaq.push(['_trackEvent', 'Engagement', 'Click', selector]);
     }, false);
 
+Selector uniqueness is determined based on the given element's root node. Elements rendered within Shadow DOM will derive a selector unique within the associated ShadowRoot context. Otherwise, a selector unique within an element's owning document will be derived.
 
 Installation
 ------------
@@ -74,6 +75,11 @@ Eric Clemmons : [@ericclemmons](https://twitter.com/ericclemmons)
 
 Releases
 --------
+
+- v2.1.0
+  
+    - 
+
 - v0.1.0
 
     - Big refactor/rewrite using es6

package/lib/getTag.js

@@ -4,6 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getTag = getTag;
+function isString(value) {
+  return typeof value === 'string';
+}
+
 /**
  * Returns the Tag of the element
  * @param  { Object } element
@@ -11,7 +15,26 @@ exports.getTag = getTag;
  * @return { String }
  */
 function getTag(el, filter) {
-  var tagName = el.tagName.toLowerCase().replace(/:/g, '\\:');
+  var tagName = el.tagName;
+
+  // If the tagName attribute has been overridden, we should 
+  // check the nodeName property instead. If the nodeName property
+  // is also not a string, we should return null and ignore tagName
+  // for selector generation.
+  //
+  // This can happen when a <form> element contains an <input>
+  // with an id of `tagName`. In this case, the form element's
+  // tagName property is a reference to the input element, not
+  // a string.
+  if (!isString(tagName)) {
+    tagName = el.nodeName;
+
+    if (!isString(tagName)) {
+      return null;
+    }
+  }
+
+  tagName = tagName.toLowerCase().replace(/:/g, '\\:');
 
   if (filter && !filter('tag', 'tag', tagName)) {
     return null;

package/lib/index.js

@@ -244,7 +244,9 @@ function getUniqueSelector(element, selectorTypes, attributesToIgnore, filter) {
 }
 
 /**
- * Generate unique CSS selector for given DOM element
+ * Generate unique CSS selector for given DOM element. Selector uniqueness is determined based on the given element's root node. 
+ * Elements rendered within Shadow DOM will derive a selector that is unique within the associated ShadowRoot context. 
+ * Otherwise, a selector that is unique within the element's owning document will be derived.
  *
  * @param {Element} el
  * @param {Object} options (optional) Customize various behaviors of selector generation
@@ -256,7 +258,6 @@ function getUniqueSelector(element, selectorTypes, attributesToIgnore, filter) {
  * @return {String}
  * @api private
  */
-
 function unique(el) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var _options$selectorType = options.selectorTypes,
@@ -301,7 +302,11 @@ function unique(el) {
     if (isUniqueSelector) {
       return maybeUniqueSelector;
     }
-    currentElement = currentElement.parentNode;
+
+    // Using parentElement here (rather than parentNode) to
+    // filter out any document/document fragment nodes that may
+    // be ancestors to elements within Shadow DOM trees.
+    currentElement = currentElement.parentElement;
   }
 
   return null;

package/lib/isUnique.js

@@ -5,15 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isUnique = isUnique;
 /**
- * Checks if the selector is unique
+ * Checks if the selector is unique. The selector is unique 
+ * if the elements root node (either its owner document, or a shadow root)
+ * has exactly one element matching the selector.
+ * 
  * @param  { Object } element
  * @param  { String } selector
- * @return { Array }
+ * @return { Boolean }
  */
 function isUnique(el, selector) {
   if (!Boolean(selector)) return false;
   try {
-    var elems = el.ownerDocument.querySelectorAll(selector);
+    // Using getRootNode here to scope checks to any parent
+    // ShadowRoot. getRootNode will otherwise return the
+    // document associated to the elements page/frame (like
+    // the ownerDocument property would).
+    var elems = el.getRootNode().querySelectorAll(selector);
     return elems.length === 1 && elems[0] === el;
   } catch (e) {
     return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cypress/unique-selector",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "Given a DOM node, return a unique CSS selector matching only that element",
   "main": "./lib/index.js",
   "jsnext:main": "./src/index.js",