I build the selector from the target upward. An ID is the cheapest stable stop; otherwise I add an <code>nth-child()</code> only when siblings share the same tag.
<pre class="shiki github-dark shaku"><code>function generateSelector(root, target) { if (root === target) return root.tagName.toLowerCase() const parts = [] let node = target while (node &amp;&amp; node !== root) { const parent = node.parentElement if (!parent) throw new Error('target is outside root') const tag = node.tagName.toLowerCase() const sameTag = [...parent.children].filter( child =&gt; child.tagName === node.tagName ) if (node.id) { parts.unshift(`#${CSS.escape(node.id)}`) break } const index = [...parent.children].indexOf(node) + 1 parts.unshift(sameTag.length &gt; 1 ? `${tag}:nth-child(${index})` : tag) node = parent } if (node !== root &amp;&amp; !parts[0]?.startsWith('#')) { throw new Error('target is outside root') } return parts.join(' &gt; ')}</code></pre>
The important detail is that <code>nth-child()</code> uses the index among all children, even though I only use it when there is another sibling with the same tag.
I tested the same idea against a real two-photo upload UI in <a href="https://airapvideo.ac/">AI Rap Video's uploader</a>: IDs on the drop zones made the selector shorter, while the <code>nth-child()</code> fallback kept generated QA selectors deterministic.

Readable path with nth-child fallback

Given a DOM tree and a target element, generate a valid selector to target it. For example, for a DOM tree like below <div> BFE.dev <div> is <p…