1. Automating Web 2.0 AJAX-based applications with QTP. Fun with GWT apps. Igor Gershovich Connected Testing, Inc. www.connectedtesting.com

2. 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.

3. RIA Frameworks/Toolkits Adobe Flash/Flex Google Web Toolkit (GWT) Microsoft Silverlight dojo Curl jQuery And 200 or 300 others

4. RIA technologies Most of Rich Internet are based on AJAX (Asynchronous JavaScript + XML) technology Microsoft Silverlight and Adobe Flex have proprietary runtime technologies

5. RIA Youtube.com relies on Adobe Flash for Video playback

6. 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.

7. 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

8. 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

9. Simple AJAX application Clicking on Adelie Information From Server

10. This is what happened behind the screen after clicking on link Internet Server Client 4. Client processes XML Doc using JScript and updates Web page 3. Server sends HTTP Response With XML Data 1. Client creates XmlHttpRequest object using JScript then sends HTTP request 2. Server processes the HTTP request

11. Does QTP support AJAX? What people really want to ask: Does QTP work with custom objects from various JavaScript toolkits?

12. 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

13. 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.

14. Challenges Custom or 3 rd party Web controls No unique object properties Synchronization for AJAX Cascading Style Sheets (CSS) No common design framework between GWT applications

15. Automating GWT with QTP

16. 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

17. 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.

18. IE8 Developer Tools – F12 to invoke

19. AJAX Synchronization “.Sync” method doesn’t work with GWT applications since page is not getting reloaded Use “.Exist” property for Objects If.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 properties Browser("").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

20. 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” property If.WebTable().Object.Style.Display = “block” ‘visible … If.WebTable().Object.Style.Display = “none” ‘not visible

21. 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

22. 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.

23. 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)

24. Panels/Dialog boxes with Web Extensibility

25. Panels/Dialog boxes - no Web Extensibility Dialog box Included in Object Hierarchy. Object Repository/Descriptive Programming approach Dialog box excluded from Object Hierarchy Dialog box Included in Object Hierarchy. Object Repository only approach. Btn_Tags object moved Manually under Dialog box in OR hierarchy

26. Custom controls: Grids, Comboboxes, Trees… Tree Grid

27. 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.comwww.vidbob.com “Web Extensibility Lesson – Building a toolkit Support” for combobox at www.advancedqtp.comwww.advancedqtp.com

28. Combobox is a collection of objects WebElements (children) Image WebEdit WebElement (parent)

29. 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

30. 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”

31. 10.0 Extensibility Accelerator

32. QTP/IE Memory leaks UPDATE: 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.

33. 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 www.connectedtesting.com/Articles/QTP- IE%20Memory%20Leaks.pdf

34. 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") = 1 If.WebButton("Save").GetRoProperty(“disabled”) Then …. Another use of this technique – getting Tooltips from GWT objects

35. 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.

36. 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 www.connectedtesting.com/Articles/QTP- IE%20Memory%20Leaks.pdf