When you highlight an area in your web platform while creating a tooltip or an input field, UserGuiding stores CSS selectors based on the element you’ve selected. In some cases, our algorithm can’t find the highlighted element, and you’ll receive the “Selected element is hidden” error message.
In this article, we’ll explain the reasons for getting this error message and provide you solutions.
Why can’t the tooltip find the selected element even when I am at the correct URL?
The reason for your specific use-case might be one of the following:
The selected area is not present on the current UI while you attempt to preview the step.
Since the page has more than one element that you select, the algorithm can’t find the element you highlighted among several identical elements.
A particular condition should be met for the element you’ve selected to be shown. (i.e., opening the dropdown menu)
How to utilize “Wait until element is present” functionality?
Some elements in a UI of a web platform require more time to load than other elements. If you’ve selected such an element while creating a tooltip or an input field, you should set your guide to wait until the selected element is present on the current UI.
To achieve this, open the Chrome extension and go to the corresponding tooltip/input field step. Click on the “Advanced” tab and check the “Wait until element is present” box. Here, you can set the waiting time and designate the following action if the element still cannot be found.
How to utilize Custom CSS Selector to differentiate a particular element from identical ones?
You can overwrite CSS selectors found by UserGuiding and find the particular element you want to highlight with Custom CSS Selector. To do that, hover on the element that you want to highlight and open the context menu. Then, click on Inspect. There you’ll see certain characteristics like ID and class of the selected element.
Once you designate the selector that you want to use, open the step in the Chrome extension. Enable Custom CSS Selector and type the selector to the opening input field. If you are not sure how to do it, you can check Custom CSS Selector Examples.
How to utilize “Proceed to Next Step on click of” functionality?
When a tooltip is created, users can either click on a button or on the element in your UI to proceed to the next step.
Sometimes, a particular condition should be met for the element you’ve selected to be shown. For example, if an element is located within a dropdown menu, the guide cannot find it unless the end-user is directed to open the dropdown menu. To achieve this, the tooltip should be set to proceed to the next step when the end-user clicks on the element. Check this article for more information.