As we know there are 8 locators are available in Selenium  as below: 

	Find different elements on a web page using Locators
xPath	xpath required for finding the dynamic element and traverse between various elements of the web page
id	To find the element by ID of the element
name	To find the element by name of the element
linkText	To find the element by text of the link
cssSelector	CSS path also locates elements having no name, class or ID.
className	To find the element by Classname of the element
tagName	To find total number of links
partialLinkText	To find any element what is long text with link attach

Xpath and CssSelector are very import locators among them. So we need to know how to create xpath and cssSelector as below:

1) Creating Xpath locator following Syntax:
//tagName[@attribute=’value’]
OR: //* [@attribute=’value’]

2)Creating Css locator following Syntax:
tagName[attribute=’value’]
OR: *[attribute=’value’]

Although we know how to create Xpath and CssSelector are not enough to address some the web elements as we need to traverse from parent to child node or child to child (sibling to sibling)  nodes. That’s why we need a bit more advance knowledge about Xpath and CssSelector to handle following scenarios: 

1) How can we locate elements using text() function in Xpath?

Using the text() method as below:

xPathExpression: //tagName[text()=’actual text’]

In this expression, with text function, we find the element with exact text match as shown below. In our case, we find the element with text “UserID”.

So Xpath is //td[text()=’UserID’];

2) How can we locate elements using contains() method in xpath?

Ans: Contains() is a method used in XPath expression. It is used when the value of any attribute changes dynamically or long value. That time we can use partial attribute value of that object using contains() method. 

Example: driver.findElement(By.xpath(“//a[contains(@href,’twitter.com/CodenboxTeam’)]”)).click();

OR: driver.findElement(By.xpath(“//a[contains(@href,’twitter.com’)]”)).click();

3) Parent-Child relationship Xpath: -Define Xpath for unique parent or grandparent (Immediate parent for a child would be shown as sharp down arrow in HTML) and travel to the child through tagNames (e.g: Parent/Child tagNames)

Example 1: Go to codenboxautomationlab.com then click on login button.

driver.findElement(By.xpath(“//*[@id=’meta-4′]/ul/li[1]/a”)).click();

 Example 2: Type testing in Google Search and click on “Testing  job”  from the search result which is the example of  custom Dynamic  xpath/parent-child relatioshiop following  parent//child//descendant relationship

How to automate Google Search: https://youtu.be/Gb-Xk_QfXtc

4) How to travers to sibling element using xpath?

Ans: Relative Xpath for 1st sibling, then /following-sibling::desired sibling’sTagName[position]

Syntax: Relative Xpath for 1st sibling/following-sibling:: TagName [position]

5) How to traverse parent to child using cssSelector class?

Ans: Syntax: cssSelector class for parent (common class)+ space + child’sTagName:nth-child(position)

Example: driver.findElements(By.cssSelector(“div[class=’cb-col cb-col-100 cb-scrd-itms’] div:nth-child(3)

Techniques for 1, 4 & 5: See the video tutorial as per following link: https://youtu.be/nvb9gvZkuoI

---