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.
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.
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:
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.