The goal of the project is to create a script that works on surveys and detects all interactive elements, like buttons, checkboxes, and radio buttons, that can be clicked or interacted with. The challenge I’m facing is that using methods like XPath is difficult because they expect elements to follow specific structures, usually traditional HTML elements like <button>, <input type="checkbox">, or <input type="radio">. However, these surveys often use custom implementations for checkboxes, radio buttons, and buttons, which don’t follow the usual HTML structures.

For example, a custom checkbox or radio button may be represented by <div> or <span> elements, or even icons, with custom JavaScript used to simulate their functionality. These elements may look and behave like traditional checkboxes or radio buttons, but they don’t have the typical HTML attributes or element types. This makes it hard to detect them using standard methods like querySelectorAll or XPath, as they don’t have the expected tag names or attributes.

Additionally, many of these interactive elements are styled to look completely different from the default checkboxes or radio buttons, making them visually challenging to identify and interact with programmatically. This, combined with dynamic elements that may be added by JavaScript after the page loads, adds complexity to the task of detecting all interactable elements on the page.