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.
If all of your CSS class names are dynamic, you can tell Userflow.js to ignore every class name with a filter that always returns false:
userflow.setInferenceClassNameFilter(() => false)Only do this if none of your class names are stable. Ignoring useful, non-dynamic class names makes it harder for Userflow to find 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-fordata-iddata-testiddata-test-idforidnameplaceholderrole
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.