Testing AJAX functionality with UniTESK

1. SYRCoSE 2010 Testing AJAX functionality with UniTESK Yevgeny Gerlits, a postgraduate student from Lomonosov Moscow State University

2. AJAX vs. Classic web application Classic AJAX Client side (browser) Client side (browser) User interface User interface User interface event DOM change AJAX engine HTTP request HTTP response (HTML, CSS…) Asynchronous HTTP request HTTP response (XML, JSON…) Web server Web server Back end Back end Server side Server side

3. Client side (browser) User interface AJAX engine Web server Back end Server side Object of testing function onEventHandler() { } function callback() { } Possible results of JavaScript execution: • client side state changes including DOM, global JavaScript variables, and Cookies; • page reloads; • asynchronous HTTP requests; • …

4. A problem: AJAX engine itself may initiate JavaScript processing Client side (browser) User interface JavaScript functions to create delayed actions: • setTimeout (script, timeout); • setInterval (script, timeout); • clearTimeout (script, timeout); • clearInterval (script, timeout) AJAX engine Web server Back end Server side

5. Technique for testing AJAX engine UniTESK – a general purpose, model based test development technology Test suite for systems with synchronous interfaces: • The next stimulus may be only after the reaction to the previous one. • SUT may not initiate interaction with its environment. Test suite for systems with asynchronous interfaces: • SUT may simultaneously interact with a couple of systems. • SUT may initiate interaction with its environment.

6. UniTESK test suite architecture for systems with asynchronous interfaces Formal descriptions:  Test scenario Model state Specification  Hyperoracle State mediator Oracle Test scenario  Interaction register Catcher Mediator Components in the target programming language: Action mediator Application under test  Catcher

7. Action mediator Stimulus Catcher Detects reactions Browser N Browser 1 User interface User interface AJAX engine AJAX engine Reaction Stimulus Proxy server Web server Elaboration of the specification for AJAX engine • Represent possible interactions of AJAX engine with its environment as a set of atomic stimuli and reactions. • Extract functional requirements to the behavior of AJAX engine. Represent the requirements in the form of pre-conditions and post-conditions of stimuli and reactions, and model state invariants.

8. Test-4 Test-3 Test-N Test-6 f(App-State-1, Model-State-1) f(App-State-4, Model-State-4) UniTESK tests for AJAX engine A single test (Test-1): • mediator and proxy server apply a set of stimuli; catcher detects the reactions and saves their results; • hyper oracle verifies the results of the stimuli and reactions. Application states: S1 R1 R2 App-State-1 App-State-4 Appropriate model states: pre(S1) post(S1), pre(R1) post(R1), pre(R2) post(R2) Model-State-1 Model-State-4 A test suite (covers the requirements in specification by traversing a FSM): Test-5 Test-1 Test-2

9. Approbation process • Collect 8 AJAX design patterns. • Choose a pattern and implement it in a simple AJAX application. • Develop a test system for the application using UniTESK. • Assess the fault revealing capability of the test system: • Inject a single fault into the AJAX engine of the application. • Run the test system. • See if the fault has been revealed. 8 times 5 times

10. AJAX design patterns and their implementations An AJAX design pattern: How to design an AJAX application so that it would behave in a certain way or a particular interactivity effect could be achieved? Pattern Predictive Fetch: • Problem: How can you make an AJAX application respond quickly to user activity? • Solution: Have the application anticipate likely user actions and call the server in preparation. • Implementation: A multi-page article    1 2 N

11. Injected faults Fault examples: • removal of user interface event handlers; • building incorrect HTTP requests; • changing unique identifiers of HTML elements; • removal of an HTTP request object; • faults that result to the wrong processing of data in callback functions; • … Characteristics of the injection process: • Faults are injected at the client side of AJAX applications. • There is no special fault injection procedure.

12. Test results

13. Conclusion and future work An approach to testing the client side of AJAX applications (AJAX engine) with UniTESK. Future work: • enhance the automation level of the UniTESK approach; • apply the UniTESK approach to a couple of AJAX applications available on WWW; • design a new approach for testing both the client side and the server side of AJAX applications

