Logic used to get a NodeID from an element using CDP

selector-logic.ts

const getNodeId = async (element: Element) => {
  const selectors = getUniqueSelectors(element)

  const root = (await cdp().send("DOM.getDocument", { depth: -1 })).root

  let nodeId = root.nodeId

  for (const selector of selectors) {
    if (nodeId !== root.nodeId) {
      const next = await cdp().send("DOM.describeNode", { nodeId })

      if (next.node.contentDocument?.nodeId) {
        nodeId = next.node.contentDocument.nodeId
      }
    }

    nodeId = (
      await cdp().send("DOM.querySelector", {
        nodeId,
        selector,
      })
    ).nodeId
  }

  return nodeId
}

const getUniqueSelectors = (element: Element): string[] => {
  const selector = getUniqueSelector(element)
  const root = element.getRootNode() as Document

  return root instanceof Document && root.defaultView?.frameElement
    ? [...getUniqueSelectors(root.defaultView.frameElement), selector]
    : [selector]
}

const getUniqueSelector = (element: Element) => {
  /** Unique selector for this element */
  let selector = ""
  let parent: Element
  let nth: number

  while ((parent = element.parentElement!)) {
    for (nth = 1; (element = element.previousElementSibling!); ++nth);

    selector = " > :nth-child(" + nth + ")" + selector

    element = parent
  }

  return ":root" + selector
}