​
Overview

Dynamically generated class names, IDs, and attributes in JavaScript frameworks like React.js and Ember.js can hinder Userpilot’s ability to target elements accurately. This article guides users on configuring Userpilot to exclude such dynamic attributes using regular expressions, ensuring more reliable element targeting. These patterns are variable and might change on every page load or deployment. Some examples of such patterns : 
.sc-1fzu5ml-0 // styled-component
.jss514 // React.js
#ember45 // ember.js
To improve targeting, Userpilot lets you exclude attributes using Regex in the Exclude Lists under Settings. You can access it by navigating to the Exclude Lists under your Settings.

​
Example frameworks and how to exclude them

Material-UI Example: Excluding the auto-generated portion in the class with the format .jss514 
jss(.+?)$

css(.+?)$
Styled-components Example: Using a regular expression to only match the stable portion of the class .sc-1fzu5ml-0 
sc-(.+?)-(.+?)buffer_3lt;
	

^[a-zA-Z]{6}buffer_4lt;
Ember Example: Excluding the number in the Id #ember45 
ember(.+?)$