Anatomy of an XPath selector

Selectors are comprised of one or more node tag types followed by an optional [predicate] in square brackets. The predicates have operators and functions to filter certain node matches. Lastly, they include path separators with generic axes with double colons to further refine the path of the element. This makes it more likely to find an element regardless of its location in the DOM.

XPath selectors are written as absolute or relative. This is an example of an absolute-style selector to the Find My Candy button on the Candymapper website:

public get myElement() {
  const selector: string = "/html[1]/body[1]/div[1]/div[1]/div[1]/div[13]/div[1]/div[1]/div[1]/div[2]/div[2]/a[1]";
  return $(selector);
}

Now that you have seen an absolute selector, use it only as a red flag. The point of this exercise is the fluid nature of the numeric indexes inside the square brackets. The exact location will be dynamic from release to...