Defining a Selector system
Last updated
Last updated
Selector systems allow you to influence how Adopt understands the internal rendering structure (DOM tree) within a web page. Adopt records multiple types of selectors to increase the chance of finding the element, but in some cases, additional information is required to ensure accuracy and reliability.
Administrators creating guides (Tours, tooltips, playlists) that depend on specific elements on a web page may find inconsistencies in element detection. The Adopt element selectors could collect inconsistent element data across employees and/or time, such as randomized session IDs across user sessions.
Launch the Chromium developer tools (F12) within MS Edge and Chrome browsers.
Click the icon within the Toolbar.
Select the required element with the mouse cursor.
From the right-hand Elements pane, you will see the related data to the selected element.
Evaluate if any attributes contain stable data (You should sample 5-6 elements as a comparison).
In the example below, the data-automation-id attribute is a candidate for this purpose
From the Management Console
Select the Space that you need to configure.
Choose Settings from the left-hand bar.
Choose the Selector system option from the sub-menu.
Here, you will see the specific options below:
Selector 'class only' - This selector is constructed only from CSS class names.
Ignored element IDs - This is the list of comma-separated identifiers of elements that should be excluded from the construction of the selector.
Ignored element class names - This is the list of comma-separated class names of elements that should be excluded from the construction of the selector.
Included element custom attribute names - This is the list of comma-separated custom attribute names of elements that should be included in the construction of the selector.
Dropdown list selector
The configuration may vary depending on the selector. However, each selector has helper text within the console to advise of the required syntax. For example, Include specific element attributes requires a comma-separated list, and the steps below show you how to apply them successfully.
Scroll to the section named "Included element custom attribute names."
Add the attribute names identified earlier to a comma-separated list (see below).
Click Save.
After making a Selector System change, be aware that this will only affect element selections that are made afterward. This will not update any existing element selectors configured within Adopt content (Tour steps, Tooltips)
We recommend the following settings should be applied to customers applying Adopt guidance within the following SaaS applications:
