By Parul Wahi

What is Ajax?

Ajax, short for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user makes a change. This is meant to increase the web page’s interactivity, speed, and usability.

Testing Ajax is different and difficult

In traditional web applications, the HTML elements are already loaded in the web pages which have been fairly easy to test in an automated fashion. Unfortunately, AJAX-based web applications are not as easy or consistent to test as the traditional web applications. The problem with AJAX testing is that the web page under test will be modified asynchronously such as an element will be dynamically added based on a check box click or an element will be removed based on a list element selection, etc. 

Synchronization issues are also there. Clicking a link will not cause a page reload; instead the browser will converse with the server and refresh just a part of current page. The time delay between clicking a link and seeing the results is what makes things tricky.

Due to the asynchronous nature of the Ajax the result doesn’t come back from the server immediately. The result from server takes time but the automation tools would check the results immediately. In case of Ajax .sync and WaitProperty also doesn’t provide correct results.

Testing Ajax technology using QTP

QTP 9.5 provides the facility of testing Ajax objects. For testing Ajax objects using QTP 9.5 Web Extensibility toolkit should be installed. This will cause a mini Ajax add-in to show up besides the web add-in in the Add-in manager dialog. After installing WEB Add-in Extensibility kit, check both web and Ajax addins in addin manager and then try recording the scripts.

Still using QTP 9.2 and earlier versions? 

QTP 9.2 and previous version doesn’t support Ajax technology. But one can use DOM approach to handle Ajax applications. DOM seems to be the best option available.  

Let’s study one example:

There are some text fields on a page, having auto complete feature i.e. as we key-in the characters in the text-box, the application fetches the matching results and displays them in the pop-up area below the field. The required record from the results shown in the pop-up is then selected.

Now at the time of recording these actions, QTP records the step of entering the characters in the field. However it doesn’t record the step of mouse click over a record in the pop-up results or maybe record it as webelement.

Solution:

Generally such pop-up results are created on the fly as characters are typed in the text-field, using Ajax technique. The best thing that works for such scenarios is DOM. Usually such results are created dynamically within <SPAN>, <DIV> or <TD> elements.

These objects can be identified by an automation script using following four parameters:

1. Name of the page on which the object exists

2. HTML tag of the object e.g. INPUT, TD, DIV, SPAN

3. Name of a property of the object that can be used to identify the object uniquely from among the other objects of same type on the page.

(For hyperlink type of object it can be the “innertext” or “href” property, for table cell, it can innertext, for list-box it can be Id, name or innertext. Some objects can be identified uniquely by their innerHTML, or outerHTML. )

4. Value of the above property i.e. “txt_FirstName” (if Name property is used) or “txt_FirstNameId” (if ID property is used)

The idea is to identify the element TAG in which selected item from the  popup is stored is and displayed, whether it is in DIV tag, SPAN tag TD tag, Font tag etc and check the outerHTML of the element and see if there is any onmouseover/onclick/onchange event declared for the object. Then trigger the OnMouseover event for the result item to be selected, Bring mouse over the result item to be selected and then trigger the onclick event for the result item to be selected.

This approach uses the Document Object Model (DOM) of web-page to recognize objects on the page, access their properties to perform any action/operation on the web-objects. This approach is useful for automation of web-based apps and requires a good understanding of HTML, DOM and VBscript.

The object which can’t be accessed using DOM, for recognizing them use of Descriptive Programming feature of QTP is recommended.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.