Excluding Dynamic Class Names, IDs and Attributes

When targeting elements in your app using Userpilot, they might have dynamically-generated attributes (classes, IDs, etc.) which is a common pattern in JavaScript frameworks such as React.js and Ember.js. These patterns are variable and might change on every page load or deployment.

As such, we won't be able to automatically determine the best CSS selector to use thus resulting in an unstable or an overly generic tag.
Some examples of such patterns:
.sc-1fzu5ml-0 // styled-component
.jss514 // React.js
#ember45 // ember.js

To help you in customizing Userpilot for more reliable targeting in these cases, Userpilot has provided a way to exclude these attributes through Regex. You can access it by navigating to the Exclude Lists under your Settings.

Tip: If Regular Expressions sound a bit foreign and overwhelming, you can delegate the exclusion to one of the techie people on your team.

Example frameworks and how to exclude them


Example: Excluding the auto-generated portion in the class with the format .jss514


Example: Using a regular expression to only match the stable portion of the class .sc-1fzu5ml-0


Example: Excluding the number in the Id #ember45

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.