@cypress/unique-selector 0.0.5

package/README.md

@@ -0,0 +1,109 @@
+unique-selector
+===============
+
+[![Build Status](https://travis-ci.org/ericclemmons/unique-selector.png)](https://travis-ci.org/ericclemmons/unique-selector)
+[![CocoaPods](https://img.shields.io/cocoapods/l/AFNetworking.svg)]()
+[![semantic-versioning](https://img.shields.io/badge/semantic%20-versioning-green.svg)]()
+
+Given a DOM node, return a unique CSS selector matching only that element.
+This is particularly useful when tracking in custom variables in analytics:
+
+
+    document.addEventListener('click', function(event) {
+        var selector = unique(event.target);
+
+        _gaq.push(['_trackEvent', 'Engagement', 'Click', selector]);
+    }, false);
+
+
+Installation
+------------
+
+[![NPM](https://nodei.co/npm/unique-selector.png?mini=true)](https://nodei.co/npm/unique-selector/)
+
+Options
+------------
+e.g.1 DomElement = `<span id="test"></span>`
+
+``` 
+import unique from 'unique-selector';
+
+// Optional Options
+options = {
+    // Array of selector types based on which the unique selector will generate
+    selectorTypes : [ 'ID', 'Class', 'Tag', 'NthChild' ]
+}
+
+unique( DomElement, options ); // #test
+```
+
+e.g.2 DomElement = `<span test="2"></span>`
+
+```
+import unique from 'unique-selector';
+
+// Optional Options
+options = {
+    // Array of selector types based on which the unique selector will be generate
+    selectorTypes : [ 'Attributes' ]
+}
+
+unique( DomElement, options ); // [test="2"]
+```
+
+
+Tests
+-----
+
+    $ npm run test
+
+    
+Contributing
+-----
+Feel free to open issues, make suggestions or send PRs.
+This project adheres to the Contributor Covenant [code of conduct](http://contributor-covenant.org/). By participating, you are expected to uphold this code.
+
+
+Contact
+-----
+
+Avraam Mavridis : [@avraamakis](https://twitter.com/avraamakis)
+
+Eric Clemmons : [@ericclemmons](https://twitter.com/ericclemmons)
+
+
+Releases
+--------
+- v0.1.0
+
+    - Big refactor/rewrite using es6
+    - More test + Change the test script
+    - Script to compile es6 to es5 using babel
+    - Ability to pass options for the **selectorTypes** based on which the unique selector will be generated, see the options
+
+
+- v0.0.4
+
+    - Handle extra whitespace in `className` ([#9](https://github.com/ericclemmons/unique-selector/pull/9))
+
+- v0.0.3
+
+    - Add support for various `<form>` elements ([#2](https://github.com/ericclemmons/unique-selector/issues/2))
+
+- v0.0.2
+
+    - Fix bug with `nth-child` calculation
+
+- v0.0.1
+
+    - Initial release
+
+
+
+License
+-------
+
+MIT
+
+
+[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/AvraamMavridis/unique-selector/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

package/lib/getAttributes.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAttributes = getAttributes;
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+/**
+ * Returns the Attribute selectors of the element
+ * @param  { DOM Element } element
+ * @param  { Array } array of attributes to ignore
+ * @return { Array }
+ */
+function getAttributes(el) {
+  var attributesToIgnore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['id', 'class', 'length'];
+  var attributes = el.attributes;
+
+  var attrs = [].concat(_toConsumableArray(attributes));
+
+  return attrs.reduce(function (sum, next) {
+    if (!(attributesToIgnore.indexOf(next.nodeName) > -1)) {
+      sum.push('[' + next.nodeName + '="' + next.value + '"]');
+    }
+    return sum;
+  }, []);
+}

package/lib/getClasses.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getClasses = getClasses;
+exports.getClassSelectors = getClassSelectors;
+
+require('css.escape');
+
+/**
+ * Get class names for an element
+ *
+ * @pararm { Element } el
+ * @return { Array }
+ */
+function getClasses(el) {
+  if (!el.hasAttribute('class')) {
+    return [];
+  }
+
+  try {
+    return Array.prototype.slice.call(el.classList);
+  } catch (e) {
+    var className = el.getAttribute('class');
+
+    // remove duplicate and leading/trailing whitespaces
+    className = className.trim().replace(/\s+/g, ' ');
+
+    // split into separate classnames
+    return className.split(' ');
+  }
+}
+
+/**
+ * Returns the Class selectors of the element
+ * @param  { Object } element
+ * @return { Array }
+ */
+function getClassSelectors(el) {
+  var classList = getClasses(el).filter(Boolean);
+  return classList.map(function (cl) {
+    return '.' + CSS.escape(cl);
+  });
+}

package/lib/getCombinations.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.getCombinations = getCombinations;
+/**
+ * Recursively combinate items.
+ * @param  { Array } result
+ * @param  { Array } items
+ * @param  { Array } data
+ * @param  { Number } start
+ * @param  { Number } end
+ * @param  { Number } index
+ * @param  { Number } k
+ */
+function kCombinations(result, items, data, start, end, index, k) {
+    if (index === k) {
+        result.push(data.slice(0, index).join(''));
+        return;
+    }
+
+    for (var i = start; i <= end && end - i + 1 >= k - index; ++i) {
+        data[index] = items[i];
+        kCombinations(result, items, data, i + 1, end, index + 1, k);
+    }
+}
+
+/**
+ * Returns all the possible selector combinations
+ * @param  { Array } items
+ * @param  { Number } k
+ * @return { Array }
+ */
+function getCombinations(items, k) {
+    var result = [],
+        n = items.length,
+        data = [];
+
+    for (var l = 1; l <= k; ++l) {
+        kCombinations(result, items, data, 0, n - 1, 0, l);
+    }
+
+    return result;
+}

package/lib/getData.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+/**
+ * Returns the data-{dataAttr} selector of the element
+ * @param  { String } selectorType - The type of selector to return.
+ * @param  { String } attributes - The attributes of the element.
+ * @return { String | null } - The data-{dataAttr} selector of the element.
+ */
+
+var getData = exports.getData = function getData(selectorType, attributes) {
+  for (var i = 0; i < attributes.length; i++) {
+    // extract node name + value
+    var _attributes$i = attributes[i],
+        nodeName = _attributes$i.nodeName,
+        value = _attributes$i.value;
+
+    // if this matches our selector
+
+    if (nodeName === selectorType) {
+      if (value) {
+        // if we have value that needs quotes
+        return "[" + nodeName + "=\"" + value + "\"]";
+      }
+
+      return "[" + nodeName + "]";
+    }
+  }
+
+  return null;
+};

package/lib/getID.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getID = getID;
+
+require('css.escape');
+
+/**
+ * Returns the Tag of the element
+ * @param  { Object } element
+ * @return { String }
+ */
+function getID(el) {
+  var id = el.getAttribute('id');
+
+  if (id !== null && id !== '') {
+    return '#' + CSS.escape(id);
+  }
+  return null;
+}

package/lib/getNthChild.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNthChild = getNthChild;
+
+var _isElement = require('./isElement');
+
+/**
+ * Returns the selectors based on the position of the element relative to its siblings
+ * @param  { Object } element
+ * @return { Array }
+ */
+function getNthChild(element) {
+  var counter = 0;
+  var k = void 0;
+  var sibling = void 0;
+  var parentNode = element.parentNode;
+
+
+  if (Boolean(parentNode)) {
+    var childNodes = parentNode.childNodes;
+
+    var len = childNodes.length;
+    for (k = 0; k < len; k++) {
+      sibling = childNodes[k];
+      if ((0, _isElement.isElement)(sibling)) {
+        counter++;
+        if (sibling === element) {
+          return ':nth-child(' + counter + ')';
+        }
+      }
+    }
+  }
+  return null;
+}

package/lib/getParents.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getParents = getParents;
+
+var _isElement = require('./isElement');
+
+/**
+ * Returns all the element and all of its parents
+ * @param { DOM Element }
+ * @return { Array of DOM elements }
+ */
+function getParents(el) {
+  var parents = [];
+  var currentElement = el;
+  while ((0, _isElement.isElement)(currentElement)) {
+    parents.push(currentElement);
+    currentElement = currentElement.parentNode;
+  }
+
+  return parents;
+}

package/lib/getTag.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTag = getTag;
+/**
+ * Returns the Tag of the element
+ * @param  { Object } element
+ * @return { String }
+ */
+function getTag(el) {
+  return el.tagName.toLowerCase().replace(/:/g, '\\:');
+}

package/lib/index.js

@@ -0,0 +1,238 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = unique;
+
+var _getID = require('./getID');
+
+var _getClasses = require('./getClasses');
+
+var _getCombinations = require('./getCombinations');
+
+var _getAttributes = require('./getAttributes');
+
+var _getNthChild = require('./getNthChild');
+
+var _getTag = require('./getTag');
+
+var _isUnique = require('./isUnique');
+
+var _getParents = require('./getParents');
+
+var _getData = require('./getData');
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } /**
+                                                                                                                                                                                                     * Expose `unique`
+                                                                                                                                                                                                     */
+
+var dataRegex = /^data-(.+)/;
+
+/**
+ * Returns all the selectors of the element
+ * @param  { Object } element
+ * @return { Object }
+ */
+function getAllSelectors(el, selectors, attributesToIgnore) {
+  var funcs = {
+    'tag': _getTag.getTag,
+    'nth-child': _getNthChild.getNthChild,
+    'attributes': function attributes(elem) {
+      return (0, _getAttributes.getAttributes)(elem, attributesToIgnore);
+    },
+    'class': _getClasses.getClassSelectors,
+    'id': _getID.getID
+  };
+
+  return selectors.filter(function (selector) {
+    return !dataRegex.test(selector);
+  }).reduce(function (res, next) {
+    res[next] = funcs[next](el);
+    return res;
+  }, {});
+}
+
+/**
+ * Tests uniqueNess of the element inside its parent
+ * @param  { Object } element
+ * @param { String } Selectors
+ * @return { Boolean }
+ */
+function testUniqueness(element, selector) {
+  var parentNode = element.parentNode;
+
+  try {
+    var elements = parentNode.querySelectorAll(selector);
+    return elements.length === 1 && elements[0] === element;
+  } catch (e) {
+    return false;
+  }
+}
+
+/**
+ * Tests all selectors for uniqueness and returns the first unique selector.
+ * @param  { Object } element
+ * @param  { Array } selectors
+ * @return { String }
+ */
+function getFirstUnique(element, selectors) {
+  return selectors.find(testUniqueness.bind(null, element));
+}
+
+/**
+ * Checks all the possible selectors of an element to find one unique and return it
+ * @param  { Object } element
+ * @param  { Array } items
+ * @param  { String } tag
+ * @return { String }
+ */
+function getUniqueCombination(element, items, tag) {
+  var combinations = (0, _getCombinations.getCombinations)(items, 3),
+      firstUnique = getFirstUnique(element, combinations);
+
+  if (Boolean(firstUnique)) {
+    return firstUnique;
+  }
+
+  if (Boolean(tag)) {
+    combinations = combinations.map(function (combination) {
+      return tag + combination;
+    });
+    firstUnique = getFirstUnique(element, combinations);
+
+    if (Boolean(firstUnique)) {
+      return firstUnique;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Returns a uniqueSelector based on the passed options
+ * @param  { DOM } element
+ * @param  { Array } options
+ * @return { String }
+ */
+function getUniqueSelector(element, selectorTypes, attributesToIgnore) {
+  var foundSelector = void 0;
+
+  var attributes = [].concat(_toConsumableArray(element.attributes));
+
+  var elementSelectors = getAllSelectors(element, selectorTypes, attributesToIgnore);
+
+  var _iteratorNormalCompletion = true;
+  var _didIteratorError = false;
+  var _iteratorError = undefined;
+
+  try {
+    for (var _iterator = selectorTypes[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var selectorType = _step.value;
+
+      var selector = elementSelectors[selectorType];
+
+      // if we are a data attribute
+      if (dataRegex.test(selectorType)) {
+        var dataSelector = (0, _getData.getData)(selectorType, attributes);
+
+        // if we found a selector via data attributes
+        if (dataSelector) {
+          selector = dataSelector;
+          selectorType = 'data';
+        }
+      }
+
+      if (!Boolean(selector)) continue;
+
+      switch (selectorType) {
+        case 'data':
+        case 'id':
+        case 'tag':
+          if (testUniqueness(element, selector)) {
+            return selector;
+          }
+          break;
+        case 'class':
+        case 'attributes':
+          if (selector.length) {
+            foundSelector = getUniqueCombination(element, selector, elementSelectors.tag);
+            if (foundSelector) {
+              return foundSelector;
+            }
+          }
+          break;
+
+        case 'nth-child':
+          return selector;
+
+        default:
+          break;
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+
+  return '*';
+}
+
+/**
+ * Generate unique CSS selector for given DOM element
+ *
+ * @param {Element} el
+ * @return {String}
+ * @api private
+ */
+
+function unique(el) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _options$selectorType = options.selectorTypes,
+      selectorTypes = _options$selectorType === undefined ? ['id', 'class', 'tag', 'nth-child'] : _options$selectorType,
+      _options$attributesTo = options.attributesToIgnore,
+      attributesToIgnore = _options$attributesTo === undefined ? ['id', 'class', 'length'] : _options$attributesTo,
+      selectorCache = options.selectorCache,
+      isUniqueCache = options.isUniqueCache;
+
+  var allSelectors = [];
+
+  var currentElement = el;
+  while (currentElement) {
+    var selector = selectorCache ? selectorCache.get(currentElement) : undefined;
+
+    if (!selector) {
+      selector = getUniqueSelector(currentElement, selectorTypes, attributesToIgnore);
+      if (selectorCache) {
+        selectorCache.set(currentElement, selector);
+      }
+    }
+
+    allSelectors.unshift(selector);
+    var maybeUniqueSelector = allSelectors.join(' > ');
+    var isUniqueSelector = isUniqueCache ? isUniqueCache.get(maybeUniqueSelector) : undefined;
+    if (isUniqueSelector === undefined) {
+      isUniqueSelector = (0, _isUnique.isUnique)(el, maybeUniqueSelector);
+      if (isUniqueCache) {
+        isUniqueCache.set(maybeUniqueSelector, isUniqueSelector);
+      }
+    }
+
+    if (isUniqueSelector) {
+      return maybeUniqueSelector;
+    }
+    currentElement = currentElement.parentNode;
+  }
+
+  return null;
+}

package/lib/isElement.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+exports.isElement = isElement;
+/**
+ * Determines if the passed el is a DOM element
+ */
+function isElement(el) {
+  var isElem = void 0;
+
+  if ((typeof HTMLElement === 'undefined' ? 'undefined' : _typeof(HTMLElement)) === 'object') {
+    isElem = el instanceof HTMLElement;
+  } else {
+    isElem = !!el && (typeof el === 'undefined' ? 'undefined' : _typeof(el)) === 'object' && el.nodeType === 1 && typeof el.nodeName === 'string';
+  }
+  return isElem;
+}

package/lib/isUnique.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isUnique = isUnique;
+/**
+ * Checks if the selector is unique
+ * @param  { Object } element
+ * @param  { String } selector
+ * @return { Array }
+ */
+function isUnique(el, selector) {
+  if (!Boolean(selector)) return false;
+  try {
+    var elems = el.ownerDocument.querySelectorAll(selector);
+    return elems.length === 1 && elems[0] === el;
+  } catch (e) {
+    return false;
+  }
+}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@cypress/unique-selector",
+  "version": "0.0.5",
+  "description": "Given a DOM node, return a unique CSS selector matching only that element",
+  "main": "./lib/index.js",
+  "jsnext:main": "./src/index.js",
+  "directories": {
+    "test": "test"
+  },
+  "scripts": {
+    "build": "npm run compile",
+    "test": "npm run compile && mocha --ignore-leaks",
+    "compile": "babel -d lib/ src/",
+    "prepublishOnly": "npm run compile",
+    "watch": "npm-scripts-watcher"
+  },
+  "watch": {
+    "src/**/*.js": [
+      "compile"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/cypress-io/unique-selector.git"
+  },
+  "keywords": [
+    "dom",
+    "html",
+    "css",
+    "selector",
+    "event"
+  ],
+  "author": "Cypress",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-preset-latest": "^6.24.1",
+    "babel-register": "^6.26.0",
+    "chai": "^4.3.4",
+    "component": "~1.1.0",
+    "eslint": "^8.0.1",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb-lite": "^1.0.4",
+    "eslint-plugin-react": "^7.26.1",
+    "jquery": "^3.6.0",
+    "jsdom": "^18.0.0",
+    "mocha": "~9.1.3",
+    "mocha-jsdom": "^2.0.0",
+    "mocha-phantomjs": "~4.1.0",
+    "npm-scripts-watcher": "^1.0.2"
+  },
+  "dependencies": {
+    "css.escape": "^1.5.1"
+  },
+  "files": [
+    "lib"
+  ]
+}