What are Selenium Locators and Find Element Commands?

Selenium Locators

Locators are used to tell Selenium that on which GUI element (text box, radio boxes, links, buttons etc.) action has to be performed. We must have basic knowledge of HTML in order to learn locator techniques. There are total of 8 locators  by which we can find element in Selenium WebDriver. Here is the list:
  1. ID
  2. Class Name
  3. Name
  4. Link Text
  5. Partial Link Text
  6. Tag Name
  7. Xpaths
  8. CSS Selector

Selenium Locators Video Tutorial (YouTube)

1. Locate by ID, Name and ClassName

  • These three are the most common type of locators. 
  • Id, Name and ClassName are the attributes used along with html tags. 
  • These attributes are given by Front-end developers for CSS designing.
  • Automation testers make use of these attributes for locating elements.

Example HTML Code for Login Page using Id, Name and ClassName attributes:
	<title>Sample Login Page </title>
	        <input type='text' id='username' name='user' classname='user'>
		<input type='password' id='password' name='pwd'>
		<button id='login'></button>

In above sample html code, there are three elements present:
  1. Input tag for username text box, it has id, name and classname attributes. We can use anyone of it for locating username textbox.
  2. Input tag for password box, it has id and name attributes only. We can use anyone of the two.
  3. Button tag for login button, it has only id attribute so we can only use id.

Code for Id

Code for Name - 

Code for ClassName 

How to find ID of an element on a Web Page?

Now let's find id of 'Male' radio box
  1. Click on the cursor icon on left side of firebug.
  2. Now move the cursor to the element whose id you want to find. We will move cursor to 'Male' radio box and click on it.
  3. You will observe in the firebug some html code will be highlighted. It is the html code of 'Male' radio box.
  4. In that html code find something like id='some_value'. It is the id to be used in selenium command. For 'male' radio box id is 'sex-0'.
  5. Code driver.findElement(By.id("sex-0"));
  6. Refer following pic.
 Similarly, Name and ClassName can be find from html code.

Key Points to remember about Id, Name and ClassName:

  • Html tag can have one, two or all three attributes.

  • If html tag has more than one attribute, we can pick one whose value is unique in the whole html code.

  • If Html tag don't have any of the three attribute in that case we have to use xpath or css selector.

  • Ids have to be unique for each element in html as per w3 standards. 

  • Id locator is the most reliable and fast locator.

  • If we have duplicate ids say more than one tag/element has same id, then also we have to use xpath or css selector.

  • 2. Locate by Link Text and Partial LinkText

    • Both these locators are used to click on links.
    • LinkText is used to click on a static link, whose value is not changing.
    • And Partial link text is used to click on a link which is half dynamic. A link whose half text is static and half text is changing. 
      • Like Profile Page link, XYZ Profile.
      • Here XYZ is name of person, which will be different for every user/person but 'Profile' text will remain unchanged.
    1. Open https://www.techlistic.com/
    2. I want to click on any menu link let's say on 'Selenium Tutorial' link using Selenium.
    3. You have to write text of the link (which is displaying on the page) in the Selenium command.
    Code for Link Text - 
    driver.findElement(By.linkText("Selenium Tutorial"));

    Code for Partial Link Text -  

    3. Locate by Tag Name

    Using this command one locate elements using html tag name.


    // Example - Get all options from a dropdown and print them
    WebElement select = driver.findElement(By.tagName("select"));
    // Get all options in a list with tagname 'option'
    List allOptions = select.findElements(By.tagName("option"));

    Selenium Find Element Commands

    These are the different commands to locate/find the GUI elements on the web page using 8 different locators. We can perform actions on elements only after finding them. You can use any of the one locator to find element. Below is the command to find any element on Web page.

    // Find Element

    All Find Element Commands:

     * Find Element Commands  * 
    // Find Single WebElemnt
    // Find Multiple WebElements, it returns a list of WebElements
    // Find by different locators
    // Find web element and store value in WebElement variable for re-usability
    WebElement element = driver.findElement(By.xpath("/some/xpath");

    We will learn about xpath and css selector in upcoming tutorials.

    What is Selenium WebDriver?  << Previous      ||      Next >>  Selenium WebDriver Commands 

    Follow Us

    YouTube Channel | Facebook Page | Telegram Channel | Quora Space
    Feel free to ask queries or share your thoughts in comments or email us.


    Popular posts from this blog

    10+ Best Demo Websites for Selenium Automation Testing Practice

    Automate Amazon like E-Commerce Website with Selenium WebDriver

    Handle Static and Dynamic Web Table in Selenium WebDriver

    Top 7 Web Development Trends in 2022

    How to Automate Google Search with Selenium WebDriver

    25+ Most Important Selenium WebDriver Commands Tutorial

    50+ Most Important Selenium WebDriver Interview Questions and Answers

    How to Find Broken Links on Webpage with Selenium WebDriver