Automation Testing, Selenium

Understanding of Selenium Locators Part-1

Selenium needs to interact with GUI elements available on the web page to perform the actions mentioned in the script.These actions includes clicking on link or button, typing into text-box, selecting check-box etc. That’s where Selenium Locators comes into the picture. Selenium uses locators to find target element on the web page to perform these actions.

Selenium Locators play an essential role in building automation suites. Using the right locator for your web element can be a pain. If you are blessed with Unique IDs or Class Name from Development team, you are on top of the world otherwise it can become nightmare. For example, you recorded a Login flow using ID locators and your script is absolutely working fine. Next time when you run the same script you observe that most of your commands are getting failed. After some root cause analysis you get to know that, IDs are dynamically generated and assigned to locators. So you will have to update your script from the scratch. Hence, using the proper locators gives you higher durability and maintenance cost gets reduced.

These are the different types of Locators :


  • ID Locator
  • Link Text Locator
  • Name Locator
  • CSS Selector
  • DOM (Document Object Model)
  • XPath

In this tutorial we will cover ID, Link Text, Name & CSS Locators. DOM and XPath are covered in next tutorial Understanding of Selenium Locators Part-2

Locate Your Element by ID :

ID works as the unique identification for the web element and if the static IDs are applied than it’s the best locator to use. The ID locator is not dependent on web element type or its location. So even if the developer changes the element’s location, Webdriver will still find it easily.

Format : id=submit (Where “Submit” is the value of ID locator.)

You can record the location of web element through Selenium IDE. In below example we will see how we can manually add locator with the use of Firebug.

Example :

– Hit the URL : http://docs.seleniumhq.org/ in Firefox browser.
– Look for “search selenium” on Top right corner of the screen.
– Open Firebug and click on Inspect button.
– Select “Go” button. You will see something like this.

id_locator

As you can see, id=”submit” has been associated with input button, which we can use as the locator in Selenium IDE.

– Open Selenium IDE and in Target box enter id=submit. Now Click on “Find” button, you’ll see the “Go” button gets highlighted.

Using Link Text Locator :

This locator allows you to find the “Link” elements having hyperlink texts. The element is located by providing “link=” into IDE target field followed by hyperlink text.

Format : link=About Us (Where “About Us” is the hyperlink text.)

Example :

– Hit the URL : http://www.testingjournals.com in Firefox browser.
– Right click on “About Us” from the header bar. As it is an hyperlink, you can get the locator value as shown below :

linktext_locator

Using above mentioned format you can easily execute the command in IDE. Provide “link=About Us” in Target field and use command as “clickAndWait” and execute the command. You will be redirected to About Us page.

Name Locator :

Another effective way of locating your element is through “Name”. It is possible that in same web page there are multiple elements having same Name attribute. In such cases, during execution the first element matching the Name value will be returned. “NoSuchElementException” will be raised if no element has been found matching the value. So, avoid using Name locator if there are multiple elements available having same name attribute.

Format : name=q (Where “q” is the Name value assigned to the element.)

Example :

– Hit the URL : http://docs.seleniumhq.org/ in Firefox browser.
– Look for “search selenium” on Top right corner of the screen.
– Open Firebug and click on Inspect button.
– Select “Search” text-box. You will see something like this.

As shown in above image, name=”q” has been attached with search input box.

name_locator

Same as ID locator, provide “name=” in the IDE target field followed by the value of Name attribute.

CSS Selector :

This is the most preferred Selenium locator if you are not privileged to use static ID or Name. CSS Selectors are the patterns formed by HTML Tags, Ids, Classes and their values used in generating web elements. Generating CSS locators is not simple and straight forward as ID or Name but more efficient as you can locate those elements having Id or Name also.

CSS locator can be formed in different ways. Most used and common are as shown below :

css_locator

CSS selector with Element ID :

First step would be same as what we did in locating ID earlier in this tutorial. We will use the same example here.

