How to Locate Web Elements with Selenium WebDriver

1 comment, 1 share, 651 points
how to locate web elements with selenium webdriver

How to Locate Web Elements with Selenium WebDriver

As a test engineer once you start writing automation tests a very important part to decrease the time for writing tests is to have a good knowledge how to locate web elements with selenium WebDriver.

Most of the web applications are using latest technologies in javascript like Angular.js , React.js, Ember.js , and all this make our life a bit harder that we can imagine.

Locators Best Practice:

  • Use semantic html(classes and IDs)
  • Don’t use complex XPath expressions
//*[not(contains(name(),'table')) and not(contains(name(),'table2'))
 and not(contains(name(),'spoon')) and not(contains(name(),'orange'))]

Defiantly we can find a better way in our web application do define the element , sometimes we do have to build complex xpath expression but try to avoid them as much as you can.

  • Reuse CSS from web design.
  • Try to avoid text matching , use important keywords only.

I’ve been asked couple of times:  “How can I assert this text?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 

You don’t really want to do that ,there are plenty of reasons behind why not to and performance wise the action is going to be quite expensive.

How to validate your XPath:

There is a pretty good Add on in Mozila Firefox called XPath checker:


XPath Checker:

You can install the plugin from here :XPath Checker

Another good plugin to build XPath is XPather .



A good plugin for Mozila Firefox  Firefinder – finds HTML elements matching chosen CSS selector(s) or XPath expression.


And because Mozila firefox’s extensions never ends here is FirePath – inspect and generate XPath 1.0 expressions, CSS 3 selectors and JQuery selectors (Sizzle selector engine).


And a pretty nice Google Chrome extension – SelectorGadget: point and click CSS selectors:



Obviously there are few more but to be honest with you I don’t use any of this tools … well is not like they are not good tools , they are quite good and helps you to build stable locators. The thing is once you’ve got some experience you don’t even bother to use any of them.

So now you might think how am I locating elements ?

Basically Im querying the locator using jQuery in Chrome console and I’m going to show you how you can do that if you don’t know and once you get used with it you’ll see there is no other easiest way to do it.

Given the following code from Yahoo mail

 <label for="login-username" class="mbr-hide">Username</label>

                        <input name="username" id="login-username" class="login-input
                             pure-u-1 " type="text" maxlength="96"
                                                            tabindex="1" aria-required="true"
                            placeholder="Enter your email"
                            title="Enter your email" autocorrect="off" spellcheck="false"

                        <div id="login-username-error" class="error-box username-error pure-u-1 mbr-text-align mbr-hide" role="alert"></div>


                    <div class="mbr-login-username-tips">

                    <div id="passwd-field" class="passwd-field mbr-hide">

                        <label for="login-passwd" class="mbr-hide">Password</label>
                        <input name="passwd" id="login-passwd"
                            class="login-input  pure-u-1" type="password" maxlength="64"
                                                            tabindex="-1" aria-hidden="true" role="presentation"
                        <div id="odp-pw-desc" class="odp-pw-desc mbr-text-align mbr-hide">
                            Click continue to sign in.                        </div>

                                <div id="mbr-login-error" class="mbr-login-error mbr-text-align pure-u-1 mbr-hide">                </div>

                                <div id="submits" class="mbr-login-submit ">
html code
Inspect login username element.

As you can see there is a name : username , id: login-username and class .login-input

Now you can use any of them : name id and class or you can use the id as a selector #login-username

How we can validate that ? Simple … click on the console tab and write:

$(‘#login-username‘) or $(input#login-username) is going to be the same results :


If there will be a returned a collection of elements you’ll get multiple results but if you want to check how many are for sure on the page you can check by just typing :


You can check the full API documentation here :

In the same way you can query for a class name.

$(‘.login-input’) or compound class names $(‘.login-input.second-class-name’) 

The second option I don’t really recommend it is like an absolute path, use it only if it’s your last option.

I hope you enjoy this article and you’ll find it useful , don’t hesitate to ask any question .





Like it? Share with your friends!

1 comment, 1 share, 651 points
Test engineer

One Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.