CSS Selector Primer

A CSS Selector is a way of "finding" an element (or multiple elements) on a web page. Whenever you "point to" an element on the page with our WYSIWYG tools, Conductrics "writes" a selector that will find that same element later, when your test is actually running.

Many of the features of Conductrics Express are based on Selectors, for instance:

When setting up a test variation in WYSIWYG Mode, Conductrics generates selectors for the elements you "point to" for your page edits.
When setting up a Goal / Conversions that gets automatically triggered when the visitor clicks on a button or other element, a selector is used to tell Conductrics how to find the button/element.
When setting up a View-State that triggers when the visitor when a particular element gets added to the page or becomes visible, you provide a Selector to describe the element to "watch".
When using the "Wait For" option for Custom JS in an Express test/agent, you provide a Selector that Conductrics should wait to exist on the page before proceeding to execute your JS.

📘
CSS Selectors are a complex topic, too much to cover properly here. There are lots of introductions online, for instance this MDN Guide or this Web.dev Guide.

What's In a Selector?

The most common things you might find in a selector string are:

A leading # sign, which is used to match an element on its id attribute. For instance, if your page contains a button with id="add-to-cart", you could use #add-to-cart as a selector.
A leading dot, which is used to match an element on one of its CSS classes. For instance, if your page contains a button with class="btn btn-primary", you could use .btn or .btn-primary to find it. Of those two, we as humans can see that .btn-primary is more specific, and therefore probably "better". Careful though, the selector could also match another button with class btn-primary, if it were to be added later.

You're also pretty likely to see:

Square brackets, to match on elements that have a given attribute value, such as [src="logo.png"] to find elements that load a given image file, or [href="/cart"] to find links or other elements that lead to the "cart" page.
A HTML tag name alone, which matches that type of element. For instance, the selector h1 alone would match the first <h1> element in the page (probably a useful selector), or img alone would find the first image that happens to appear on the page (probably less useful).

You can combine the above kinds of selectors together to get more specific:

You can concatenate the above parts together, such as img.hero-image[src="hero.png"], which says find an image that has CSS class "hero-image" and also shows the image file "hero.png".
You can use spaces to indicate that you want to find elements within other elements. For instance, #hero-area img[src="hero.png"] would find an image that displays the logo.png file, but only if it appears somewhere within a containing element with an id of "hero-area".
You can also use the > caret symbol to indicate that one element must sit directly within another. For instance, #hero-area > img would match any image that is a direct child of the hero-area container, but would not match images that are "grandchildren" or deeper "descendants".

What Makes a Great Selector?

Crafting an appropriate selector can be "more art than science", in that there are usually many different selector strings that could be written to target a given element. Often, the nuance is in thinking about what would happen should the page's structure change slightly in the future.

For instance, selectors that are too specific (specifying each of the element's parents all the way up to the root body element) might be too "brittle", meaning that if the page were to change even slightly, the selector might not match anything anymore. But selectors that aren't specific enough might have the opposite problem, for instance a "vague" selector such as button.btn might match the button you want today, but might match a different button that gets added to the page tomorrow.

Typically, if you can get at least one # in the selector string (or some other part that you expect to remain "unique"), you can feel pretty good about it.

📘
Feel free to contact Conductrics with any selector-related brain teasers. :)