3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

Software Testing Help

Software Testing Complete Guide
How to Use Firebug for Creating Selenium
Scripts Selenium Tutorial #4

Search

How to Use CSS Selector for Identifying Web Elements for Selenium Scripts Selenium Tutorial #6

How to Identify Web Elements Using Selenium

Xpath and Other Locators Selenium Tutorial
#5
Posted In | Automation Testing, Selenium Tutorials
In the previous tutorial, we introduced you with
another automation testing tool named as Firebug.
We also created our own automation script manually
using Firebug and its capabilities. We also learned to
affix desired modifications into our script.
Moving ahead, in this tutorial we would have a look
at the various types of locators in Selenium and
their accessibility technique to build test scripts.
Thus this tutorial is comprised of the detailed
introduction to various types of locators.
This is our 5th tutorial in Selenium Tutorial series.
What is Locator?
Locator can be termed as an address that identifies a web element uniquely within the webpage.
Locators are the HTML properties of a web element which tells the Selenium about the web element
it need to perform action on.

http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

1/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

There is a diverse range of web elements. The most common amongst them are:
Text box
Button
Drop Down
Hyperlink
Check Box
Radio Button

Types of Locators
Identifying these elements has always been a very tricky subject and thus it requires an accurate and
effective approach. Thereby, we can assert that more effective the locator, more stable will be the
automation script. Essentially every Selenium command requires locators to find the web elements.
Thus, to identify these web elements accurately and precisely we have different types of locators.

Now lets understand further by exercising each of them independently.

Before we start with the locators, let me take a moment to introduce the application under test. We
would be using https://accounts.google.com/ for locating different types of web elements using
different locator types.

Using ID as a Locator
http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

2/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

The best and the most popular method to identify web element is to use ID. The ID of an each element
is alleged to be unique.

In this sample, we would access Email text box present in the login form at gmail.com.
Finding an ID of a web element using Firebug
Step 1: Launch the web browser (Firefox) and navigate to https://accounts.google.com/.
Step 2: Open firebug (either by pressing F12 or via tools).
Step 3: Click on the inspect icon to identify the web element.

Step 4: Hover on the web element (Email textbox in our case) on which we desire to perform some
action. In the firebug section, one can see the corresponding html tags being highlighted.

http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

3/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

Step 5: Be cognizant about the ID attribute and take a note of it. Now we need to verify if the ID
indentified is able to find the element uniquely and flawlessly.
Syntax: id = id of the element
In our case, the id is Email.
Alternative approach:
Instead of following step 2 to 4, we can directly locate / inspect the web element by right clicking on
the web element (Email Textbox) whose locator value we need to inspect and clicking on the option
Inspect Element with Firebug. Thus, this click event triggers the expansion of firebug section and
the corresponding html tag would be highlighted.

Verify the locator value

Assuming that the browser is open and is re-directed to https://accounts.google.com/.
Step 1: Launch Selenium IDE.
Step 2: Click on the first row in the editor section.
Step 3: Type id=Email i.e. the locator value in the target box.
Step 4: Click on the Find Button. If the provided locator value is legitimate then the Email textbox
will be highlighted with yellow color with a florescent green border around the field. If the locator
value provided is incorrect, an error message would be printed in the log pane at the bottom of
Selenium IDE.
Case 1 Locator Value = Correct

http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

4/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

Case 2 Locator Value = Incorrect

Step 5: In order to verify further, user can also execute type command against the given target by
providing some value in the Value field. If the execution of the command enters the specified value
in the Email text box that means the identified locator type is correct and accessible.

Using ClassName as a Locator

There is only a subtle difference between using ID as a locator and using classname as a locator.
In this sample, we would access Need Help? hyperlink present at the bottom of the login form at
gmail.com.
Finding a classname of a web element using Firebug
Step 1: Locate / inspect the web element (Need help? link in our case) by right clicking on the web
element whose locator value we need to inspect and clicking on the option Inspect Element with
Firebug.
Step 2: Be cognizant about the classname attribute and take a note of it. Now we need to verify if the
classname indentified is able to find the element uniquely and accurately.

Syntax: class = classname of the element

http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

5/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

In our case, the classname is need-help-reverse

Verify the locator value
Step 1: Type class= need-help-reverse in the target box in the Selenium IDE.
Step 2: Click on the Find Button. Notice that the hyperlink will be highlighted with yellow color with
a florescent green border around the field.
(Click to view enlarged image)

Using name as a Locator

Locating a web element using name is very much analogous to previous two locator types. The only
difference lies in the syntax.
In this sample, we would access Password text box present in the login form at gmail.com.
Syntax: name = name of the element
In our case, the name is Passwd.
Verify the locator value
Step 1: Type name= Passwd in the target box and click on the Find Button. Notice that the
Password textbox would be highlighted.
------------