Format : css=[HTML Tag]#[Element ID] where,

HTML Tag = the HTML Tag of the interacted Element
# = This Hash Tag should be present for each CSS locator using ID
ID = ID locator of the interacted Element

Example :

– Hit the URL : http://docs.seleniumhq.org/ in Firefox browser.
– Look for “search selenium” on Top right corner of the screen.
– Open Firebug and click on Inspect button.
– Select “Go” button.

Mentioned below is the generated CSS Locator  of “Go” button using Element’s ID. Don’t forget to use Find button to verify you have located proper element.

css_id_locator

CSS selector with Class :

This CSS selector works with the class attribute of the web element. To showcase the example we will use Testing Journal’s global search button.

Format : css=[HTML Tag].[Element Class Name] where,

HTML Tag = the HTML Tag of the interacted Element
. = This Dot should be present for each CSS locator using Class Name
Class Name = Class name of the interacted Element which you can extract through Firebug

Example :

– Hit the URL : http://www.testingjournals.com
– Open Firebug and locate the Search field from the Right side bar
– Now generate the CSS locator for Search input field as mentioned in below image.

css_class_locator

Hence, as mentioned in the above image we can generate the CSS locator using Class Name.

Note : Many times multiple elements have been allocated the same HTML Tag and Name. In such cases, the first element from the source code will be located. So, it better to avoid using Name in such cases.

CSS Selector with Attribute :

Another way of locating a web element through CSS selector is using its attributes and the value. We will use same example of seleniumhq.org which we showcased earlier for ID locator.

Format : css=HTML Tag[Attribute Value] where,

HTML Tag = the HTML Tag of the interacted Element
[] = Attribute value should be given in this bracket
Attribute Value = Attribute value of the interacted Element which you can extract through Firebug

Example :

– Hit the URL : http://docs.seleniumhq.org/ in firefox browser.
– Look for “search selenium” on Top right corner of the screen.
– Open Firebug and click on Inspect button.
– Select “Go” button. Now refer below image to generate CSS selector using element attribute value.

css_attribute_locator

CSS Selector with Inner Text :

Each element on the web page contains Strings patterns or text to be visible as part of the HTML label. If the web element is not given id, name or class we can still locate such elements by using Inner Texts.

Format : css=HTML Tag:contains(“Inner Text”) where,

HTML Tag = the HTML Tag of the interacted Element
:contains = Inner text should be provided in IDE command in this format
Inner Text = Inner Text of the interacted Element which you can extract through Firebug

Example :

– Hit the URL : http://www.testingjournals.com
– Open Firebug and locate the “Automation” as the Menu option in the header bar.

innertext_firebug

As you can see in above image, Inner text for the identified element is “Automation”. Now let’s locate this element through Selenium IDE using CSS with Inner text selector.

locator_css_innertext_ide

Here we are ending this tutorial. Click here to access the next article in continuation : Selenium IDE : Understanding the Locators Part-2


Share This Article :

5 Comments

  1. Great article with very useful information. Thanks for sharing this with us, Appreciate your work

  2. Thanks for providing the information . The articles in your blog helped me a lot for improving the knowledge on the subject. Also check my small collection on this at selenium Online Training blog

  3. Everyone wants to get unique place in the IT industry’s for that you need to upgrade your skills, your blog helps me improvise my skill set to get good career, keep sharing your thoughts with us.

  4. Hey Rishil,

    G8 post on Selenium for beginner like me to start with. I have one question. What is the scripting language used in Selenium I need to understand as a Java Developer ?

    • Rishil Bhatt

      Hello Nilang,

      To use Selenium efficiently we have to be very fluent with HTML & XML/XPath. Basic knowledge of JavaScript is also beneficial. With Selenium you can write Test Cases in languages like C#, Java, Perl, PHP, Python, Ruby.

      Hope that answers your question !!

Leave a Reply