Advance techniques for Locators

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


Share the Knowledge

You May Also Like

About the Author: codenbox

Leave a Reply

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