reAJAX - FBK | SE - Fondazione Bruno Kessler

More documents

Recommendations

Info

When reAJAX has been correctly installed, the browser list of “Tools” contains reAJAX and it provides the following set of commands: 1. MutatorsInspectos 2. ABS 3. Tracer 6. BuildFSM 7. Close While the Tracer has 2 sub-menu commands: 4. Tracer Start 5. Tracer Stop In the rest of this tutorial we show a scenario of the reAJAX use. The scenario is based on the Cart application implementation (source code are downloadable at the reAJAX page) and it is used to show how to execute all main features of reAJAX to analyze a Web application and generate its Finite State Machine. reAJAX can be applied to fully and single-page AJAX Web application, to Web applications that partially use AJAX (e.g., in part of this GUI); and also in conventional (e.g., not AJAX-based) application. However, we recall that its natural use and its main goal are to analyze full-AJAX application. The first step of each reAJAX execution consists in loading the stating page of the target application into the Mozilla browser enriched with the reAJAX extension. Then the execution scenario can proceed identifying the following five main steps: 1a. Section of the inspector elements in the DOM of the application page; 1b Selection of the GUI-events that must be monitorized since they can change the state of the selected mutator elements in the pages; 2 For each inspector, definition of its abstraction function (ABS) that will be used by reAJAX to record the value reached at runtime by each inspector; 3 Application execution tracing by starting and stopping the reAJAX tracer; 4 Construction of the Finite State Machine (FSM) by using the collected execution traces; 5 (extra reAJAX) Visualization of the generated FSM in the DOTTY ( http://www.graphviz.org/ ) viewer; Notice that the steps 1a, 1b, 2, and 3 can be iteratively executed (also in different sequences) and that it is possible to go through these different steps and go back without any kind of problem and/or limitation and in which moment.
Step 1a. Section of the inspector elements in the DOM of the application page First of all, we recall that an inspector element is an element of the DOM structure of an HTML page (like a list, a field, an area, a graphical element, a container element, etc.) that is related to the application domain and so that represents a state variable for the application state. Those inspector elements must be selected by the user by means of the DOM-viewer provided by reAJAX. These inspectors will be the DOM element that will be monitorized and evaluated at runtime by reAJAX to infer the state of the application. With the aim of selecting the set of inspectors, reAJAX provides an enriched DOM-viewer. The viewer is a software module that add to the current page (of the target application) a draggable popup in which reAJAX shows the complete list of HTML elements of the current page (and ordered list of HTML tag related to the element of the DOM structure of the target page). Figure Figure 2 shows the popup with the list of HTML element (, etc. in the left of the popup) for the starting page of Cart. To focus and simplify the management of this list, reAJAX provides a filter capability feature that can be used to filter out some non-relevant DOM elements. By using the filter, the user can limit the type of the element shown in the DOM list by the DOM-viewer. A list of HTML tag (e.g., “button, input, a”) can be used to filter the viewer element while by using the “*” all elements of the current will be viewed in the list at each moment. In the figure, a filter has been applied to the current page. When the user passes the mouse over an element of the DOM list (see Figure 2 in which a element is highlighted), reAJAX highlights the graphical element in the target page by means of a dashed red square (see Figure 2 what happens for the selected example). So that the user can see in the current page the element and its position. When the highlighted element is selected (by using a mouse click) by the user some information (mainly its id/name and its XPath address in the DOM page) are stored in the list of inspector elements for the current page. The list is shown in the right part of the reAJAX popup. The list of selected inspectors can be stored at each time in a file so that reAJAX can reload that inspector list at each moment without the needs to re-applying all the selection Figure 2: Mutators Selection for Cart
Page 1: eAJAX: First-Use Example and Tutori
Page 5 and 6: DIV, SPAN, P, TEXTAREA, LI, and INP
Page 7 and 8: Step 4 Construction of the Finite S

reAJAX - FBK | SE - Fondazione Bruno Kessler

Create successful ePaper yourself

Delete template?

Save as template?