How I keep feedback pins on the right element when a website changes

When PinReview creator developed a tool for clients to leave feedback on specific elements of a website, the primary challenge was ensuring the feedback pin followed the element even as the page layout changed. Initially, the creator attempted to save the click's x, y coordinates, but this approach proved unreliable due to factors like screen size, scrolling, responsive design, and content changes above the target element.

Instead, the creator decided to store the element's unique identifier, such as its ID, test attributes, name, or aria-label. They built a ranked list of CSS selectors, starting with the most stable options like auto-generated IDs (rejecting those that appear generated) and CSS-in-JS classes (which vary between deployments). Test attributes were found to be the most stable anchors after real IDs.

To position the pin accurately, it is stored as a percentage of the element's size rather than the page, ensuring that its location remains consistent regardless of changes to the element's size across different devices. Each comment also includes a screenshot of the reviewer's view, along with the URL, viewport size, browser, OS, and any console errors, allowing developers to revisit the original context even if the live page undergoes significant changes.

However, the tool does face challenges with identical elements, such as multiple product cards sharing the same classes and lacking unique identifiers. In such cases, the pin may incorrectly target the wrong element if a new item is added. The creator suggests a possible solution of assigning unique identifiers to repeated elements or storing a small fingerprint of the element's text and tag, enabling the pin to indicate that it may have moved instead of confidently pointing at the wrong element.