Web elements are the foundation of all that is visible through a browser. For more information check W3Schools. A web page is made up of HTML elements. These are buttons, links, labels, input, etc. etc. etc. Selenium WebDriver addresses and recognizes these as Web Elements. These Web Elements are what Selenium interacts with to interrogate and manipulate a web page.
A Test Automation Developer uses Selenium to locate , interrogate and interact with these Web Elements to produce a desired state and eventually feed the result to a set of verifications to pass or fail a test. So Selenium is part of a bigger picture but a very essential part.
Moving On . . .
You might question Yourself “How do I know what to look for ? First I need to see what I have and then interrogate it.” You are right we need to see the source of a web page of a site and then figure out which element we want to interact with, locate it and make sure we got the right one and then act on it. We need to be able to do this with an accurate source and not an old dirty read of the page, because a page can be very dynamic and asynchronous in nature. Luckily there is something you can do about it and avoid the hassle of having to go through a fine comb through the hundreds of lines of elements on the page source.
I will show you two ways of doing this using some tools. The first method is no longer supported however I will still show you how just in case you are working for a company such as say a bank, and you are restricted by the versions of tools you are allowed to use.
The second method is the way to go although not as easy as the first method, it is the newly supported method and that is what we are moving onto.
We will now go ahead and install some additional tools.
Install the latest version of Firefox ESR
You might be asking yourself why Firefox ESR and not the normal Firefox. Well Firefox ESR as its name suggests is the Extended Support Release. This is what companies use for their applications. They need a stable browser to act as a front end to the systems that they use. If the browser is always accumulating new functionality there is a risk of encountering backward compatibility issues and the result is broken legacy systems.
Therefore for this exercise we will use Firefox ESR as the basis for other important plugins that will help us identify web elements.
Navigate to https://www.mozilla.org/en-US/firefox/organizations/faq/ to get access to the latest Mozilla Firefox ESR.
Click on the Download Mozilla Firefox ESR blue button. This will take you to the following page https://www.mozilla.org/en-US/firefox/organizations/all/
Notice the multitude of supported languages. I tend to download the British English localised version (notice how I spelled localised not localized lol). At this point select your language preference and download the 64 bit version for your operating system. Since I am installing this on Windows I am downloading the 64 bit Windows version.
Go ahead and install it !
Click on the Firebug 2.0.19 link and you will be redirected to the following page
Click on the Add to Firefox button
The add-on starts downloading.
When the add-on is successfully downloaded the Install button is enabled. Click it to complete the installation.
If you navigate to the Extensions in your browser notice Firebug is now installed and enabled.
Navigate to any page and click on the bug.
Firebug opens at the bottom of the page and you can investigate the loaded DOM for the page.
Navigate to https://addons.mozilla.org and in the search bar, search for FirePath. Once it is located click on the Add to Firefox button
Once installed Firefox might ask you to restart. Do That. Then navigate to a page of your choice and click on the Firebug button situated on the top right next to the Search bar. Notice the new FirePath tab.
Navigate to https://addons.mozilla.org and in the search bar, search for Firefinder. Once it is located click on the Add to Firefox button
Once installed Firefox might ask you to restart. Do That. Then navigate to a page of your choice and click on the Firebug button situated on the top right next to the Search bar. Notice the new Firefinder tab.
A Demo to look for some elements
Ok so now that we have the tools installed, how do we go about using them? Let’s use my blog site as an example: I would like to be able to address the Search input box and the Search button. How do I go about it? Easy !
Click the Firebug button
Once Firebug opens at the bottom click the inspect button
Next move the mouse to the desired web element, in this case the search input box and click it.
notice in the HTML tab, the relevant line representing the web element is automatically found and highlighted.
Notice the type of element which is an input, the class name and the other attributes. These can all be used in identifying a web element.
Click the FirePath tab , then again click the inspect button and then click the search text box. Notice the xpath that is automatically created to specifically point to the Search text box.
xpath for search image
Notice that the xpath itself is very specific and can become brittle in the future if this page is changed. To avoid such situations it is recommended to try and simplify and generalize the xpaths used in your tests. Let’s try :
The above returns one matching node which is the same as the Search text box. If you hover on the matching result you can see what web element gets highlighted.
Ok let’s move on to addressing the SEARCH button.
Click the inspect button
Next move the mouse to SEARCH button and click it.
Notice that the xpath :
Let’s change it a bit. Let’s try :
We get the following result:
Bye Bye Firebug… Hello Firefox Dev Tools
Since the Firebug add-on is now in maintenance mode and nearing extinction, we need to look at the new way of doing things. It is time to get acquainted with the built-in Firefox dev tools and figure out how to achieve retrieving the same information to locate web elements.
We will use my blog again for this example:
Navigate to my blog
Press F12 to open up DevTools.
Select the console tab and type in :
Press enter and notice the result. The Console returns an array of one element in it, which is what we want.
This turns out to be the SEARCH button. If you hover over the element in the array you get the following visualisation.
That’s it ! This is the new way of checking for elements, in this case using xpaths (my favourite). I know I know, it is not as helpful as FirePath, but the reality is that the default result provided by FirePath tends to be a lazy way for a developer to get the gist of the xpath and then clean it up. You can do this also by looking at the html directly and then test it out by doing $x(“put your xpath here”) in the console in the Firefox devtools.
So there you go. Do spend time familiarising yourself with xpaths. There are numerous resources out there. Remember Google is your friend.