Find unique selector in the scope of a root element

[vwochnik]

Normally, this script will find a unique selector for an element in the scope of the whole document but I will probably also need the option to apply this algorithm within a root element.

If you are willing to merge such a feature, I would create a PR.

[AvraamMavridis]

Sounds interesting, yep. Definetely a nice suggestion. It can be a param in options config.

[tathastu871]

@AvraamMavridis @vwochnik @ericclemmons

Proposing Changes

let owner;
 function isUnique(el, selector, owner) {
  if (!Boolean(selector)) return false;
  const elems = (owner !== undefined && owner !== null) 
                ? owner.querySelectorAll(selector) 
                : el.ownerDocument.querySelectorAll(selector);

  return elems.length === 1 && elems[0] === el;
}

function unique(el, options = {}, owner) {
  const {
    selectorTypes = ['ID', 'Class', 'Tag', 'NthChild'],
    attributesToIgnore = ['id', 'class', 'length'],
    excludeRegex = null,
  } = options;

  const allSelectors = [];
  const parents = getParents(el);

  for (let elem of parents) {
    const selector = getUniqueSelector(elem, selectorTypes, attributesToIgnore, excludeRegex);
    if (Boolean(selector)) {
      allSelectors.push(selector);
    }
  }

  const selectors = [];
  for (let it of allSelectors) {
    selectors.unshift(it); // Build the selector path
    const selector = selectors.join(' > '); // Create full selector path
    // Check uniqueness with respect to the owner context
    if (isUnique(el, selector, owner)) {
      return selector; // Return the first unique path found
    }
  }

  return null; // If no unique selector found
}

Test Results:

Passing body > nth-child(33) as owner
and one of its child as DomElement

options = {
    
    
    selectorTypes : [ 'ID', 'Class', 'Tag', 'NthChild' , 'Attributes' ]
}

unique( DomElememy, options );  --> Context of document
## ':nth-child(33) > :nth-child(1) > div'

unique(DomElement, options , document.querySelector('body > nth-child(33)'));  --> Context of defined parent root

##':nth-child(1) > div'

[tathastu871]

Proof
document.querySelectorAll(unique(DomElemmt, options , document.querySelector('body > :nth-child(33)')))

Return: div_acb4

document.querySelector('body > :nth-child(33)').querySelectorAll(unique( DomElement, options , document.querySelector('body > :nth-child(33)')))

Return: div_acb4

[tathastu871]

Scoping to particlar root parent
then user would have ti use

Nth child or attributes as selectorTypes

as class id tags are independient of parent