Common Basic and Advanced Xpath/CSS Selectors

The following is a comprehensive list of commonly used selectors, ranging from basic to advanced, that I typically employ in my coding practices:

I. Basic

1. DIRECT CHILD
A direct child in XPATH is defined by the use of a “/”, while in CSS, it’s defined using “>”.
Example:
XPATH: //div/a
CSS: div > a
Note:
– A single slash ‘/’ anywhere in XPATH signifies looking for the element immediately inside the parent element.
– A double slash ‘//’ signifies looking for any child or nested child element inside the parent element.

2. CHILD OR SUBCHILD
If an element could be inside another or one of its children, it is defined in XPATH using “//” and in CSS by a whitespace.
For example:
XPATH: //div//a
CSS: div a

3. ID
An element’s id in XPATH is defined using: “[@id=’example’]” and in CSS using: “#”
Eg: xpath = //div[@id=’example’]//a ; css= div#example a

4. CLASS
For class, things are pretty similar in XPATH: “[@class=’example’]” while in CSS it’s just “.”
Eg: xpath= //div[@class=’example’]//a ; css=div.example a

II: Advanced

1. NEXT SIBLING
This is useful for navigating lists of elements, such as forms or ul items.
The next sibling will tell selenium to find the next adjacent element on the page that’s inside the same parent.
Let’s show an example using a form to select the field after username.
css=form input.username + input

2. ATTRIBUTE VALUES
If you don’t care about the ordering of child elements, you can use an attribute selector in selenium to choose elements based on any attribute value.
A good example would be choosing the ‘username’ element of the form without adding a class.
css=form input[name=’username’]

We can even chain filters to be more specific with our selections using multiple properties (name AND type)
css=input[name=’continue’][type=’button’]

3. CHOOSING A SPECIFIC MATCH
CSS selectors in Selenium allow us to navigate lists.
If we have a ul and we want to select its fourth li element without regard to any other elements, we should use nth-child or nth-of-type.
<p>Heading</p>
Cat
Dog
Car
Goat

If we want to select the fourth li element (Goat) in this list, we can use the nth-of-type, which will find the fourth li in the list.
css=ul#recordlist li:nth-of-type(4)

On the other hand, if we want to get the fourth element only if it is a li element, we can use a filtered nth-child which will select (Car) in this case.
css=ul#recordlist li:nth-child(4)

Note, if you don’t specify a child type for nth-child it will allow you to select the fourth child without regard to type.
This may be useful in testing css layout in selenium.
css=ul#recordlist *:nth-child(4)

3.1 Either Element1 or Element2

css=input#username, input#email

4. SUB-STRING MATCHES
CSS in Selenium has an interesting feature of allowing partial string matches using ^=, $=, or *=. I’ll define them, then show an example of each:

^= Match a prefix
css=a[id^=’id_prefix_’]
=> A link with an “id” that starts with the text “id_prefix_”

$= Match a suffix
css=a[id$=’_id_sufix’]
=> A link with an “id” that ends with the text “_id_sufix”

*= Match a substring
css=a[id*=’id_pattern’]
=> A link with an “id” that contains the text “id_pattern”

5. XPATH – USING TEXT OF ELEMENT

exact text match: //div[@class=’homepage-hero’]//a[text()=’Enroll now’]

cleaned-up text contains the string: //div[contains(normalize-space(.), ‘Enroll now’)]

6. XPATH – USING CONTAINS
Syntax: //tag[contains(attribute, ‘value’)]

//button[contains(@class, ‘action-btn’)]/span[contains(., ‘Review Instruments’)]
//div[@id=’navbar’]//a[contains(@class,’navbar-link’) and contains(@href,’sign_in’)]

7. XPATH – TRAVERSE UP TO PARENT:
To Its Parrent: xpath-to-some-element//parent::<tag>

TO any Parrent: xpath-to-some-element/ancestor::<tag>

8. XPATH – Preceding Sibling
Syntax: xpath-to-some-element//preceding-sibling::<tag>

9. XPATH – Following Sibling
Syntax: xpath-to-some-element//following-sibling::<tag>

10. CSS Selector Reference

Sources:
https://saucelabs.com/resources/articles/selenium-tips-css-selectors

https://www.w3schools.com/cssref/css_selectors.asp