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.
If you watch it closely, it is this option
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-
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.
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.
You will see that Firebug comes up in search results. Go ahead and install it.
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.
Restart Firefox once you’re done with installation.
TESTEROPS 