All Collections
Highlighting elements with dynamic HTML attributes
Highlighting elements with dynamic HTML attributes

Learn how to highlight elements in this specific scenario.

Simay avatar
Written by Simay
Updated over a week ago

When you select elements to highlight for a tooltip/input/hotspot, UserGuiding can precisely locate them through the Custom CSS Selector option.

However, if your elements have dynamic HTML attributes, which means that the ID, class, etc., will change after each page refresh, our Custom CSS selector won't work properly.

In this case, you can try finding other HTML attribute options that aren't changing (this could be the case for the href, aria-label, etc.).

Finding and using an unchangeable HTML attribute

In this example, we will highlight an HTML element from the Gmail app by locating an attribute that is not dynamic.

  • Right-click on the element and click on inspect

  • Look for an attribute of your HTML element that doesn't change. In our example, we'll choose the aria-label attribute

  • Copy and paste it to the CSS selector field

  • Remove the quotes

  • Wrap the attribute with square brackets

  • Save & publish changes

  • You will see your changes will apply immediately, and it'll highlight the same element every time, even if it's changing dynamically.

You can try finding other unchangeable HTML attributes and use the same format: [attribute=value].

Important: If all your HTML attributes are dynamic, you can ask your developers to assign an attribute to your element so that you can highlight them precisely.

Did this answer your question?