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.
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.
