Element inference and dynamic class names
When you select elements in app for Userflow to target (e.g. for a tooltip), Userflow.js collects information about the element, such as its class names and other element attributes, in order to be able to find the same element again later.
We call this process element inference.
If your app uses dynamic class names or IDs, Userflow.js may have a hard time finding the element next time your app is deployed, if those class names or IDs have changed.
You can customize Userflow.js to avoid this situation.
Don’t hesitate to reach out to us if we can help you configure your installation.
Exclude dynamic class names
Example: You use a CSS-in-JS solution that generates dynamic class names on the format css-<hash>, where <hash> changes every time you deploy.
Add the following line before you call userflow.init():
userflow.setInferenceClassNameFilter(cls => !cls.startsWith('css-'))
You can also use a negative lookahead regular expression that only matches strings that don’t start with css-:
userflow.setInferenceClassNameFilter(/^(?!css-).*/)See also userflow.setInferenceClassNameFilter docs for how to filter by multiple patterns, or using functions instead of regular expressions.
Note that if all your css classes are dynamic, just running the above with an empty array will make Userflow ignore all class names. Just be careful not ignoring actually useful, non-dynamic classes, as this will make it harder for Userflow to recognize elements.
Exclude dynamic IDs
By default, Userflow.js will use elements’ id attribute. Except if the id ends in a number. This is to work out-of-the-box with JS frameworks such as Ember.js, which assigns IDs such ember123 to all elements it controls.
You can override this behavior by adding the following line of code before your userflow.init line:
userflow.setInferenceAttributeFilter('id', id => !id.startsWith('auto-'))
Here we’re telling Userflow to ignore all ids starting with auto-.
See also userflow.setInferenceAttributeFilter docs.
Override attributes used for inference
By default, Userflow.js may use the values of the following element attributes for inference:
-
data-for -
data-id -
data-testid -
data-test-id -
for -
id -
name -
placeholder -
role
You can override this list by adding the following line of code before your userflow.init line:
userflow.setInferenceAttributeNames(['name', 'placeholder', 'data-testid'])See also userflow.setInferenceAttributeNames docs.
