QTP - Check page synchronization, when page contain AJAX calls

QTP - Check page synchronization, when page contain AJAX calls

 AJAX (Asynchronous java and XML) is preferred solution for creating fluid applications with advance user interactivity. Traditionally browser use GET and PUT method to refresh entire page for every interaction with the server, this would create load on server and network. By using AJAX, browser and server exchange small amounts of data in (XML or JASON format) asynchronously in the background through XMLHttpRequest object with out reloading the whole page for every user action. Javascript code use the data received from the server and update HTML in browser DOM (Document object model) which contain all the elements of the browser session.

Generally we use .sync to check whether the page got downloaded successfully.
If page contains AJAX calls, .sync will not help us determine whether the page got downloaded successfully.
We need to use different techniques to conform whether the page got downloaded successfully.

It is always a best practice to implement loader icon for AJAX calls, this will help us understand when the request got completed. Insist developers to install loader icons where content is displayed based on AJAX call, this will also help user understand visually some content need to be downloaded.

Capture the element id of the loader icon. By looking at the page source code we can easily find the id or developers can help you in finding the element id.

In order to check whether the loader icon appearing or disappearing on the screen, we need to access the element style object. Style object has many properties, but now we are looking into Display property.

Different values associated with the display property are None, Block....

Object.style.display= none - Element will not be displayed
Object.style.display= block - Element will be displayed

Now you need to check these properties in page DOM.

DOM define standard way of accessing and manipulating HTML content.
We can access page DOM through QTP using .Object  

Same method is used by developers to make loader icon appear/disappear, they assign the values directly, where as we check the value.


Attaching sample code to check page synchronization having AJAX calls.
1. (objElement.style.display = "block" )TRUE, loader icon exist still data is loading.
2. I have used timers, it will wait for 50 seconds only. Some thing gone wrong if it take more time.

Set oBrow = Browser("title:=Search Results").Page("title:=Search Results")
Set objElement = oBrow.object.getElementById("ctl00_cr_UpdateProgress1")
'Print objElement.style.display
MercuryTimers("Timer1").Reset
MercuryTimers("Timer1").Start
While ((objElement.style.display = "block" ) AND MercuryTimers("Timer1").ElapsedTime < 50000)
        Set oBrow = Browser("title:=Search Results").Page("title:=Search Results")
'        Print objElement.style.display
        Wait(2)
Wend
MercuryTimers("Timer1").Stop
If MercuryTimers("Timer1").ElapsedTime >= 50000 Then
        gsExecutionStatusTestCase = conF
        gsStatusMessageTestCase = gsStatusMessageTestCase &  "Issue with the page loading, exceeded the time limit.  "  &  " # "
        Exit Function
End If                        

----