Web Elements Locating Mechanisms

Before we divulge further in to the world of test scripts, we need to understand how the test scripts identify the target web elements like a text box or a drop down on a web page. Modern web pages have a plethora of such web elements- ranging from a simple text box to a complicated iframe and other web elements. So how does our test script, recognizes which web element, our script is going to use, out of all these different kinds of web elements. We must be having a way of doing so right?

 

Today, we’re going to learn, how we identify the web elements on a web page. To understand this, first we need to understand how can we locate the web elements on our browser, and then we will have a look at how we make our test understand how and where to find a specific web element.

 

  • Using the Browser Web Inspector

Modern web browser are very sophisticated and user friendly. These web browsers, not only understand the pains of normal day to day users, but also of the engineers, working behind the scenes to make the experience of these users a better one. So, almost all of these browsers have pre-built in methods, which helps the test engineers to use that functionality and recognize the web elements.

One such method is the Inspect Element option that you have when you do a context click (right click). If you hover over to a web element such as a plugin icon (a Pinterest plugin icon), and right click on it, you can see that this option comes up.

Inspect

If you watch it closely, it is this option

Inspect Element

 

Let us see how this works. I navigate to the home page of toolsqa and then select a web element, suppose, that of it’s founder- Lakshay. It is an image which is situated at the bottom. If I do a right click on that element, and select Inspect Element, I see this coming up-

inpect

 

You can see that the browser web element inspector window comes up. You can also use F12 shortcut key on the keyboard to fire this thing up. Using this we can find the attributes of the web element like id, name , tagname, using which we can design our tests to recognize this web element in our tests.

 

  • Using Firebug and Firepath

Firebug is a Firefox extension. Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Similarly Firepath is an add on for Firefox, which  adds a development tool to edit, inspect and generate XPath expressions and CSS3 Selectors.

Importance of Firebug and Firepath :

  • Most of the browser web element inspector show only the HTML contents of the web page. And so for example, you can’t see the changed contents if any JS function is lying underneath it. Firebug let’s you see that . It opens up how your HTML looks like at that instant.
  • Firebug highlights changes to the HTML in yellow immediately when they occur. If you want to spy even closer, you have the option to also scroll every change into view, so you won’t miss a thing.
  • You can scroll to any web element, and use your mouse to locate and pull up the source for that web element.

 

Let us install this on our Firefox browser. Go to the  Menu on the top right hand corner of the browser. Click on that.

Img1

You need to click on Manage Your Add-Ons, or either press Ctrl +Shift + A. You will be directed to the add-ons marketplace. In the search box, type for Firebug and hit enter.

Img2

 

You will see that Firebug comes up in search results. Go ahead and install it.

Img4

 

It’s a very lightweight plugin, which should get installed in minutes. Once it gets installed , you can see this. You need to follow the same path for Firepath, i.e. going in add-ons market place, searching for the add-on and then installing it.

Img3

Restart  Firefox once you’re done with installation.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

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