Using Link Text as a Locator

http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

6/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

All the hyperlinks on a web page can be indentified using Link Text. The links on a web page can be
determined with the help of anchor tag (<a>). The anchor tag is used to create the hyperlinks on a web
page and the text between opening and closing of anchor tags constitutes the link text (<a>Some
Text</a>).
In this sample, we would access Create an account link present at the bottom of the login form at
gmail.com.
Finding a link text of a web element using Firebug
Step 1: Locate / inspect the web element (Create an account link in our case) by right clicking on
the web element whose locator value we need to inspect and clicking on the option Inspect Element
with Firebug.
Step 2: Be cognizant about the text present within the <a> </a> tags and take a note of it. Hence this
text will be used to identify the link on a web page uniquely.
(Click to view enlarged image)

Syntax: link = link text of the element

In our case, the link text is Create an account.
Verify the locator value
Step 1: Type link=Create an account i.e. the locator value in the target box in Selenium IDE.
Step 2: Click on the Find Button. Notice that the link would be highlighted with yellow color with a
florescent green border around the field.

http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

7/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

Using Xpath as a Locator

Xpath is used to locate a web element based on its XML path. XML stands for Extensible Markup
Language and is used to store, organize and transport arbitrary data. It stores data in a key-value pair
which is very much similar to HTML tags. Both being mark up languages and since they fall under
the same umbrella, xpath can be used to locate HTML elements.
The fundamental behind locating elements using Xpath is the traversing between various elements
across the entire page and thus enabling a user to find an element with the reference of another
element.
Xpath can be created in two ways:
Relative Xpath
Relative Xpath begins from the current location and is prefixed with a //.
For example: //span[@class=Email]
Absolute Xpath
Absolute Xpath begins with a root path and is prefixed with a /.
For example: /html/body/div/div[@id=Email]
Key Points:
The success rate of finding an element using Xpath is too high. Along with the previous
statement, Xpath can find relatively all the elements within a web page. Thus, Xpaths can be
used to locate elements having no id, class or name.
Creating a valid Xpath is a tricky and complex process. There are plug-ins available to generate
Xpath but most of the times, the generated Xpaths fails to identify the web element correctly.
While creating xpath, user should be aware of the various nomenclatures and protocols.
Selenium Xpath Examples
Xpath Checker
Creating Xpath becomes a little simpler by using Xpath Checker. Xpath Checker is a firefox add-on to
automatically generate Xpath for a web element. The add-on can be downloaded and installed like any
other plug-in. The plug-in can be downloaded from https://addons.mozilla.org/enUS/firefox/addon/xpath-checker/.
http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

8/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

As soon as the plug-in is installed, it can be seen in the context menu by right clicking any element
whose xpath we want to generate.

Click on the View Xpath to see the Xpath expression of the element. An editor window would
appear with the generated Xpath expression. Now user has the liberty to edit and modify the generated
Xpath expression. The corresponding results would be updated cumulatively.

Note that the Xpath Checker is available for other browsers as well.
But re-iterating the fact, that most of the times, the generated Xpaths fails to identify the web element
rightly. Thus, it is recommended to create our own Xpath following the pre defined rules and
protocols.
In this sample, we would access Google image present at the top of the login form at gmail.com.
Creating a Xpath of a web element
Step 1: Type //img[@class=logo] i.e. the locator value in the target box within the Selenium IDE.
Syntax: Xpath of the element
http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

9/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

Step 2: Click on the Find Button. Notice that the image would be highlighted with yellow color with a
florescent green border around the field.

Conclusion
Here are the cruxes of this article.
Locators are the HTML properties of a web element which tells the Selenium about the web
element on which it needs to perform actions.
There is a wide range of web elements that a user may have to interact with on a regular basis.
Some of them are: Text box, Button, Drop Down, Hyperlink, Check Box, and Radio Button.
With the varied range of web elements comes a vast province of strategies/approaches to locate
these web elements.
Some of the extensively used locator types are: ID, ClassName, Link Text, Xpath, CSS
Selectors and Name.
Note: Owing to the fact that creating CSS Selector and Xpath requires a lot of efforts and practice,
thus the process is only exercised by more sophisticated and trained users.
In this tutorial we learned different types of locators including Selenium Xpath.
Next Tutorial #6: In continuation with this Selenium Locator types tutorial we will learn how to use
CSS Selector as a Locator.
Any queries? Let us know in comments. We will try to resolve all.
52
Like

5
Share

6
Tweet

http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

10/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

Source Code
Selenium IDE Tutorial
Selenium

