How to find web elements using selenium locators

Posted in Selenium By Raj On October 22, 2017

 

If you want to perform any operation on the page using script first you must find out elements on the page, then only you can perform operations, you can find out elements by using different ways, here, the selenium helps us find elements on the page using locators

The browser understands only HTML and the page which loads on the browser contains several HTML elements, each HTML element performs its own functionality, when you write your selenium script you need to find out these HTML elements and perform operations, in selenium we call these HTML elements as Web elements

Every HTML element has attributes, attribute is nothing but key=value pair, the attributes provide additional information about an element ex: id, name, class

Usually, in javascript, we can find out HTML element by using attributes, something like below, if you see the below code I don’t see much difference between javascript and selenium script both are performing the same operation

 Choosing the right locator depends on how HTML is written, I suggest you before writing test cases, spend some time on analyzing the locators, you need to check unique locators if there are duplicate you need to look for fallback options, the fallback sequence is

Id -> Name -> className -> cssSelectors  -> XPath -> tagName -> linkText ->partialLinkText

Always remember, if web driver finds duplicate locators then it will give priority to first matching element

Selenium Locators 

By.id

In selenium, we have 8 locators using which we can find out elements on the page, the first and important one is id attribute, the below HTML element contains id attribute so you can find out web element using id attribute if you don’t find id attribute then always look for name attribute

The important thing is to make sure that the page does not contain duplicate id’s and id should be unique

By.name

If you don’t have id attribute then, give your next priority to name attribute, if your page contains multiple elements with the same name attribute then the priority it gives to first matching element 

By.className

If you don’t have id and name attributes then you can use the className locator 

By.cssSelectors

Another important locator you can use cssSelector which is faster than XPath for more information on cssSelector refer this article CSS Selectors

By.xpath

The XPath will be used to navigate through XML document, the HTML is much like XML, so you can use XPath to find out web elements on the page

The main problem with XPath is if the DOM structure changes then it will give lot of problems, so I strongly avoid this when you are testing CMS based applications

To find out XPath you can either use XPath Helper which is a chrome plug-in or use chrome console something like below

selenium-xpath-finder

By.tagName

tagName is another option where you want to get web elements based on the HTML tag name, if you want to get list of anchor links to check broken links or any attributes on the page then you can use this, 

By.linkText 

You can use this to find out web element based on the text of the element, using below code you can find out the search element which is on right side on my blog home page

By.partialLinkText

This is something like contains in Java, using below code you can find out the Find us on facebook element which is on right side on my blog home page