Thanks for that but I keep going in circles when trying to figure out which selector to use. The circle leads me back to "I am not a technical guy". So please keep this in mind with my ramblings below.
From the reading that I have done via the link that you provided, these are my options. Can someone help me understand which one and why it is best to choose for LinkedIn? I would like to learn because I plan on building something similar for other sites.
-
Simple selectors: Match one or more elements based on element type, class, or id.
Attribute selectors: Match one or more elements based on their attributes/attribute values.
-
Pseudo-classes: Match one or more elements that exist in a certain state, such as an element that is being hovered over by the mouse pointer, or a checkbox that is currently disabled or checked, or an element that is the first child of its parent in the DOM tree.
-
Pseudo-elements: Match one or more parts of content that are in a certain position in relation to an element, for example the first word of each paragraph, or generated content appearing just before an element.
-
Combinators: These are not exactly selectors themselves, but ways of combining two or more selectors in useful ways for very specific selections. So for example, you could select only paragraphs that are direct descendants of divs, or paragraphs that come directly after headings.
-
Multiple selectors: Again, these are not separate selectors; the idea is that you can put multiple selectors on the same CSS rule, separated by commas, to apply a single set of declarations to all the elements selected by those selectors.
So you know, I keep getting errors when I try 'move and clip on element', 'set combobox by index', 'set combobox by value'.
I don't always get an error message at 'move and clip on element' at the search field but when I do it is Thread #1 : Failed to wait for element >CSS> #ember44 > input.
The error message that I get on Locations whether I use "move and clip on element" or one of the combobox is Thread #1 : Failed to wait for element >CSS> #ember1657 > form > :nth-child(1) > :nth-child(1) > :nth-child(2) > li-icon > svg.
I also tried to Inspect Element in Devtools in hopes that I can see the prefix that it is used but it doesnt mean anything to my non-techie butt.
Not sure but I might just use the below prefix to move the cursor to that location.
<button class="search-s-facet__name-wrap search-s-facet__name-wrap--pill button-secondary-medium-muted" aria-expanded="false" aria-controls="locations-facet-values">
<div class="search-s-facet__name-wrap-container search-s-facet__name-wrap-container--pill">
<div class="search-s-facet__name">
<span class="visually-hidden">Expand Locations facet</span>
<h3 class="search-s-facet__name t-16 t-black--light t-bold">Locations</h3>
</div>
<span class="search-s-facet__svg-icon svg-icon-wrap"><li-icon aria-hidden="true" type="caret-filled-down-icon" size="small"><svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet" class="artdeco-icon" focusable="false"><path d="M8.8,10.66L14,5.12A0.07,0.07,0,0,0,13.93,5H2.07A0.07,0.07,0,0,0,2,5.12L7.2,10.66A1.1,1.1,0,0,0,8.8,10.66Z" class="small-icon" style="fill-opacity: 1"></path></svg></li-icon></span>
</div>
</button>
