Element inference and dynamic class names

When you select elements in 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.setInferenceClassNameFilters(
  cls => !cls.startsWith('css-')
)

You can also use a negative lookahead regular expression that only matches strings that don't start with css-:

userflow.setInferenceClassNameFilters(/^(?!css-).*/)

See also userflow.setInferenceClassNameFilters 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.init line:

userflow.setInferenceAttributeFilters(
  'id',
  id => !id.startsWith('auto-')
)

Here we're telling Userflow to ignore all ids starting with auto-.

See also userflow.setInferenceAttributeFilters 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.

Got questions? We're here for you!

The best way to get help is to
We usually reply within 5 minutes
You can also send an email to support@getuserflow.com
We usually reply within a few hours