Selecting and targeting elements
Tours and Hints tools are able to target elements (buttons, headers, menu items, etc.) in your application. In the editor, you can select the desired element by clicking on it.
This will attach the Product Fruits card to the element.
How it works
We use CSS selectors for identifying elements. CSS selectors are used for identifying elements inside the HTML DOM. They are standardized and widely used by developers or test automation creators.
A CSS selector might look like this:
#main > div.w3-responsive > table > tbody > tr:nth-child(1) > th:nth-child(2)
or like this:
body div.container-fluid div main div div.d-flex div:nth-child(1) h1
Basically, imagine it like road directions. You can read more about it here. This article expects that you have a brief knowledge of CSS selectors. Otherwise, talk to your developers.
Potential issues and solutions
The Product Tour and Context Help tools are using CSS selectors for finding elements in the site. You don't have to learn how to create selectors from scratch. The visual helper will help you to select the proper element by pointing and clicking at it.
There is a brief overview of typical selector problems and their possible solutions. Some of them need code changes.
Remember, try to talk to developers. They can find the best solution that fits your application.
The selector looks like this or there is some part like this:
The given class name doesn't look human coded, it is probably generated. Your application probably uses the Emotion library. You can configure it to format the class name with a prefix and a label. Please see the
labelFormat config option in the Emotion docs. So, it will turn to this:
Then, you change the selector to this:
This will tell us find
MYCSS_src--App--Box in the attribute called
class, it can be anywhere in it.