selenium xpath/CSS patterns

In this post, mostly we will be talking about relative XPATH patterns (find elements based on some conditions) and their similar CSS implementation.

NOTE: Refer Absolute and Relative XPATH for xpath types.

XPATH and CSS both are quite similar in implementation, just different in syntax wise.

Element with attribute(A) with value (V) :

Any element on the DOM having attrbute-A with Value-V irrespective of the element type

xpath: //*[@A = 'V']
CSS: [A = 'V']

With tag name(T) and attribute(A) with out value(V):

All the Elements-T with attribute-A, doesn’t matter what is the attribute value

xpath: //T[@A]

With tag name(T) and attribute(A) with value(V):

Element-T having attribute-A with value-V

xpath: //T[@A= 'V']
//T[@A= 'V'][@A1= 'V1']

CSS: T[A= 'V']
T[A= 'V'][A1= 'V1']

xpath: //T[contains(@A, 'V')] or //T[contains(text(), 'V')]
CSS: T[A*= 'V']

xpath: //T[starts-with(@A, 'V')] or //T[starts-with(@A, 'V')]
CSS: T[A^= 'V']


Navigate to this demo site

We can use any of the following xpath to identify the FullName text field

xpath: //input[@id='username'][name='uname']

CSS selector shortcuts for class or id attributes

For elements with id

css : #
e.g - input#username

For elements with class

css: .
e.g - input.commit

Identify input tag (element) with both id and name attribute

xpath: //input[@id='username' or name='uname']

Note: identify input tag (element) with either id or name attribute that matches.

If we find xpath with //input[type='text'], then may be getting no. of text boxes on the page and selenium may be confusing which one to act upon.

If the attribute value changes partially each time we navigate to page, that time
//input[contains(@id,'usern')]   //partial attribute value

let’s say, on the same page, we need to identify the link “Testing Basics!” and can’t remember whole text,

then we can use – //a[contains(text() , 'Testing')]

Note: text is not an attribute, so mentioned as method without @, this will search all the links on the web page with link text contains the word Testing.


From the above screenshot, under div, we have 2 elements label and input.
so if we want to access the input(username) field of label(Full Name), we can use –

The above will return the text box below to the label “Full Name”


If we have the input field known, and we want to find out the label for the text box, then use

xpath with table:

on the demo site

To access the 2nd row and 2nd column data: i.e value is GUI from the above table
xpath: .//table[@id='table01']//tr[2]//td[2]
css: #table01.2.2  or #table01 tr:nth-child(2) td:nth-child(2) or  table[@id='table01'].2.2

To check the elements that are disabled on the web page

To find elements (radio buttons or check boxes) that are checked

InnerText and TextContent


Content posted is based on learning or working experience,
Share the post with others if find useful,
Any queries?, leave comments or discuss on our, Thanks!

1 Response

  1. December 24, 2016

    […] so the xpath is: Either .//*[@id=’form1′]/fieldset/div[1] or .//form[@id=’form1′]/fieldset/div[1] Let’s understand this: .// selects current node @id=’form1′ – all element attributes are precedent by a sign @ and value in between single quote. .//[@id=’form1′] finds the occurrence of an element with “id=form1” (* stands for any kind of element input/h1/table/form tags etc), then normal absolute path follows like fieldset and then the 1st div element where Full Name textBox resides. //form[@id=’form1′] will only look for a tag named form with id=’form1′ To find an element based on some conditions (relative xpath), refer css/xpath patterns. […]

Leave a Reply

Your email address will not be published. Required fields are marked *