Web Elements – Selenium’s Golden Nuggets

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 !

Installing Firebug

Ok once it is installed we are going are going to install our first helper plugin. Firebug integrates with Firefox and then you can edit, debug, and monitor CSS, HTML, and JavaScript live in the web pages you navigate to. Although this is no longer maintained and we should be moving onto Firebug.next, this is what the old test automation developers grew up with, so it is only fair to cover it. I still use it today.

Navigate to https://blog.getfirebug.com/2017/03/01/firebug-2-0-19/

firebug link.png

Click on the Firebug 2.0.19 link and you will be redirected to the following page

Firebug 2.png

Click on the Add to Firefox button

Firebug 1.png

The add-on starts downloading.

firebug 3.png

When the add-on is successfully downloaded the Install button is enabled. Click it to complete the installation.

firebug 4.png

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 button.png

Firebug opens at the bottom of the page and you can investigate the loaded DOM for the page.

firebug highlighted and search selectedA.png

 

Installing FirePath

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

firepath1.png

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.

firepath2.png

Installing Firefinder

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

firefinder1.png

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.

firefinder2.png

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

firebug button.png

Once Firebug opens at the bottom click the inspect button

inspect.png

Next move the mouse to the desired web element, in this case the search input box and click it.

search input.png

notice in the HTML tab, the relevant line representing the web element is automatically found and highlighted.

search html.png

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 imagexpath for search.png

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 :

from

.//*[@id='search-4']/form/label/input

to

//aside[@id='search-4']/form/label/input

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.

highlighted xpath 1.png

 

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 :

.//*[@id='search-4']/form/input

Let’s change it a bit. Let’s try :

//aside[@id='search-4']/form/input

We get the following result:

xpath for search button.png

 

 

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.

ff console.png

Select the console tab and type in :

$x("//aside[@id='search-4']/form/input")

xpath inconsole.png

Press enter and notice the result. The Console returns an array of one element in it, which is what we want.

xpath in console result.png

This turns out to be the SEARCH button. If you hover over the element in the array you get the following visualisation.highlighted result.png

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.

 

 

 

 

 

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 )

Google+ photo

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

Connecting to %s