@cypress/unique-selector 2.0.0 → 2.1.0

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/getClasses.js

@@ -22,7 +22,7 @@ function getClasses(el, filter) {
 
   try {
     return Array.prototype.slice.call(el.classList).filter(function (cls) {
-      return !filter || filter('attribute', 'class', cls);
+      return !filter || filter('class', 'class', cls);
     });
   } catch (e) {
     var className = el.getAttribute('class');

package/lib/index.js

@@ -35,7 +35,7 @@ var attrRegex = /^attribute:(.+)/m;
 /**
  * @typedef Filter
  * @type {Function}
- * @param {string} type - the trait being considered ('attribute', 'tag', 'nth-child').
+ * @param {string} type - the trait being considered ('attribute', 'tag', 'nth-child'). As a special case, the `class` attribute is split on whitespace and each token passed individually with a `class` type.
  * @param {string} key - your trait key (for 'attribute' will be the attribute name, for others will typically be the same as 'type').
  * @param {string} value - the trait value.
  * @returns {boolean} whether this trait can be used when building the selector (true = allow). Defaults to 'true' if no value returned.
@@ -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.0",
+  "version": "2.1.0",
   "description": "Given a DOM node, return a unique CSS selector matching only that element",
   "main": "./lib/index.js",
   "jsnext:main": "./src/index.js",