SYRCo SE 2010 Testing AJAX functionality with Uni

SYRCo. SE 2010 Testing AJAX functionality with Uni. TESK Yevgeny Gerlits, a postgraduate student from Lomonosov Moscow State University

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

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

A problem: AJAX engine itself may initiate Java. Script processing Client side (browser) Java. Script functions to create delayed actions: n set. Timeout (script, timeout); n set. Interval (script, timeout); n clear. Timeout (script, timeout); n clear. Interval (script, timeout) User interface AJAX engine Web server Back end Server side 4

Technique for testing AJAX engine Uni. TESK – a general purpose, model based test development technology Test suite for systems with synchronous interfaces: 1. 2. 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: 1. 2. SUT may simultaneously interact with a couple of systems. SUT may initiate interaction with its environment. 5

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

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

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

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

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: n Problem: How can you make an AJAX application respond quickly to user activity? n Solution: Have the application anticipate likely user actions and call the server in preparation. n Implementation: A multi-page article 1 2 N 10

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

Test results AXAX applic ation for Intr Rev % o e d a u l c e e d d 1. Explicit 5 Submis sion 5 2. Periodic Refres h 5 4 3. 5 Submis sion Throttl ing 10 0 % 80 % 4 80 % 12

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

Thank you! 14

References n I. Bourdonov, A. Kossatchev, V. Kuliamin, and A. Petrenko, “Uni. Tes. K test suite architecture, ” Proc. FME 2002. LNCS 2391, Springer-Verlag, 2002, pp. 77 -88. n I. Bourdonov, A. Kossatchev, V. Kuliamin, and A. Petrenko, “Uni. Tes. K: Model Based Testing in Industrial Practice, ” Proc. the 1 st European Conference on Model-Driven Software Engineering (ECMDSE), Nuremberg, Germany, Dec. 11 -12, 2003, pp. 55 -63. n A. Khoroshilov. , “Specification and Testing Systems with Asynchronous Interfaces, ” Preprint of the Inst. for System Programming, Russ. Acad. Sci. , Moscow, 2006. n 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 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/S 0361768807060035. 15

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

Comparison with the existing techniques Proposed by the scientific community: n Invariant Based Testing; n n State Based Testing; Search Based Testing FSM based approaches Used in industrial practice: n Capture and Playback; n Unit testing framework + software library to simulate user actions and programmatically access resulting DOM states Advantages of our approach Disadvantages of our approach Modular test suite architecture High fault exposing capability Labor intensive, i. e. the automation level is low Ability to test concurrent HTTP request May reveal only client-side faults Specification-based test coverage measurement 17

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

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

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

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

Third AJAX engine testing problem - AJAX engine itself may initiate Java. Script processing Java. Script functions to create delayed actions: n set. Timeout (script, timeout); n set. Interval (script, timeout); n clear. Timeout (script, timeout); n clear. Interval (script, timeout) 22

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

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

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