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 Tour and Hints tools use 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.

But sometimes it's difficult to guess the corrector or unique CSS selector. Not every developer decorates elements with ID attributes. Also, there are JavaScript libraries that generate random class names for elements. You will be able to find the element by them, but they can change over time and your tour or help will stop showing.

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 or will contain part of something like this: div.css-13snr3i

If the given class name doesn't look human-coded, it is probably generated. Your application could use the Emotion library for example. 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. It will turn to this: 

div.css-13snr3i-MYCSS_src--App--Box

Then, you change the selector to this:

div[class*=MYCSS_src--App--Box]

This will cause Product Fruits to look for MYCSS_src--App--Box in the attribute called class which should be found.