Mastering XPath and

CSS selectors
/ Mohammad Monfared

1
1. XPath Basics

● Syntax
● Absolute and Relative
● and / or
● Parents and Children
● Index
● Nested locators

2
Syntax:
Absolute XPATH

/html/body/div[3]/div[2]/form/fieldset/input[9]

Relational XPATH
// input [name=‘Options’]

4
// tag [ condition1 ] # Simple

// tag [ condition1 and condition2] # ‘AND’ logic

// tag [ condition1 or condition2] # ‘OR’ logic

// tag [ (condition1 or condition2) and condition3] # ‘AND’ + ‘OR’

// tag [ condition1 ] /.. #Parent

// tag [ condition1 ] / tag [ condition2 ] # Child

// tag [ condition1 ] // tag [ condition2 ] # Search through children

5
// tag [ condition1 ] [index] #Nth child (of its parent) with this locator

( // tag [ condition1 ]) [index] #Nth element with this locator

// tag [ tag [ condition1 ] ] # Nested

// tag [ .// tag [ condition1 ] ] # Nested

6
2. XPath Functions

● contains() ● string-length()
● starts-with() ● round()
● position() ● floor()
● last() ● not()
● count() ● substring-before()
● normalize-space() ● substring-after()
● translate()

7
contains()
// * [ contains(text(), 'string')]

// * [ contains(text(), 'string') and @id='some-id']

8
starts-with()
// * [ starts-with(text(), 'string')]

9
position()
// * [ position() = 3] //starts from 1

10
last()
// * [ last()]

11
count()
// tbody [ count (.//tr) = 7 ]

12
normalize-space()
// *[ normalize-space ( text() ) = 'Option1' ]
// *[ normalize-space (@id) = 'Option1' ]

13
translate()
// *[ translate (text(), 'OPTION', 'option') = 'option1' ]

14
Combine normalize-space() and translate()

// *[ normalize-space (translate (text(), 'OPTION', 'option') ) = 'option1' ]

15
string-length()
// *[ string-length (text()) > 30 ]
// *[ string-length (@id) = 4 ]

16
round()
// td [ text() = '53.76' ]
OR
// td [ round (text()) = '54']

17
floor()
// td [ text() = '53.76' ]
OR
// td [ floor (text()) = '53']

18
 not()
// * [ type() = 'radio' and @id='femail']
OR
// * [ type() = 'radio' and not (@id=‘male')]

19
substring-before()
//* [ substring-before ( text () , ':') = 'Password' ]

20
substring-after()
//* [ substring-after ( text () , ':') = 'Password' ]

21
3. XPath Axes

● parent ● following
● ancestor ● following-sibling
● ancestor-or-self ● preceding
● child ● preceding-sibling
● descendent
● descendent-or-self

22
//* [@id=‘abc’] / parent :: *[@id=‘def’] 23
//* [@id=‘abc’] / ancestor :: *[@id=‘def’] 24
//* [@id=‘abc’] / ancestor-or-self :: *[@id=‘def’] 25
//* [@id=‘abc’] / child :: *[@id=‘def’] 26
//* [@id=‘abc’] / descendant :: *[@id=‘def’] 27
//* [@id=‘abc’] / following :: *[@id=‘def’] 28
//* [@id=‘abc’] / following-sibling :: *[@id=‘def’] 29
//* [@id=‘abc’] / preceding :: *[@id=‘def’] 30
//* [@id=‘abc’] / preceding-sibling :: *[@id=‘def’] 31
4. CSS Selectors

32
Advantages
1. CSS selectors typically offer better, faster, and more reliable performance than
XPath in most web browsers.
2. All the JS-based test framework like Cypress use CSS selectors

3. It is necessary to use CSS locators when we are using the JS executor to locate
elements in Selenium/Appium.

4. To perform useful functions within selectors, such as ‘select all checked

checkboxes’ or ‘select all visited links’, we need to use CSS pseudo-functions.

5. An essential fundamental for frontend developers.

33
Basic Syntax

tag [ AttrName = ‘AttrValue’]

Sample expressions:
input[ id = ‘fname’]
button[ value = ‘submit’]
34
ID & Class Selectors
tag # ID-value
input # fname

tag . Class-value
div . tooltip

35
 Combination
tag # ID-value [ AttrName = ‘AttrValue’]
tag # ID-value . Class-value

AND (for attributes of a element)

tag # ID-value [ Attr1Name = ‘Attr1Value’] [ Attr2Name = ‘Attr2Value’]

OR (select any element of given expressions

tag1. Class-value , tag2 . Class-value

36
 Sub-string Match
<input type="checkbox" id="moption“>

‘ ^ ‘ Starts with input[id^=‘mop’]

‘ $ ‘ Ends with input[id$=‘tion’]
‘ * ‘ Partial text input[id*=‘opt’]
Can be combined as well:
input[id*=‘opt’][type$=‘box’]
37
Child/Descendant
Direct child
tag # ID-value>tag # ID-value

Descendant (Child and sub-child)

tag # ID-value tag # ID-value

Next-sibling (Adjacent)
tag # ID-value+tag # ID-value 38
Pseudo Class - Child
First child
tag # ID-value :first-child

Last child
tag # ID-value :last-child

Select by Index
tag # ID-value :nth-child(index)
Select by Index 39

tag # ID-value :nth-last-child(index) 39

Pseudo Class – Type of child
First child of its type
tag # ID-value>tag # ID-value:first-of-type

Last child of its type

tag # ID-value>tag # ID-value:last-of-type

Nth child of its type

tag # ID-value>tag # ID-value :nth-of-type(index)
40

40
Pseudo Class
<tag>:checked Selects checked <tag> elements (e.g. input)
<tag>:disabled Selects disabled <tag> elements (e.g. button)
<tag>:enabled Selects enabled elements (e.g. button)
<tag>:empty Selects element that has no children
<tag>:hover Selects <tag> elements on mouse hover
<tag>:only-of-type Selects <tag> element that is the only <tag> of its parent
<tag>:only-child Selects <tag> element that is the only child of its parent
<tag>::placeholder Selects <tag> element with the place holder attribute specified
<tag>:invalid Selects all <tag> with invalid value (e.g. input)
<tag>:valid Selects all <tag> with valid value (e.g. input)
<tag>:link Selects all unvisited links
<tag>:visited Selects all visited links 41

🔗 More pseudo classes / Mohammad Monfared

Follow me for more like this