Selenium - XPath and CSS Selector

xPath

To identify the different web elements like buttons, Text Field, Drop Down, Hyperlink, radio button etc in selenium is major task for wrinting the test script. xPath is the way we can easily identify these web elements if other selenium locators like ID, Name, Class and Text name does not work.

xPath can be viewed as a way to navigate round XML documents. In xPath the starting point is called context node.

There are two types of xPaths: Absolute and Relative xPath.

Absolute xPath: Absolute xPath starts with the root node or a forward slash (/).

Relative xPath: Relative xPath is one where the starts from the node of our choice. It starts with double forword slash (//).

Advantage of Relative path is that, in case of relative xpath you don't need to write long xpath start from bigining of the node. you can start from middle.

Disadvantage of Relative path is that, it takes more time to identify the elements.



Relative xPath using single attribute:

xPath=//input[@id='FirstName']
xPath=//input[@name='first_name']

Relative xPath using double attribute:

xPath=//input[@id='FirstName'][@name='first_name']

Relative xPath using Contain attribute:
Contains Keyword : Most of the times tester face issues when the locator’s properties are dynamically generating. Let’s take the example of my profile image on this same page at the right side of the screen and assume that the ‘src’ of the image  is dynamically generating. The html code of the div looks like this



The only thing we are sure here is that the text ‘Profile’ will always be included in the src of this image, so we can utilize this hint in our xpath like this: //img[contains(@src,’Profile’)]

Relative xPath using Start-with attribute:
Starts-With Keyword : Now let’s take another example of the Linked In image on this same page at the right side of the screen just under the My Profile section and again assume that the ‘src’ of the image  is dynamically generating. The html code of the div looks like this:

alt="Visit Us On Linkedin" style="border:0px;" src="http://toolsqa.com/wp-content/uploads/2014/04/linkedin.png">

The only thing we are sure here is that the text ‘Visit Us On Linkedin’ will always be included in the ‘src’ of this image, so we can utilize this hint in our xpath like this: //img[starts-with(@alt,’Visit Us On Linkedin’)]

Relative xPath using Text attribute:
Text Keyword : Take another example of the text of my name “Lakshay Sharma’ on this same page at the right side of the screen just under the My Profile section. The html code of the div looks like this:

we can write the xpath as below, on the basis of above script.

xPath = .//*[text()='LAKSHAY SHARMA']

CSS Selector

CSS (Cascading Style Sheet) is another easy way to identify the web elements. CSS has more advantage than xPath and it is faster & simpler than xPath.



We can use dot (.) to refer class:
for example css= input.myName or css=.myName.

We can use Hash (#) to refer id:
for example css= input#FirstName or css=#FirstName.

In case of ther attribute like name:
css=input[name='first_name']

In case of more than one attribute:

css will be for above script - css="div[class='ajax_enabled'] [style='display:block']"