Introduction
The main intention here is to throw open the gates of open source automation to the testing community and equip the licensed tool practitioners to acquaint themselves with the knowledge required to make the transition into open source tools. Only QTP and Selenium Webdriver are considered for the sake of comparison and analysis here.
What is DOM?
To put it in simple words, the DOM is a platform and language independent convention for representing and interacting with Objects in HTML document. A web page will have objects like, a link, button, pick list, text box etc. The DOM provides the programmer with an API, which has methods that can be used to work on these objects and its properties.
In this post we will be learning only about HTML DOM (The user can later extrapolate the concepts learnt here to understand about other DOM like XML DOM and CORE DOM). The HTML DOM is a standard object model and programming interface for HTML. It defines:
- The HTML elements as objects
- The properties of all HTML elements
- The methods to access all HTML elements
- The events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
Example:
The following code gets the content (the innerHTML) of the <p> element with id=”intro”:
Example 1:
Save the above code in a Notepad with .html extension and double click on it to open in a browser to see what the code is doing. In the example above, “p” is an object which represent the static text “Hello World!” in the Webpage, getElementById is a method, while innerHTML is a property.
As you can observe, in the same HTML document we have used DOM API methods and property (inside the <script>) to manipulate the DOM object P (to extract the property and store in a variable txt). This is then printed to webpage.
Automation and DOM:
What we saw in the above example is, how DOM is used in programming in HTML. Moving forward, let’s see how this DOM concepts can help us in our Automation testing.
At the very core of any automation tool is to identify the objects in the web page and perform the task on it. Example: click a link, enter a text in text box, select a check box, pick a value from pick list etc.To perform these tasks, the first thing that the tool has to do is to define a mechanism to identify the object.
How to get the object details of any object?
Very simple. In IE, you just need to go to Tools>Developer Tools. Alternatively, you can just press the F12 key.
A window opens up as shown below
Just click on that Arrow on Right hand top corner, switch to the browser window and click on the object of your interest. When you switch back to this developer tools window, you can see that particular object properties.
QTP and DOM
1. A note on QTP Object Identification:
If you have worked on QTP, you will remember how the object spy will list down the object properties once you click on any object. You can verify most of those object properties in this developer tools window like innerHTML, outerHTML, name, id, tag, class etc. Thus, knowingly or unknowingly, we all were doing our automation with the strong support of DOM!
What the QTP will do is, store the entire hierarchy of the object properties (starting from browser window title, page title, frame title, class of object etc.) in its Object Repository, so as to recognize it during the Test Run.
Thus, in the every line of code that you write, you should specify the entire hierarchy (unless you use Descriptive programming). For Example:
Browser(“Google”).Page(“page”).WebEdit(“q”).Set “Infosys”
Note: The object identification mechanism in QTP is indisputably robust which you can see in help file of QTP. The intention here is show the link between DOM and Object property recognition in QTP.
2. QTP’s support for DOM
You may ask – If QTP is also relying on DOM, why not directly identify the object by the DOM property ourselves (manually), save the object in a variable (instead of OR) and perform the scripting?
The answer is simply yes. QTP provides us the option to do exactly that. It is the Automation test engineer who has to take a call whether to use it or not, based on the framework employed.
Let’s take a look at an example how we can achieve it.
Suppose you want to identify the Search text box of the Google using its DOM property, save it in a variable and then pass the text to it.
Example 2
Observe the 2nd line of code. We are making use of the Method – getElementsByName provided by the DOM API to access the text box.
Other Commonly used HTML DOM Methods are –
- getElementById
- getElementsByTagName
A word of Caution:
If you see in the above code block, it is mentioned that we can access the search text box using the name property of it. But that is not technically correct. The “getElementsByName” will return a collection of objects whose name is “q”. So does the “getElementsByTagName”. Observe the plurality in the word Element. Thus, in order to access and set the text in first object in the collection (array), we need to use searchTextBox(0).value. This is not the case with Id though (since it is unique and will return only single object).
The other usage of this DOM in QTP is to get the count of a particular type of objects in a web Page. Example: number of links in a page.
Example 3
The length property will return the number count of the objects in a document.
When to use DOM methods in your script?
As mentioned earlier, it entirely depends on the framework that is adopted for your test scripting. But there are certain situations where you may find it useful to use this (partly). Most of the times, this will be helpful when you are not able to access object in a WebTable in conventional way. Also, If you want to limit the OR size and don’t want to add objects unnecessarily (dynamic objects) into it and slow down your script performance, you can go for this.
Selenium WebDriver and DOM
The version 2.0 of Selenium named as Selenium Webdriver is a big leap towards the OOP approach of Automation testing.
Adding to the object oriented approach of DOM, Selenium promoters came up with another API called Webdriver which aims to mimic the behavior of Real User (End User of the web application).
As you all may know, Selenium has got no in built feature such as Object Repository to store the Test Objects. We have to interact with the object using the locators. These locators are nothing but HTML tags and attributes.
In Selenium Webdriver, instead of using the DOM methods, we use the Methods provided by the Webdriver API library to interact with the Objects.
Consider the Example 2 above. Let’s see how we achieve the same in Selenium.
Example 4
(Note: To know what driver in the above example is, please refer to selenium portal)
In the above Example, FindElement is webdriver API. By.name is the argument. The name can be replaced by one of the below methods if we need to identify the element with any other attributes such as css, name, classname, etc.:
- className
- cssSelector
- linkText
- name
- partialLinkText
- tagName
- xpath
- id
The XPATH
DOM level 3, which is the current release of DOM (released on April 2004), provided the support for what is called as XPATH.
Xpath or the XML Path language is a query language for selecting nodes from an XML document. An Xpath can be constructed using the HTML tags and attributes.
XPATH is catching up the fancy these days due to many a reasons. It is supported by W3C consortium. Currently the XPATH version 2 is in use and shortly version 3 is coming out. To know how to build the XPATH, you can refer to my earlier posts.
QTP also started supporting XPATH locator from 11.x version onwards.
Why use XPATH?
Though all the above listed 8 locators are capable of doing the job neatly, sometimes you will find that a particular object in the web page may not be having any of them having unique value or none of them being used in HTML doc at all!! In Such case, we go for XPATH which will use the combination of HTML properties of a particular object to construct the query. This can then be used to identify an object.
And in QTP, another added advantage is that you are avoiding the use of OR. Thus the performance of the script is improved.
Example,
Example 5:
Conclusion:
A primary task in Automation testing is to locate the objects, store them in repository and update them during maintenance. Tool may provide different options for us to work with objects, but it is our responsibility to see how these methods or options work. This will help us to acquire the knowledge on the domain, irrespective of the tool that we are working for
vishwasshenoy 