CSS selectors for the maintenance of your User Journey Scenarios

Most User Journey actions apply to elements present in your web pages, that you need to accurately pinpoint. In the following HTML code snippets, there are for example three elements: a division <div>, a paragraph <p> and a link <a> (see Vocabulary).

<div>
    <p>
        Click <a href="page.html" class="myClass" id="myId">here</a>
    </p>
</div>

To accurately target an element, Dareboost provides different selection modes: TAG (for example “p”), IDENTIFIER ("myIdentifier"), NAME (used in web forms), XPATH and CSS.

CSS selection is the most versatile and comprehensive element selection mode within a web page (apart from XPATH, which is powerful but also complex, and not very used by web professionals). A CSS selector can, on its own, reproduce nearly all the other selection modes: TAG, IDENTIFIER, NAME and go even further.

The purpose of this section of documentation is to familiarize you with the possibilities offered by this selection method.

Using Chrome DevTools

Our service is based on Chrome, a popular browser. To test your CSS selectors as in Dareboost, we invite you to open the relevant page in Chrome, then use the developer tools integrated in this browser using Ctrl + Shift + I on Windows, or  +  + I on macOS.

The HTML code is visible via the “Elements” tab (NB: this is, actually, the Document Object Model, or DOM. It represents HTML source code of the page as understood by the browser, and after the execution of the page JavaScript code that may have modified it).

Elements on hover

When hovering over an element in the page, it will appear highlighted in the “Elements” tab. Similarly, by hovering over an element in the “Elements” tab, it will be highlighted in the web page.

Selectors search

In Dev Tools, using Ctrl + F displays a search bar. You can enter a CSS selector in this search bar to check it. The number of results obtained will be indicated in the search bar. The first found element will be highlighted in the code:

Search bar in Chrome devtools

Copying browser-generated selectors

By right-clicking on an item in the “Elements” tab, you can choose “Copy”, then “Copy the selector”. A CSS selector will be copied to your clipboard, which you can use in Dareboost.

Be careful though, this selector will often be very specific, and therefore not very robust to change. You may need to upgrade this selector regularly. However, it can be used as a basis for determining a more appropriate selector.

Back to Table of Contents