Use Web Element property to identify element

In my earlier post I demonstrated how to get the web element property using the inbuilt tools of browsers. Here I will explain how to use those properties to make a unique combination to identify web element. 

Web page or html page is consists of many types of web elements, like div, input, span, table, anchor, button, ui, list etc. and can be custom tags as well but this is very advance I will cover this in some other post. The web automation can be start using these tags and properties. see below screenshot of Google.com where search box is consists of multiple tags. 

you can see the tags and attributes, the attributes defines the behavior, look and feel of the element like style, input type, events, event scripts, link image  or external scripts embedded etc. 

Here is another example embedded scripts and embedded url with the web element

How to use these properties to identify your web element

id: If any element has "id" property then it is most appropriate to use as element identifier. "id" is mostly unique but in some situation it can be duplicate also. In that case we can combine with other property to identify uniquely (We'll see later how to combine)

class: If any element has this property then it can also be used, but remember same class name can be used by multiple tags or elements. So choose carefully.

tag-name: Tag name is always used with the combination of other property, there are very very limited chances that any web page would have only one type of tag.

name: This attribute is most unique after "id" property and limited chances are there which can duplicate with other elements attributes. 

style: Mostly found common in many elements, so can not be used alone. It can be used with other attributes as combination to identify.

Now our challenge is to use them with example. For trying out practical example, please refer this post Automate Web Based Application using shdocvw.dll & mshtml.dll and C# 

In the first screenshot we can use the id="gbqfq" which is unique to identify textbox, but there are multiple input tags (move your mouse to other tag name in same section) pointing to the same textbox. So which one is the correct one? If a tag has visibility: hidden; or style: hidden or type="hidden" Do not use these elements, as it will be invisible until some events are fired. or may be you can use after required event is fired. See the example below

HTMLDocument doc = new HTMLDocument();
InternetExplorer ie = new InternetExplorer();
ie.Visible = True;
ie.Navigate("http://www.google.com");

// Store HTML Document object 
doc = ie.Document

HTMLInputElement searchTxtBox = doc.getElementsByID("gbqfq");

What happen if you have no "id" in web element?

We can try finding the similar elements and then identify the one which you need.. let me give an example. 

HTMLInputElementCollection textBoxes = doc.getElementsByTagName("input")
foreach(HTMLInputElement textBox in textBosex)
{
        if (textbox.className == "gbqfif")  // or if (textbox.getAttribute("class") == "gbqfif")
       {
               textBox.Value = "Automation Testing";
               break;
        }

// or you can even try this or combine other attributes as well.
        if (textbox.className == "gbqfif" 
                && (textbox.getAttribute("style").contains("visibility: hidden;") == false)
                && (textbox.getAttribute("type") != "hidden"))
        {
               textBox.Value = "Automation Testing";
               break;
         }
}

Searching element from web page is an exercise of combining the elements to identify element uniquely. However you may find it bit laborious or complex, this will build your confidence to use any automation framework without prior training. 

How Automation Framework like, QTP, AutoIT, VSTS, Rational Robot?

Most of the modern automation framework use the same technique, but instead of finding single attribute from element they capture the entire property and show in GUI format. See the below element snippet for google text box

<input id="gbqfq" class="gbqfif" name="q" type="text" autocomplete="off" value="" dir="ltr" spellcheck="false" style="border: none; padding: 0px; margin: 0px; height: auto; width: 100%; background-image: url(data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D); background-color: transparent; position: absolute; z-index: 6; left: 0px; outline: none; background-position: initial initial; background-repeat: initial initial;">

And it will be presented on automation framework something like this. Here you can see it is just showing the GUI of Gmail logo, but it has captured the entire attribute of logo element and it will make it invisible. 

This is amazing, isn't it? so why I am posting the internal part when manual tester have very good tools? well there are many reasons. By explaining at macro level you can understand the basics of automation framework, many time record play doesn't work specially when your control is very dynamic and you need to re-record your test always, you can avoid the cost of automation framework if you have very very limited automation requirement.

Keep practicing this way to identify your elements and use my other post for your practical 

Automate Web Based Application using shdocvw.dll & mshtml.dll and C# 

Post your questions or comments or suggestions. Happy automation