14. Thank you!

15. References • I. Bourdonov, A. Kossatchev, V. Kuliamin, and A. Petrenko, “UniTesK test suite architecture,” Proc. FME 2002. LNCS 2391, Springer-Verlag, 2002, pp. 77-88. • I. Bourdonov, A. Kossatchev, V. Kuliamin, and A. Petrenko, “UniTesK: Model Based Testing in Industrial Practice,” Proc. the 1st European Conference on Model-Driven Software Engineering (ECMDSE), Nuremberg, Germany, Dec. 11-12, 2003, pp. 55-63. • A. Khoroshilov., “Specification and Testing Systems with Asynchronous Interfaces,” Preprint of the Inst. for System Programming, Russ. Acad. Sci., Moscow, 2006. • V.   Kuliamin , A. Petrenko, and N. Pakoulin, “Practical Approach to Specification and Conformance Testing of Distributed Network Applications,” Proc. ISAS'2005, Berlin, Germany , April 25-26, 2005, pp. 60-73. • N. Pakulin and A. Khoroshilov, “Development of formal models and conformance testing for systems with asynchronous interfaces and telecommunications protocols,” Programming and Computer Software, vol. 33, number 6, Nov. 2007, pp. 316-335, doi: 10.1134/S0361768807060035.

16. Contact YevgenyGerlits E-mail: gerlits@ispras.ru Lomonosov Moscow State University, Faculty of Computational Mathematics and Cybernetics, System Programming department

17. Comparison with the existing techniques Proposed by the scientific community: • Invariant Based Testing; • State Based Testing; • Search Based Testing Used in industrial practice: • Capture and Playback; • Unit testing framework + software library to simulate user actions and programmatically access resulting DOM states FSM based approaches

18. First AJAX engine testing problem - a real situation of a set of users working with a single application

19. Action mediator Stimulus Catcher Browser N Browser 2 Browser 1 Reaction User interface User interface User interface AJAX engine AJAX engine AJAX engine Reaction Stimulus Proxy server Web server Solution to the first AJAX engine testing problem - a real situation of a set of users working with a single application Proxy server simulates server-side state changes that may be carried out by the users 2…N.

20. Asynchronous HTTP request 1 Asynchronous HTTP request 2 Response to the HTTP request 2 Removal of DOM element X Response to the HTTP request 1 Modification of DOM element X Second AJAX engine testing problem - concurrent asynchronous HTTP requests DOM AJAX engine Web server

21. Action mediator Stimulus Catcher Browser N Browser 1 Detects reactions User interface User interface AJAX engine AJAX engine Reaction Stimulus Proxy server Web server Solution to the second AJAX engine testing problem - concurrent asynchronous HTTP requests A test for concurrent HTTP requests: • Action mediator applies stimulus 1; • Proxy server intercepts HTTP request 1; • Action mediator applies stimulus 2; • Proxy server intercepts HTTP request 2; • Proxy server emulates response to HTTP request 2; • Proxy server emulates response to HTTP request 1.

22. Third AJAX engine testing problem - AJAX engine itself may initiate JavaScript processing JavaScript functions to create delayed actions: • setTimeout (script, timeout); • setInterval (script, timeout); • clearTimeout (script, timeout); • clearInterval (script, timeout)

23. Solution to the third AJAX engine testing problem - AJAX engine itself may initiate JavaScript processing We impose a set of restrictions. An AJAX application may demonstrate a set of reactions but: • after an external stimulus; • the set of reactions is finite; • there is an upper bound of time intervals, during which the reactions appear.

24. Client side (browser) User interface AJAX engine Web server Back end Server side Fourth AJAX engine testing problem - how to programmatically detect AJAX engine reactions and get client side state changes? user interface event handlers callback functions setTimeout (CODE, timeout)

25. Solution to the fourth AJAX engine testing problem - detecting AJAX engine reactions Existing approaches: • Selenium RC testing tool - waitForCondition(sctipt, timeout); • SWEA testing tool – AJAX complete event; Our approach: • User interface event handlers, callback functions, and functions working with timers are programmatically instrumented to monitor the results of their execution.