WebElement Locators - 2: By Xpath, Tag Name, Class Name, and CSS Selector

So in last article we have seen how to locate the WebElement using four locators and those are Name, Id, Partial Link Text and Link Text. Now in this article we are going to see the remaining four locators. Let’s start looking at them one by one.

Locating element By Xpath:

Xpath functions are very useful functions, it help to identify the Elements from its root node as well as from anywhere in the page. As HTML can be an execution of XML (XHTML), Selenium clients can use this amazing language to target WebElement in their web applications. XPath goes beyond (and additionally supporting) the straightforward techniques for situating by id or name attributes, and opens up a wide range of new conceivable outcomes, for example, finding the third checkbox on the page.

One of the fundamental explanations behind utilizing of XPath is the point at which you don't have a reasonable id or name attribute for the component you wish to find. You can utilize XPath to either find the component in supreme terms or with respect to a component that has an id or name attribute. XPath locators can likewise be utilized to indicate components by means of Attributes other than id and name.

There are two types of Xpath, relative Xpath and absolute Xpath. The main difference between these two are mentioned below.

Absolute Xpath:  finds the element from root directory and this can be find using many extension available for both Firefox and chrome.

Relative Xpath: For Relative Xpath the way begins from the center of the HTML DOM structure. It begins with the twofold forward slice (//), which implies it can look through the WebElement anyplace at the webpage. You can begin from the center of the HTML DOM structure and no need to write long Xpath like in Absolute Xpath.

Syntax for Relative Xpath is:

Xpath=//Tag_name[@attribute_name=’value’];

Lets see the meaning of each terms present in the syntax:

//: Selecting the Element from the present node

Tag_Name: it’s the tag name of the HTLM under the element falls.

@: its like indicating the select action.

Attribute_name: the name of the attribute for the element.

Value: is the value of the attribute.

For better understanding lets, see the below image.

For example: if we want to click on that google search button then relative Xpath will be as follows.

Xpath=//input[@name=’btnk’];

Locating element By Class Name:

In Class Name locator, we are going to locate the WebElement using its class name. Let’s see an example how to locate WebElement using its class name.

Let’s see how we can find the post title of site http://www.software-testing-tutorials-automation.com/. It may locate the multiple element at the same time because one class can be used in many places.

Steps are same, hover over the post time, and right click on the mouse and then click on inspect element and see the class attribute.

driver.find_element_by_class_name(‘post-title entry-title’)

This is how we can locate the WebElement using its class name, it may return may matching result as class can be used in many places.

Locating element By Tag Name:

Now we are going see how we can locate the WebElement using its tag name and if many WebElement has the same tag name the it will return the first Element and if there is no element with the value we provide in script then it will through an error as noSuchElement.

Let’s see the syntax:

If we want to locate same post title which we have seen above in class name then same post time can be found using below syntax

driver.find_element_by_tag_name('h2')

This is how we can find the element with the help of tag name, if there are many element with same tag name then it will return only the first one and not all.

Locating element By CSS Selector:

Now we are going to see how we can locate the WebElement using css selector, like tag name, class name here in css selector if there are multiple WebElement with the same css name then it will return the first WebElement and if there is not any matching WebElement with the given value of css then it will through exceptions as NoSuchElementException.

Usually CSS selector is not used much, as there are better locator than this, only ID, Name and Xpath are preferred all most all time.

Syntax:

driver.find_element_by_css_selector('h2. post-title entry-title ')

This syntax is for above example.

These are all locators.