Post on 14-Jun-2015
Automating Web 2.0 AJAX-based applications with QTP.
Fun with GWT apps.
Igor GershovichConnected Testing, Inc.www.connectedtesting.com
Rich Internet Applications (RIA)
Web 2.0 applications or RIA are Web Applications with some features of desktop applications
RIA applications communicate with server applications, and use a plug-in or browser technologies in addition to or instead of HTML and CSS.
RIA Frameworks/Toolkits
Adobe Flash/Flex Google Web Toolkit (GWT) Microsoft Silverlight dojo Curl jQuery And 200 or 300 others
RIA technologies
Most of Rich Internet are based on AJAX (Asynchronous JavaScript + XML) technology
Microsoft Silverlight and Adobe Flex have proprietary runtime technologies
RIA Youtube.com relies on Adobe Flash for Video playback
What is AJAX? AJAX is a technique that combines and
exploits some long-standing Web technologies:• Using XHTML and Cascading Style Sheets (CSS) for
structure and presentation. • Displaying and manipulating pages using the
Document Object Model (DOM). • Using the browser's XMLHttpRequest object to
transfer data between the client and the server. • Using XML as the format for the data flowing between
the client and the server. • Using JavaScript to dynamically display and interact
with all of the above.
Advantages of AJAX
AJAX allows the server to update the current Web page as opposed to sending a new page
The single page interface increases user interactivity
Disadvantages of AJAX
Some search engines are not equipped for AJAX-based applications
Can be too much context on one page Bookmarks, Browser’s Back or Forward
navigation may not function as expected
Simple AJAX application
Clicking on Adelie
Information From Server
This is what happened behind the screen after clicking on link
Internet
ServerClient
4. Client processes XML Docusing JScript and updates Web page
3. Server sends HTTP Response With XML Data
1. Client creates XmlHttpRequestobject using JScript then sendsHTTP request
2. Server processes theHTTP request
Does QTP support AJAX?
What people really want to ask:
Does QTP work with custom objects from various JavaScript toolkits?
What is GWT?
Google Web Toolkit (GWT) is a framework for Java Developers to develop AJAX Web Applications
There are numerous widget libraries available for GWT
How GWT works in a nutshell
The developer uses Google Web Toolkit (GWT) to write AJAX front-end in the Java programming language
When it is ready to deploy, GWT compiles Java source code into optimized, standalone JavaScript files.
Challenges
Custom or 3rd party Web controls No unique object properties Synchronization for AJAX Cascading Style Sheets (CSS) No common design framework between
GWT applications
Automating GWT with QTP
HP QTP Team Commitment ( QA Forums)
The new Web 2.0 Feature Pack for HP Functional Testing (FT 10.0) has been released yesterday (10/07/09):
• “Out of the box” support for the most common Web 2.0 technologies, including: o Silverlight 3.0 o Ajax toolkits:-ASP.NET AJAX (from Microsoft) -GWT (from Google)-YUI (from Yahoo) -Dojo (open source) •New Extensibility Accelerator (EA) for Functional Testing to provide fast and easy FT add-in extensibility
IE Developer toolbar
It is a Microsoft add-on for IE6 and IE7 that aimed to aid in design and debugging of web pages. It is included in IE8.
It allows to view DOM and CSS structures Firebug is a similar tool for Firefox IE Developer supplements QTP Object Spy
which is lacking spying on CSS properties, DOM structure, Web Table cells, etc.
IE8 Developer Tools – F12 to invoke
AJAX Synchronization“.Sync” method doesn’t work with GWT applications since page is not getting
reloaded
Use “.Exist” property for ObjectsIf .WeEdit(“”).Exist(seconds) Then
Page sync – count number of objects on the page and verify that count doesn’t changed several times in a row
Use AJAX “Please Wait” Wheel object or similar objects
Dynamic Object contents – sync on object propertiesBrowser("").WebList("").WaitProperty,"items count", micGreaterThanOrEqual(5)
More on this topic:http://relevantcodes.com/qtp-synchronization-for-ajax-applications/http://www.vidbob.com/qtp/ajax-and-javascript-toolkits.html
CSS considerations
QTP sees all the objects in CSS-based applications, even if objects are hidden
CSS uses “display” property to hide parts of HTML page
To verify that part of HTML page is visible use “Style.display” propertyIf .WebTable().Object.Style.Display = “block” ‘visible
…
If .WebTable().Object.Style.Display = “none” ‘not visible
Object properties
By default GWT doesn’t generate the useful web object properties, like “html id” or “name” for object recognition mechanism of GUI test tools
It is highly recommended to work with development team to get a unique static value assigned to every web object
Working with Custom objects
2 types of Custom objects:• Panels/Dialog boxes – they are like Frames in
standard HTML. We normally don’t do any work on them. They are just a part of object hierarchy
• Custom objects like Grids, Comboboxes, Trees, etc.
We do perform actions on them.
Working with Custom objects
There are 2 ways to work with custom objects:• QTP Web-Extensibility add-in. It enables you
to develop custom support for third-party and custom Web controls that are not supported out-of-the-box
• Traditional approach – coding (Functions/Classes)
Panels/Dialog boxes with Web Extensibility
Panels/Dialog boxes - no Web Extensibility
Dialog box Included in Object Hierarchy. ObjectRepository/Descriptive Programming approach
Dialog box excluded from Object Hierarchy
Dialog box Included in Object Hierarchy. ObjectRepository only approach. Btn_Tags object movedManually under Dialog box in OR hierarchy
Custom controls: Grids, Comboboxes, Trees…
Tree
Grid
Custom controls: Grids, Combo-boxes, Trees…
To manipulate these objects we need to define custom methods and properties
Here are excellent articles on this topic:• AJAX and JavaScript tools – Web Extensibility
and Traditional approach examples for custom grids - www.vidbob.com
• “Web Extensibility Lesson – Building a toolkit Support” for combobox at www.advancedqtp.com
Combobox is a collection of objects
WebElements (children)
Image
WebEdit
WebElement (parent)
Problems with Web Extensibility add-in
It is very advanced – you need to know JavaScript and XML
Troubleshooting is difficult Distribution/Redistribution challenges –
Custom Add-in needs to be install/reinstall on each test box
Time Consuming
Traditional or Web Extensibility approach
At present moment, I stay with Traditional approach – using VBScript functions and classes
Note: We are planning to evaluate just released “Web 2.0 Feature Pack for QTP 10.0”
10.0 Extensibility Accelerator
QTP/IE Memory leaksUPDATE: Fixed for QTP 9.5 – Patch QTPNET0033
Web 2.0 applications have several times more objects on the page than traditional web applications, which means memory leaks, CPU utilization are more severe and test execution is much longer. We observed several RIAs at different clients – these applications had 800 -1,200 Web objects on a page.
QTP/IE Memory leaks QTP creates objects in IE6/IE7 (IE8 – not tested) virtual
memory - browser needs to be reopened to release these objects
Memory leak is much smaller when OR used, comparing with DP.
Test Execution is faster with OR CPU utilization is less with OR When DP cannot be avoided, adding objects to the object
hierarchy will reduce memory Leak More on this topic:
www.connectedtesting.com/Articles/QTP-IE%20Memory%20Leaks.pdf
Changing QTP Web ReplayType from Event to Keyboard/Mouse Setting.WebPackage("ReplayType")
• 1 - Runs mouse operations using browser events.
• 2 - Runs mouse operations using the mouse.
Example enabling “Save” button:Setting.WebPackage("ReplayType") = 2‘ next line will enable “Save” button.WebList("class:=gwt-ListBox").Select “First”Setting.WebPackage("ReplayType") = 1If .WebButton("Save").GetRoProperty(“disabled”) Then….Another use of this technique – getting Tooltips from GWT objects
Conclusions
Test Automation for Web 2.0 (RIA) applications is more challenging than automating traditional Web applications
Cooperation with development team is essential for automation success
RIA applications aren’t look alike because of variety of widget sets can be used for development
Advanced test automation expertise is required.
Resources Rich Seeley - “How to sort out Ajax and RIA
frameworks” Paul Tuohy - “What Is AJAX?” www.ajaxwith.com Wikipedia www.qaforums.com www.advancedqtp.com www.vidbob.com www.connectedtesting.com/Articles/QTP-IE
%20Memory%20Leaks.pdf