Xpath Writing in Selenium WebDriver

                    

Syntax for XPath: XPath=//tagname[@attribute='value']

Contains(): ‘contains’ operator is to check for any matching text available in the attribute value.

//a[contains(text(),’Create’)]  (OR) //a[contains(.,’Create’)] 
//a[contains(string(),’Create’)]

//a[contains(@id,’signup’)]

//a[contains(@id*,'foo')]

 

String(): String function is used to covert any type of datatype in string. Refer above table for xpath
//a[string(text())=’Create’]

 

Last(): This function find last element from the list of elements.

(//input[@type='checkbox'])[last()]

(//input[@type='checkbox'])[last()-1]

Position(): This function is used to find specified positioned element from the list of elements.

(//input[@type='checkbox'])[position()=3]

//input[@type='checkbox']//a[position()>=3]

//input[@type='checkbox']//a[position()<=3]

//input[@type='checkbox']//a[position()>3]


//input[@type='checkbox']//a[position()=3] 

Fetching last 5 record

//input[@type='checkbox']//a[position()>=last()-4 and position()<=last()]

 

Index: This function is same as position() function where index number can be mentioned to get specific element.


 (//input[@type='checkbox'])[1]

//input[@type='checkbox']//a[1]


 
Starts-with():

//a[starts-with(@id,’link-sign’)]

//a[(@id!='foo') and starts-with(@id,'foo')]

//input[starts-with(@id, 'xyz') and contains(@id, 'abc')]

Ends-with():

ends-with function is available for Xpath 2.0 and usually browsers lib uses xpath 1.0

//a[ends-with(@id,’link-sign’)

Substring():

Verify google logo is displayed or not in google homepage (String position start from 0)

//div[substring(@title, string-length(@title) - 2) = 'gle']

//input[ends-with(@id,'name)]

 

Substring-before():

//div[substring-before(text(), ':') = 'Username']

 

Substring-after():

//div[substring-after(text(), ':') = 'Username']

 

Following: Selects all nodes in the document after the closing tag of the current node

//span[text()='Opportunity Name:']/following::input

//span[text()='Opportunity Name:']/following:://input

Following-sibling: Selects all siblings nodes after the current node

//span[text()='Opportunity Name:']/following-sibling::span[1] 
//span[text()='Opportunity Name:']/following-sibling::*/span[1] 

Preceding: Selects all nodes in the document before the current node

//span[text()='Opportunity Name:']/preceding::span

//span[text()='Opportunity Name:']/preceding:://span

Preceding-sibling: Selects all siblings elements before the current node
//span[text()='Opportunity Name:']/preceding-sibling::span

//span[text()='Opportunity Name:']/preceding-sibling:://span

To grab all the LIs between bob And roger.
//ul/li[preceding-sibling::li='bob' and following-sibling::li='roger']

Parent(/..): Selects the parent elements of the current node
//span[text()='Opportunity Name:']/parent::div

Child: Selects all children elements for a current node
//table[text()='Opportunity']/child::tr

Ancestor: To find an element on the basis of the parent element.
//div[@class='search']/ancestor::div  
  

Ancestor-or-self: Selects all ancestors for a current node including the current node itself
//table[text()='Opportunity']/ancestor-or-self::*[self::input or self::select or self::span or self::div]

Normalize-space():: To remove unwanted space or new line from string.                    //div[(normalize-space())='Accidental']/div[contains(@class,'price-amount')]//div[(normalize-space(text()))='Accidental']/div[contains(@class,'price-amount')]//a[namespace-uri()='http://www.w3.org/1999/xhtml'][text() = 'Public Profile']

Descendant: (// is just an abbreviation for the descendant:: axis)
Selects all descendants children and grandchild for a specified node

//table/descendant::td[@role='checkbox']
//div[@class='search-container']/descendant::select[@name='language']

Descendant-or-self:

Selects all descendants children for a specified node including the current node itself

//table[text()='Opportunity']/descendant-or-self::*[self::input or self::select or self::span or self::div]

Not: 

//div[not(contains(@class,'search'))]

//div[not(@class,'search')]


/input[@placeholder='Model' and not(@disabled)]

And: AND operator is conditional operator, where it will find the element when 2 or more condition are true.
//div[@class='search' and @id='searchinput']

OR: OR operator is conditional operator, where it will find the element when any of the condition are true.IF both the condition are true then it will show 2 result.
//div[@class='search' or @id='searchinput']

 

Concat(|): To combine two Xpaths statements into a single Xpath statement using  '|'

//div[@class='search']|//div[text()='Logout']

//*[contains(@class,'province')]//span|input 

//div[concat(@class,@value)='search']

One Of The Span:

//li[.//span[text()='syam'] or .//span[text()='pakala']]


Both Of The Span

//li[.//span[text()='syam'] and .//span[text()='pakala']] 

Count:

count(//*[contains(text(), 'J K.')])
count(//text()[contains(., 'J K.')])

 

Text():

//div[text()='Logout'] 

 

Not Equal(!=): "!=" Not equal to operator is used to exclude any specific element.

//div[text()!='Logout']

 

Translate:

This function is used to ignore case. So if the letter is in lower or upper case, we can ignore the case and find out the elements.

//*[translate(text(),'G','g')='google offered ']

 

MOD: MOD operator is modulus operator. In below example, it will find the list element which start from 2 and next element will be of 4th place. So if you write Mod 3=1 then it will find the element from first and next element will third and so on.

 

//input[@type='checkbox']//a[position() mod 4=2]


 

Non-Breaking Space in XPath: 

non-breaking space (nbsp) issue while automating web applications. Using \u00a0 character is a non-breaking space character that can be helped to prevent consecutive whitespace characters from collapsing into a single space.

//a[text()='Privacy Policy'] will be //a[text()='Privacy\u00a0Policy']

//a[text()='Privacy Policy'] will be //a[text()='Privacy\u00a0Policy'] 

 

String-length(): Returns the length of the string specified by the context node.

//input[string-length(text())>10)]

//input[string-length(@id)=10)]

 

Getting Text from Parent element only:

//div/text()

 

Round: Functions for rounding numbers in your data source.You can round to the nearest integer (round).

//input[text()='10.76']

(OR)


//input[round(text())='11']

 

Floor: Functions for rounding numbers in your data source. Always round down (floor)

//input[text()='10.735']

(OR)


//input[floor(text())='9']


 

 

Element Identification with CSS Selector: 

CSS selectors typically offer better, faster, and more reliable performance than XPath in most web browsers.


1. Element Selector  css=htmltag  First element with given html tag.

 EX:  input

 

2. ID:

 EX:  #ModalPopupDiv

 

3. Class:

 EX:  .ModalPopupreff 

 
4. Css Inner Text:

EX: a:contains('Log Out') - Means Contains
 div[innerText='textname']                                                                                                                             div[textContent='textname']

 

5. Combining selector Class or ID 
 css=thmltag.class  css=htmltag#idname

EX: div.ModalPopupreff

         div#ModalPopupDiv

 

6. Combination selectors- other attributes
css=htmltag[attribute*="value"]

 EX:  Full attribute value: div[id='ModalPopupDiv']

           Contains '*': div[id*='PopupDiv']

           Starts with '^':  div[id^='Modal']


           Ends with '$': div[id$='Div']


           Not Contains: div[id*='PopupDiv']:not([id*='Modal'])

7.With Multiple Attributes

   EX: div[id='ModalPopupDiv'][class='ModalPopupreff']

 

8.  Direct Child Selectors

  EX: div>label>span[id=ModalPopupDiv]

9. Sub-child (Descendant):
  EX: body input

 

10. Css with position or pseudo class - child

  EX:
span[id='ModalPopupDiv']:first-child

span[id='ModalPopupDiv']:last-child

span[id='ModalPopupDiv']:nth-child(n)

span[id='ModalPopupDiv']:nth-last-child(n)

 

11. Css with position or pseudo class - type of child

  EX:
span[id='ModalPopupDiv']:first-of-type
span[id='ModalPopupDiv']:last-of-type

span[id='ModalPopupDiv']:nth-of-type(n)

 

12. Css with not

 EX: input:not(.required)
input:not([type=email])

button:not([disabled])
input:not([type=radio]).not(.required)

13. Css with only-child (It selects the element which is only child of it parent)
input:only-child

 
14. Css with Adjacent Sibling (select an element that follows another element)
#ModalPopupDiv + input

 
15. Css with Tilde ~ for General Sibling (select an sibling element that not necessarily an immediate)
span ~ input

 

16. Css with OR

input[type='submit'],input[type='login']

 

17. Css with AND

input[type='submit'][class='button']

 

18. Css with pseudo class

  EX:
input:checked

button:enabled

button:disabled

span:empty

div:hover

div:only-of-type

Find Xpath from Active form:

Form:
//div[contains(@class,'active')]//form
Label Name:
//div[contains(@class,'active')]//form//label[./span[contains(text(),'Account Name')]]
Input Box:
//div[contains(@class,'active')]//form//label[./span[contains(text(),'First Name')]]/parent::*/input
Select Box:
//div[contains(@class,'active')]//form//label[./span[contains(text(),'Lead Status')]]/parent::*/select
RTF Box (Description):
//div[contains(@class,'active')]//form//label[./span[contains(text(),'Description')]]/parent::*/textarea
Saved Data:
//div[@class='active oneContent']//form[contains(@class,'forceDetailPanel inlineEditEnabled')]//div[contains(@class,'labelCol')][./span[text()='Account Name']]/..//div[@class='dataCol readonly']/span

Finding Cell values based on Column Name in Web Table:

//table/tbody/tr/td[count(//table/thead/tr/th[.="$columnName"]/preceding-sibling::th)+1]
To get the column position in the Table:
count(//table/thead/tr/th[.="$columnName"]/preceding-sibling::th)+1
To get Cell Date:
 //table/tbody/tr/td[position]

//table[@id='AccountTableDivTableID']/tbody/tr/td[count(//table[@id='AccountTableDivTableID']/thead/tr/th/div[.='Account Name']/../preceding-sibling::th)+1]

//div[contains(@id,'_RelatedActivityList_body')]/table/tbody/tr/td[count(//table/tbody/tr/th[.='Name']/preceding-sibling::th)]

Salesforce: UI Automation XPath Template

1. If the Field you need appears to the right of the label,(//text()[normalize-space()='Label>']//ancestor::td[contains(@class,'labelCol')])[1]/following-sibling::td[1]//TagName>[Attributes]

OR

2. If the Field you need appears to the left of the label (not unlikely especially with Checkboxes),
(//text()[normalize-space()='Label>']//ancestor::td[contains(@class,'labelCol')])[1]/preceding-sibling::td[1]//TagName>[Attributes]

OR

3. If neither work, we might be dealing with a field and label that belong to the same containing element. This is rare in standard Edit and Details Pages, but not uncommon across the application
(//text()[normalize-space()='Label>']//ancestor::td[1])//TagName>[Attributes]

Close to 95% of the Objects found on the Edit & Details Pages (Excluding Tables/Related Lists) follow Template 1.

Usage:

For the xpath to be functional in your scripts all you need to do is
1. Replace Label> with the Complete Label adjoining the field you need. This is Mandatory
2. Replace //TagName>[Attributes] with specific Tag Names and Attributes of the Field. This is typically one of the following unless the field is a text display (in which case remove this part of the template)

    Text Fields: //input[@type=’text’]
    Editable Check Boxes: //input[@type='checkbox']
    Check Box Images: //img[contains(@class,'check')]
    Look Up Icons: //img[contains(@class,'lookupIcon')]
    Text Areas: //textarea
    Drop Downs: //select
    Links: //a
    Buttons : //input[@title='title attribute' and @class='btn']
                  //button[text()='button name' and (@type='button' or @type='submit')]
    Other Images: //img

If the fields are more complex, you can always add additional filters to the final element using any of its stable attributes. Easy Breezy.
Examples:

1. If you need the Account Name Text Box, the xpath will be:(//text()[normalize-space()='Account Name']//ancestor::td[contains(@class,'labelCol')])[1]/following-sibling::td[1]//input[@type='text']

2. If you need the text displayed against Account Owner (not a text box), the xpath will be:(//text()[normalize-space()='Account Owner]//ancestor::td[contains(@class,'labelCol')])[1]/following-sibling::td[1]
(//text()[normalize-space()='Phone']//ancestor::td[contains(@class,'labelCol')])[1]/following-sibling::td[1]/div

3. If Account Name has a Look Up icon you need to use, the xpath will be:(//text()[normalize-space()='Account Name']//ancestor::td[contains(@class,'labelCol')])[1]/following-sibling::td[1]//img[contains(@class,'lookupIcon')]

4. If you need the Type drop down box, the xpath will be:(//text()[normalize-space()='Type']//ancestor::td[contains(@class,'labelCol')])[1]/following-sibling::td[1]//select

5. If you need the Description textarea box, the xpath will be:(//text()[normalize-space()='Description']//ancestor::td[contains(@class,'labelCol')])[1]/following-sibling::td[1]//textarea

6. If you need the Checkbox with left side label, the xpath will be:(//text()[normalize-space()='Active']//ancestor::td[contains(@class,'labelCol')])[1]/following-sibling::td[1]//input[@type='checkbox']
   If you need the Checkbox with right side label, the xpath will be://label[text()='Assign using active assignment rules']/preceding-sibling::input[@type='checkbox']

7. If you need the xpath for Start Date link, the xpath will be:(//text()[normalize-space()='Start Date']//ancestor::td[contains(@class,'labelCol')])[1]/following-sibling::td[1]//a

8. If you need the xpath for Task Subject image, the xpath will be:(//text()[normalize-space()='Subject']//ancestor::td[contains(@class,'labelCol')])[1]/following-sibling::td[1]//img

9. If you need the xpath for New button, the xpath will be://input[@title='New' and @class='btn']
//input[@title='New' and (@type='button' or @type='submit')]

If you need the xpath for Save button, the xpath will be:
//td[@id='topButtonRow']//input[@title='Save' and @class='btn']
//td[@id='topButtonRow']//input[@title='Save']
//td[@id='bottomButtonRow']//input[@title='Save' and @class='btn']
//td[@id='bottomButtonRow']//input[@title='Save']

Label based Xpath:Input Field and Check Box:
EX: //input[@id=(//label[text()="Account Name"]/@for)]

Drop Down Field:
EX: //select[@id=(//label[text()="Type"]/@for)]

Rich Text Field:
EX: //textarea[@id=(//label[text()="Description"]/@for)]

Button:
EX: //button[@id=(//label[text()="Save"]/@for)]
OR
//input[@title='New' and (@type='button' or @type='submit')]

LookUp Image:
EX: //input[@id=(//label[text()='Account Name']/@for)]/following-sibling::a/img[contains(@class,'lookupIcon')]
OR
//input[@id=(//label[text()='Account Name']/@for)]/following-sibling::*//img[contains(@class,'lookupIcon')]

Link:
//input[@id=(//label[text()='Close Date']/@for)]/following-sibling::*//a