Target element CSS selectors

What are CSS selectors

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 at [https://www.w3schools.com/cssref/css_selectors.asp].

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.

But sometimes it's difficult to guess the right and 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.


#1

Developer needed The selector looks like this or there is some part like this: div. css-13snr3i

The given class name doesn't look like 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:

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

Then, you change the selector to this:

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

This will tell us find 'MYCSS_src--App--Box' in the attribute called 'class', it can be anywhere in it.


#2

The selector looks like this or there is some part like this:

div.data-grid__table___jdHGx

This can be solved by the same solution as the previous issue. Change the selector to this:

div[class*=data-grid__table]