Sometimes the elements do not have stable element selectors but have their selectors generated dynamically. This is common for design systems, such as ANT Design or MUI. This causes a complication when linking pointers to the elements - a connection that works for you now might break in the future when the selectors refresh.
Usetiful offers alternative solutions like Attribute Selectors:
- Click the gear icon in the Usetiful plugin and enable Selection Mode.
- Click the desired element, then use the selection bubble to copy an alternative selector.
By using Attribute Selectors, you can create more stable pointers that are less likely to break due to dynamic changes in your UI. This approach ensures your pointers remain reliable, even as the design evolves.
Automatic Dynamic Selectors
For selectors captured with our Chrome extension after September 2025, the system can now automatically locate the correct element using dynamic selectors.
In essence, the system gathers metadata about each element, including its tag name, text content, index, attributes, and parent structure. If the default selector fails to find the element, the system intelligently applies alternative matching strategies to identify the element based on this metadata.
You can review the collected metadata under the “Edit element details” toggle in the content editor, and modify it if needed.
Targeting Elements by Text
Another way to create stable selections is Targeting Elements by Text. This method lets you select an element along with its text, making it useful when elements have multiple classes or are not static.
How to Use It
Open the Usetiful plugin and enable Selection Mode.
Click the desired element.
In the tour step settings enables Filter element by text.
