How to create xPath & Css path Manually

For Video Tutorial : Move on Youtube Channel

Note : Select the playlist as per your need & move with number sequence


There are Two types of xpath :-

Absolute Xpath :- It is the most straight forward way of locating a web element but the demerit for the absolute Xpath is that it gets failed when there are any changes made in the Xpath of the web element on the HTML document. It has a characteristic that it begins with a single forward slash character (‘/’) i.e. selecting an element starting from the root node. Following is the syntax cum example for an absolute XPath expression of the element
//*[@id="post-body-188624046246053988"]/h3[1]/a

Relative Xpath :- For this type of Xpath, the path begins from the middle of the HTML DOM (Document Object model) structure. It has a characteristic that it begins with a double forward slash character (‘//’) i.e. selecting a web element from anywhere of the web page. It has a benefit to begin from the middle of the HTML DOM structure and abstain from writing long XPath starting from the root node. Following is the syntax cum example for a relative XPath expression of the element.
Relative xpath: //*[@class=’class-test-box’]//*[text () =’SoftwareTesting’]

How to Create Dynamic Xpath & CSS Path :

Xpath with single attribute :
xpath Sysntax :
//tagname[@attributename = 'value of attribute']

For example :
//input[@id = 'uname']

xpath with multiple attribute :
xpath Sysntax :
//tagname[@attributename = 'value of attribute'][@attributename = 'value of attribute']
For example :
//input[@id = 'uname'][@class = 'input']

xpath with and :
//input[@id = 'uname' and @class = 'input']

xpath with or:
//input[@id = 'uname' OR @class = 'input']

xpath with contains :
//tagname[contains(@attributename = 'value of attribute')]

//input[contains(@id = 'pass')]

xpath with starts with :
//*[starts-with(@attributename , 'attribute value')]

//*[starts-with(@id, 'uname')]

xpath with following :
//*[text() = 'Discussion']//following::a[contains(@href, 'edit.php')]
-----------------------------------------------------------------------------

How to Create Dynamic CSS Path manually:

Sr No.	Attribute	Symbol
1.	For Class Name	Use . Symbol
2.	For id	Use # Symbol
3.	For attribute	tagname[attribute = 'value']
4.	For Multiple Attribute	tagname[attribute1 = 'value'][attribute2 = 'value']
5.	Starts with	Use ^ Symbol
6.	Ends With	Use $ symbol
7.	Contains	use * Symbol

------------------------------------------------------------------------------------------------

Difference between Xpath & CSS in Selenium

1).Xpath engines are different in each browser, hence make them inconsistent Css path works in each browser whereas xpath is limited with browsers for Example IE browser.
2).CSS was initially released in 1996 & xpath was initially released in the 1999.
3).CSS is easy as compaired to Xpath.

------------------------------------------------------------------------------------------------

Function to create run time xpath

public static String createXpath(String xpath, Object ...args){
for(int i=0; i<args.length; i++){
xpath = xpath.replace("{"+i+"}", (CharSequence)args[i]);
}
return xpath;
}

------------------------------------------------------------------------------------------------
// Assume getDynamicId() is the function that returns the dynamic ID
String dynamicId = getDynamicId();
String xpath = "//input[@id='" + dynamicId + "']";
WebElement element = driver.findElement(By.xpath(xpath));

------------------------------------------------------------------------------------------------