Testing Single Page Applications (SPAs)

Single-page applications are the new wave of web applications being developed in today's technological industry. The benefits of developing such applications can't be overstated. They relieve the servers of enormous load and bring faster responsiveness to the end user. They are architected differently from traditional web applications, which make them slightly different to develop test scripts for.

How to do it…

In this recipe, we will work through creating a script for an SPA. Perform the following steps:

1. Launch JMeter.
2. Add HTTP(S) Test Script Recorder and set it up for recording (see the Recording a script via JMeter HTTP proxy recipe).
3. Click the Add suggested Excludes button.
4. Start the HTTP(S) Test Script Recorder.
5. Point your browser to http://angular.github.io/peepcode-tunes/public/.
6. Add the two available albums (on the right) to your playlist (on the left).
7. Randomly select a song to listen to.
8. Use the buttons on the player to jump to the next or previous song or pause them.
9. Stop the HTTP(S) Test Script Recorder.
10. Add a listener to your test plan.
11. Save and run the test plan.

How it works…

The actions of the user are tracked and recorded via the script recorder we set up in step 2. Like traditional web applications, we record all actions and exclude irrelevant static resources, such as images, JavaScript, and style sheets. Every call that makes a server call to backend services is also recorded as part of the test plan and is available for replay during test execution. At the end, we have a script that is almost identical to what we would get when recording a traditional web application.

There's more…

Most SPAs tend to be JavaScript-intensive. As JMeter isn't a web browser, JavaScripts embedded within a page or included from a separate file altogether won't be executed. With this in mind, it means JMeter can't be accurately used to measure page load times or browser DOM rendering. What it can do, however, is record any calls made to the server from your JavaScript files and play those back when the test is re-executed.

Such calls have an impact on the servers and are critical to measure to know how slow or fast a user's experience will be when the application is under considerable load.