×
☰ See All Chapters

Locators in Selenium | Types of Locators

For applying selenium command we need to provide the target either it is web page or an element (Text field, Check Boxes, Select drop down, Buttons etc.) in the web page.  To locate the target we have to identify the property which is unique to the target. This property should be unique from all the html code which has been rendered. Using this unique property we can create the command to locate the element. While identifying the unique property we can consider any attribute of the html tag, or we can frame combination of attributes of the html tag, but final it should be unique from the all html code in the current page.

Most of the time developers attach the id attribute and which will be unique to the page. If id attribute is not present we can consider name or class.

When name/id/class attribute is not available we have to use unique attribute attached only with that tag or combination of attributes and values to get the unique identification. In this case we have to use xpath syntax.

To identify the unique identification property we can use browser developer tool to inspect the element. Right click on the element and select “Inspect Element from the browser”.

We have 8 types of locators in Selenium using which we can locate the target

  1. id 

  2. name 

  3. tagName 

  4. className 

  5. linkText 

  6. partialLinkText 

  7. xpath 

  8. css 

And below is the priority to use these locators:

  1. id 

  2. name 

  3. linkText / partialLinkText 

  4. css 

  5. xpath 

We recommend not using className and tagName locators. Because className and tagName might have been used only once in a page at the time of developing automation script, but it is not safe, developer may use same tags and class at any time. You will learn about all the locators in next chapters.

Before we start learning to extract the target, we should know below some important key basics about the HTML:

  1. In HTML language we have only tags. A tag opened must be closed. For example <head>………………….</head> 

Syntax: <tagname attribute="value" attribute="value" attribute="value">   </tagname>

  1. Tags can be nested (tag inside tag), however they must be opened and closed in order. 

  2. Tags may/may not have attributes. 

  3. Attributes may/may not have values.  

  4. Values are written inside double quotes/single quotes. 

  5. tagname, attribute names are defined by html language can be random. 

  6. value defined by developers and can be anything. 

locators-in-selenium-0
 

We consider below sample HTML code to provide you the example:

<!DOCTYPE html>

<html>

<head>

<meta charset="ISO-8859-1">

<title>Signup</title>

</head>

<body>

        <div class="signup-container-styles">

                <form name="signup" id="signup" action="/submit">

       

                        First Name : <input type="text" name="firstname" ></br>

                       

                        Last Name : <input type="text" name="lastname"></br>

                       

                        Date of Birth: <input type="text" class = "datePicker"></br>

                       

                        Email: <input type="text" placeholder="This will be your login ID"></br>

                       

                        Address : <textarea rows="4" cols="33" ></textarea></br>

                       

                        Phone: <input type="text" id="phone" ></br>

                       

                        <input type="submit" value="Submit">

               

                </form>

</body>

</html>

 

locators-in-selenium-1
 
All Chapters
Author