How to performance test an AngularJS Web Application?

Question

I used to do performance testing on websites mostly with JMeter scripts.

However, more and more projects are build with frontend MVC's, such as AngularJS and a current project is loading all of it's content via angular view files, REST calls etc. Unfortunately, JMeter doesn't execute any javascript thus my load test return me the homepage in just (400ms). In real, it actually takes several seconds to load in a browser. When I check the response data, it does not contain any data yet due to Angular.

Instead of investigating the network traffic and individually loading each component (e.g. profile.html, notification.html, REST calls etc. ). Is there a product on the market or some best case I could follow that is similar to executing JMeter scripts, but considering javascript execution and loading of external resources due to javascript?

(I am not planning to profile javascript execution times. This is still to test if the infrastructure behind is capable serving xyz simultaneous users)

Answer 1

Although JMeter isn't capable of executing client-side JavaScript it can record relevant requests via HTTP(S) Test Script Recorder. Once recorded you should be able to combine all the standalone requests into one "aggregate" using JMeter's Transaction Controller

If this easy approach for some reasons doesn't play for you check out How to Load Test AJAX/XHR Enabled Sites With JMeter for more options and clues.

Answer 2

I use Chrome dev tools to do this kind of performance tests in web apps. I suggest you to read the Chrome Profiling docs (https://developer.chrome.com/devtools/docs/javascript-memory-profiling). All the section of Performance and Profiling in goolge documentation is really good!

Answer 3

You can try to use the option 'Use as Monitor' for the requests you fire up from your test.

http://jmeter.apache.org/usermanual/build-monitor-test-plan.html

They are performance killers, though. Another option is to use the listener 'Save Responses to a File' to see if the end HTML is delivered. It should not give you the ideal result but it might help.

If you want to track down performance of XHRs for a single user, you can try to play with Selenium and BrowserMob Proxy, but it is not under the stress testing, but functional testing.

Answer 4

You can try https://github.com/kidk/felt it is build for this specific purpose.

It uses PhantomJS/SlimerJS to generate load to a website, so you get all the API/JS/CSS and image calls you would get like in a normal browser. It is still a young project, but it might be the solution you are looking for.

(This is my personal project)