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
<hash> changes every time you deploy.
Add the following line before you call
userflow.setInferenceClassNameFilter(cls => !cls.startsWith('css-'))
You can also use a negative lookahead regular expression that only matches strings that don’t start with
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
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.setInferenceAttributeFilter('id', id => !id.startsWith('auto-'))
Here we’re telling Userflow to ignore all ids starting with
Override attributes used for inference
By default, Userflow.js may use the values of the following element attributes for inference:
You can override this list by adding the following line of code before your
userflow.setInferenceAttributeNames(['name', 'placeholder', 'data-testid'])
See also userflow.setInferenceAttributeNames docs.