How to record Angular JS Single Page Applications (SPA)

These days VuGen offers a number of ways to record SPA web application, including TruClient and importing Session Archive Zip (SAZ) files from fiddler. However, you can still use HTTP/HTML protocol in VuGen. In doing so you may encounter a number of issues when recording the HTTP RESTful service calls.

To create robust maintainable scripts, JDS recommends using HTML-based recording rather than URL-based scripts. The ‘HTML Mode’ will not extract every resource URL into the script but will either encapsulate them into the initial calling URL or add them to the EXTRARES section of the step:

web_url("home",
"URL=https://xxxxxxx.xxx",
"TargetFrame=","Resource=0",
"RecContentType=text/html",
"Referer=",
"Snapshot=t1.inf",
"Mode=HTML",
EXTRARES,
"Url=../fonts/OpenSans/OpenSans-Regular-webfont.eot", ENDITEM,
"Url=../fonts/fontawesome-webfont.eot", ENDITEM,
"Url=../media/bootstrap.min.css", ENDITEM,
"Url=../css/jds-logo-white.png", ENDITEM,
"Url=../fonts/OpenSans/OpenSans-Light-webfont.eot", ENDITEM,
"Url=../media/jds_bg.jpeg", ENDITEM,
"Url=../fonts/OpenSans/OpenSans-Semibold-webfont.eot", ENDITEM,
"Url=../css/bg3.jpg", ENDITEM,
"Url=../css/32px.png", ENDITEM,
"Url=../fonts/OpenSans/OpenSans-Bold-webfont.eot", ENDITEM,
"Url=../css/background.jpg", ENDITEM,
LAST);

This is a problem is you want to measure the transaction times of RESTful service calls used in SPA frameworks.

To enable the VuGen recorder to extract the Angular JS calls as separate steps, we must change the “Recording Options -> HTTP Properties -> Advanced” recording scheme to not record responses with headers:

Content-Type application/javascript

As resources.