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:

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

Related:

javascript,angularjs,internet-explorer-9,google-fusion-tables
I am trying a simple get request to a google fusion table in my angular controller. $http.get(url) .success(function(data) { //Do stuff with data }) This works in firefox, chrome, safari and IE10+ however in IE9 (Which I am requried to support) the request fails to even send and the console...

javascript,angularjs,events,angularjs-directive,angularjs-watch
I'm running into a bit of an issue solving a problem with some Angularjs functionality I'm working on. The basic idea is that I have a system where certain criteria must be met before the user is allowed to advance to the next section of the app. One example of...

javascript,angularjs,angularjs-controller
I am getting the following error in my angular application: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined. My JS and HTML are below. This is actually a part of an ionic/cordova project, but here is a simplified jsfiddle in which I encounter the same problem. My JS:...

angularjs,codeigniter,api,rest,token
I want to develop a web site with AngularJS. On the backend side I will use Codeigniter REST framework. I have some security issues and I don't want to start developing without fixing them on my mind. I don't want to use something like api key because it will be...

angularjs,constructor,typescript,undefined,this
I've found some examples online, where people create TypeScript config classes and pass them on to Angular. When I've tried it, I got the weird exception, that this was undefined. A closer look to the other implementations revealed, they only use the constructor, so, are those examples actually inherently wrong...

angularjs,html5,html-validation
I read on W3C School that to make a valid HTML page I have to add data before each angular directive in HTML file (e.g.: <p>The name is <span data-ng-bind="firstName"></span></p> or <div data-ng-app="" data-ng-init="firstName='John'"> Ok that's fine. I have two questions: Should this prefix be used only for ng- directives?...

jquery,angularjs
I have an anchor generated from a JSON database query result. The anchor represents the title of an article (I have no idea how many articles there will be). I want to be able to get the anchor text (the article title), upon clicking the anchor in order to use...

javascript,angularjs,angularjs-scope
I am using $interval for my custom stopwatch. Within the $interval function I have a variable $scope.inputValue which is binded to a range. The problem is that after each iteration of $interval (every 500ms), the most recent $scope.inputValue is not taken into account, but only the value at the initialization...

javascript,angularjs,angularjs-directive
I'm creating a live websocket application which requires grabbing the users attention upon change of a value. The following directive is used in multiple places on the same page: <span class="badge" animate-on-change animate-class="highlightWarning" animate-watch="totalAnswers">{{totalAnswers}}</span> and <div animate-on-change animate-class="colorWarning" animate-watch="rq.answer" ng-switch="question.type" ng-repeat="rq in recentResponse.answers" ng-if="rq.question == question.id"> Now, rq.answer rarely changes,...

javascript,ajax,angularjs,express
What I'm trying to do is every time a call to the backend is made, I want a spinner to load up with a dark overlay. I know I can do this by simply running the spinner before the call is made, but I'm working with multiple developers and I...

javascript,angularjs,performance,caching,angularjs-ng-repeat
We have huge rendering spikes with ng-repeat in Angular application. Main page shows a huge list of cover images ("::" and "track by" are in place). On first load it works acceptable. But if user changes the state (we use UI-Router) and goes back to the home page afterwards then...

html,angularjs
Is that possible to insert HTML elements in an Angular expression ? Let's take a few example. I would like to do something like this: <table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname ? employee.firstname : '<p style="color:red">No name</p>'}}</td> <td>{{employee.job}}</td> </tr> </table> In our controller, we have: $scope.employees = [{firstname:'Bob', job:'Developer'}, {firstname:'Paul',...

javascript,angularjs
I'm using AngularJS to build my web application, I've been always using controllers to make HTTP request, which makes things easier and clear for me. But for a better code structure, and better execution for my application, I wanted to use services instead of controllers to use the web service....

javascript,angularjs,angularjs-directive
I have a page that renders table view or div/blocks view depending on window width. But the swop between views happens very slow. Maybe I am not doing things in the best way? I basically have 2 scope variables(block and table, set to true or false) defined in the controller....

javascript,angularjs,angularjs-directive
What is the preferred way to link/bind two directives together? I have a controller with two directives, first directive is a select element, after selecting option, second directive should process selected item value. App code: var app = angular.module('plunker', []); app.controller('MainCtrl', function() { var sharedData = { selectedId: '' };...

html,css,angularjs,iframe,ionic
Can't seem to make the iframe appear with a scroll-bar. Go to https://billiving-qa.azurewebsites.net/accountant email: [email protected] pass: 111111 Reload the list with F5, then click new invoice on the right side. The content is lengthy but doesn't show the scroll-bar. My css uses the following: .frm { position: fixed; width: 100%;...

angularjs,directive
Within my directive I have the following code, which will be used to continually append to an html element. //Establishes the type of question and therefore what should be displayed app.directive('questionType', function ($http, $compile) { return { restrict: 'A', link: function (scope, element, attr, model) { switch (scope.Question.inputType) { case...

angularjs,bootstrap
So been trying to set up a navbar that collapses to a drop down when the size is under a certain number of pixels. So far I have managed to make the normal menu disappear when it goes under a certain size, but once I make the window smaller and...

javascript,angularjs
I'm using ng-repeat to fill a table. Some elements have a pretty long length, and I'm looking for a way to cut the content into multiple lines, if a specific length is reached. During research I found Angulars limitTo, but it does not exactly look like I was looking for....

javascript,angularjs
I'm trying to remove a period '.' from a value that comes from a feed, however I don't really want to do this in my app.js, rather in my view. So if I do the following: value: {{item.v_value}} I get 3.5, I'd simply like to strip out and render out...

php,angularjs,pdo,gruntjs
I'm building a "simple" AngularJS app with an articles newsfeed. My articles are stored in a mysql database, and I extract them using php PDO. I used to do this using AJAX with a simple LAMP configuration (php5, mysql, apache2), and everything worked as intended. Now I'm trying to rebuild...

angularjs
I am new in Angular and I am studying controllers. In my code I setup a simple controller access but when I tried to run in my browser I encountered a series of error messages that looks like this: "Error: [ng:areq] Argument 'personController' is not a function, got undefined In...

angularjs
I use the following select. Currently, I get empty options in my select on start. To avoid these empty options in angularJS, I want to preselect the first option in the select. But It do not work. I get an 'Cannot read property 'conditions' of undefined'. Thank you for your...

jmeter,graphite
Background: I am using graphite to store the data generated during the performance test and ideally, we would like to look at the historical graphs as well. Hence, I am creating a rootMetricsPrefix folder name dynamically in a setup thread group and assigning it to a property. The backend listener...

javascript,angularjs,service,controller,params
I'm an angular newby. I'm hoping to pass params to a service that fetches data form a server depending on those params. for example, if I want to pass a book name string and then use it in the service to concatenate with the request url. The documentation does not...

angularjs,ng-repeat
Edit: changed ng-controller to ng-app in body tag, was typo I'm new to angular and im trying to use ng-repeat to post all items in the products[] to html but the {{expressions}} come out as text rather than computing. I don't have my laptop so I'm testing all this on...

javascript,angularjs,firebase,latency
Sometimes I'm having issues with firebase when the user is on a slow mobile connection. When the user saves an entry to firebase I actually have to write to 3 different locations. Sometimes, the first one works, but if the connection is slow the 2nd and 3rd may fail. This...

javascript,angularjs,angular-ui,angular-ui-bootstrap
I am using the datepicker from bootstrap-UI for angular. I would like to toggle between two functions. now() and clear(). Is this possible inside Angular's ng-click? http://plnkr.co/edit/aMcKwXOSQwgnGwfNN9yI?p=preview The toggle has the ng-click="today()" I would like to add clear() to it, thanks. Controller Code: $scope.today = function() { $scope.dt = new...

javascript,html,angularjs,angular-strap
the data-trigger focus is not working for me ... <span data-content='foo' data-html='true' data-placement='top' data-container='body' data-trigger='focus' bs-popover> Nothing is actually happening when I am clicking on this element. If I remove data-trigger='focus' and set it to hover or click, it does work. I am using angularjs. 1.2.18 and angular-strap : 2.2.4...

angularjs
I have 2 controllers and I am calling the second controller from the function of first controller $scope.open = function () { var modal = $modal.open({ templateUrl: 'views/view1.html', controller: 'controller2', // other parameters }); /* some code */ } Both the controllers are in the same folder. There are similar...

angularjs
Abstract Hi, I think everyone has faced a problem entitled “10 $digest iterations reached”. Typically it is caused by recursively changing angular expression that never stop from changing or when watched expression generates new instance on each digest cycle. My problem is that I don't have the above kind of...

angularjs,twitter-bootstrap,angular-bootstrap
I have a dialog which is being used in 3 scenarios within the same page. I have created a controller similar to the below: var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', controller: 'ModalInstanceCtrl', size: size, resolve: { items: function () { return $scope.items; } } }); <script type="text/ng-template" id="myModalContent.html"> <div class="modal-header">...

javascript,html,angularjs,mongodb
I'm using AngularJS to extract information stored in mongodb. I'm trying to use a factory to retrieve that information using $http . I read so much information about how to do it, and no one works for me. Also I'm using node + express, the routes works fine. The problem...