Analysis and Testing of Ajax-based Single-page Web Applications
Analysis and Testing of Ajax-based Single-page Web Applications
Analysis and Testing of Ajax-based Single-page Web Applications
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
1 crawl My<strong>Ajax</strong>Site {<br />
2 url: http://spci.st.ewi.tudelft.nl/aowe/;<br />
3 navigate Nav1 {<br />
4 event: type=mouseover xpath=/HTML/BODY/SPAN[3];<br />
5 event: type=click id=headline;<br />
6 · · ·<br />
7 }<br />
8 navigate Nav2 {<br />
9 event: type=click<br />
10 xpath="//DIV[contains(.,"Interviews ")]";<br />
11 event: type=input id=article "john doe";<br />
12 event: type=click id=search;<br />
13 } · · ·<br />
14 }<br />
Figure 5.4 An instance <strong>of</strong> CASL.<br />
5.3.8 CASL: Crawling <strong>Ajax</strong> Specification Language<br />
To give users control over which c<strong>and</strong>idate clickables to select, we have developed<br />
a Domain Specific Language (DSL) (van Deursen et al., 2000) called<br />
Crawling <strong>Ajax</strong> Specification Language (CASL). Using CASL, the developer can<br />
define the elements (<strong>based</strong> on IDs <strong>and</strong> XPath expressions) to be clicked, along<br />
with the exact order in which the crawler should crawl the <strong>Ajax</strong> application.<br />
CASL accepts different types <strong>of</strong> events. The event types include click,<br />
mouseover, <strong>and</strong> input currently.<br />
Figure 5.4 shows an instance <strong>of</strong> CASL. Nav1 tells our crawler to crawl by<br />
first firing an event <strong>of</strong> type mouseover on the element with XPath /HTML/BO-<br />
DY/SPAN[3] <strong>and</strong> then clicking on the element with ID headline in that order.<br />
Nav2 comm<strong>and</strong>s the crawler to crawl to the Interviews state, then insert the<br />
text ‘john doe’ into the input element with ID article <strong>and</strong> afterward click on<br />
the search element. Using this DSL, the developer can take control <strong>of</strong> the way<br />
an <strong>Ajax</strong> site should be crawled.<br />
5.3.9 Generating Indexable Pages<br />
After the crawling <strong>Ajax</strong> process is finished, the created state-flow graph can<br />
be passed to the generation process, corresponding to the bottom part <strong>of</strong> Figure<br />
5.3.<br />
The first step is to establish links for the DOM states by following the<br />
outgoing edges <strong>of</strong> each state in the state-flow graph. For each clickable, the<br />
element type must be examined. If the element is a hypertext link (an a-<br />
element), the href attribute is updated. In case <strong>of</strong> other types <strong>of</strong> clickables<br />
(e.g., div, span) we replace the element by a hypertext link element. The href<br />
attribute in both situations represents the link to the name <strong>and</strong> location <strong>of</strong> the<br />
generated static <strong>page</strong>.<br />
4 http://stilbuero.de/jquery/history/<br />
5 http://code.google.com/p/reallysimplehistory/<br />
Chapter 5. Crawling <strong>Ajax</strong> by Inferring User Interface State Changes 117