Our modern web applications are becoming more complex than ever, and we are building and relying on more tools and frameworks to keep up. For instance, a single page app sounds drop dead simple, right? From the user’s perspective, yes. But from the development perspective, a single page app is often chock full of complexity—heaps of JavaScript and asynchronous HTTP requests.
Today, it’s becoming easier to build more complex apps. However, convenience and magic afforded by frameworks can often make it more difficult for debugging and testing. With apps consuming more and more APIs to properly debug a problem, you’ll likely need to inspect traffic or run functional tests against those API calls. Lucky for you, there are a couple of handy tools to help: the HAR file format and Runscope.
What the HAR?
If you want to debug your web app’s API calls, web browser support for the HAR file format can be quite useful. HAR, or HTTP Archive, is a JSON-formatted archival format for logging a web browser’s interaction with a site. To generate HAR files, begin in the Google Chrome debugger/inspector and select the “Network” view in which you can export the entire list of HTTP logged HTTP requests into a HAR file. HAR exporting is also available on Firefox with the Firebug extension.
Synthetic API tests simulate actions that an end-user would take using your single page app and complement your test suite of specification-driven API tests. Building these tests couldn’t be easier with Runscope, requiring only your web browser and a HAR file export.
We'll try it by navigating to one of our favorite web apps that makes use of background HTTP requests, Google Maps. In the screenshot below, we drag the map around a few times with the mouse, triggering several background API calls. Then, we export the XHR (API) requests into a HAR file using Chrome's debugger. Inside the saved HAR file are three API requests that were created dynamically by using the web app—perfect candidates from which to build a synthetic API test.
Creating a Runscope Test with HAR Import
Creating an API test using Runscope’s UI has always been easy, but importing makes it even easier. Below, we click Import from the API Tests menu in our Runscope dashboard, then chose HAR and selected the HAR file from our computer. Instantly, Runscope creates a new synthetic API test containing the three API requests that we captured from our previous browser session.
Start testing and monitoring the APIs behind your single page web app by signing up for free today. Additionally, if you’d like to test and monitor your web app’s UI, try Ghost Inspector for automated browser testing in the cloud—it's also free!