Recommended reading:
How to Use CSS Selector for Identifying Web Elements for Selenium Scripts Selenium
Tutorial #6
How to Locate Elements in Chrome and IE Browsers for Building Selenium Scripts
Selenium Tutorial #7
How to Use Firebug for Creating Selenium Scripts Selenium Tutorial #4
Usage of Selenium Select Class for Handling Dropdown Elements on a Web Page Selenium
Tutorial #13
Handling Web Tables, Frames, and Dynamic Elements in Selenium Script Selenium
Tutorial #18
Check Visibility of Web Elements Using Various Types WebDriver Commands Selenium
Tutorial #14
Implementation of Our First WebDriver Script Selenium WebDriver Tutorial #10

The Best Software Testing Training You'll Ever Get!

13 comments
#1 Anjali Mone
Thank you for sharing the tutorial. it is very good.
#2 QTP Tutorial
Great tutorial guys. You explained everything well. I do wish you guys talked about x path
some more. Its a tough technique and should be covered in more detail.
#3 Shruti Shrivastava
@Anjali
Thank you for the kind words.
http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

11/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

#4 Shruti Shrivastava
@QTP Tutorial
Thank you for the appreciation and suggestion.
We would surely check if we could include more details on Xpaths.
#5 hitesh
Hi Shruti,
Wonderful article and very well explanation, but at last i tried step1 and step2 for xpath and
observed that i am getting following error:
[error] locator not found: //image[@class=logo]
I am not sure why it is coming, could you explain this xpath locator in detail?
Thanks in advance.
#6 Shruti Shrivastava
@Hitesh
Thank you for the appreciation.
Try //img[@class=logo] instead of //image[@class=logo]
Please let me know if it doesnt work even now.
#7 Gopi
Thank you very much for the tutorials. We would like to see more on XPATH to locate siblings
and parents(Moving Xpaths). Eagerly waiting for complete Webdriver tutorials. Again thanks
for the effort
#8 hitesh
Thanks Shruti,
tried with //img[@class=logo] and it works perfectly fine.
#9 Papak
Thank you very much for the tutotials. When we are supposed to use Xpath instead of other
locators ? is there any special scenarios/cases ?
#10 altaf
How to identify web elements in Internet Explorer?
#11 S Balu
I used yahoo for trial test. i created a script with valid user id & Password. First time it works
fine. When i ran next time scrpt is NOT identify the user name and password and gave the error
. what should be the issue ?
#12 Nikhil
How can I differentiate between 5 webelement having same xpath, id , name everything. ?
http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

12/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

#13 Tanushri
Hi Shruti,
When I check the Xpath of Google logo i can see xpath as id(hplogo). Also if I enter the
xpath //img[@class=logo] and try to find then I get log as [error] locator not found:
//img[@class=logo]. Can you please help me with this.

Leave a Comment
Name
Mail
Website (Optional)

Submit

Get FREE
eBooks +
Blog
Updates
Enter Email:

Best Online Training

Or Subscribe via RSS

http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

13/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

Recommended eBook
Learn & Master Software Testing Quickly from Experts Click here to know more.

Adv

http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

14/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

Latest Articles!
How to Figure Out What QA Job Best Suits You Based on Your Skills?
11 Ways You Know Youre a Tester..
Case Study: How to Eliminate Flaws of Waterfall and Agile Development Processes
Using a Hybrid Model
8 Proven Ways to Manage Stress as a Software Testing Professional
What is Software Testing All About? (Read This 10 Point Summary Carefully)
How to Perform White Box Testing Explained with a Simple Example
How to Plan and Manage Testing Projects Effectively (Tips)

XPath
HTML
Software Testing

START HERE!
Home
Get FREE Updates
Testing RESOURCES
QA Testing TRAINING
Premium eBook
FREE eBooks
ALL Articles
Contact Us
What Readers Say About Us
Your Feedback!
QA Forum

Help & Tutorials

ISTQB Study Guide
ISTQB Premium Study Guide
Free QA Training
Free Selenium Training
Free QTP Training
Free QC Training
HP LoadRunner Tutorials
JIRA Tutorials
101+ Interview Questions
Learn Selenium Automation
Selenium Testing Software
HTML

Categories
http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

15/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

Select Category

Follow Us!
Follow @VijayShinde
Follow

Like

6.3k

Share 47,041 people like

this. Sign Up to see
what your friends
like.

Search

http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

16/17

3/17/2015

How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium Tutorial #5 Software Testing Help

About us | Sitemap | Contact us | Find Jobs | Directory | Affiliates | Advertise

All articles are copyrighted and can not be reproduced without permission.
2007 - 2013 Software Testing Help Read our Copyright Policy |
Privacy Policy | Link to Us

http://www.softwaretestinghelp.com/using-selenium-xpath-and-other-locators-selenium-tutorial-5/

17/17