I have a web application which uses angular 1.5 with Typescripts. Angular will call web api. The api uses Entity framework. Now I want to measure the performance of the page for various events like page load, button click etc.
Is there any tool available which can provide information for time taken to execute controller action, time taken by entity framework etc?
I want tool which can provide aggregated information when page is loaded or I click on any button.
I am fine even if there are tools which can provide above information separately.
Did you try Chrome DevTools? you should check these links: the timeline tool and analyze runtime performance.
In short: you should open the Developer tools, go to profiles and start a recording, then you perform the actions you want to measure (e.g. click a button) and stop the recording. You will see how long each of the method calls take. Here a how to on how to do recordings and a couple of tips.
There are also other options like Firebug.
There are few tools which allows to analysis your code, watcher and digest cycle. You can also use Timeline tool in Chrome.
https://chrome.google.com/webstore/detail/angular-performance/hejbpbhdhhchmmcgmccpnngfedalkmkm?utm_source=chrome-app-launcher-info-dialog
https://augury.angular.io/
There are a couple performance indicators in angular applications:
For example you can measure the digest cycle time:
$timeout(() => {
angular.element(document).injector().invoke(() => {
let start = performance.now();
$rootScope.$apply();
console.log(performance.now() - start);
});
});
Related
We are rebuilding an existing JSP web application using AngularJS. In our existing application we use the page load time metrics extensively.
With the SPA there are no real page load times. How can we track user experience of performance through GA in this scenario?
If you want to know how long something takes you can use User Timings - this somewhat resembles event tracking, only you pass a duration as value parameter (i.e. you need to start a timer when your thing starts, stop if when it's ready and the time measured is the value for the user timing):
ga('send', {
hitType: 'timing',
timingCategory: 'SPA Content change',
timingVar: 'load',
timingValue: 100
});
We have an Angular single page application that loads fairly fast. However, there are data components in the application that load (and render) asynchronously. I've looked all over the web and it seems like a fairly common problem, but without a good solution. Are there any tools out there that can perf benchmark just a component of a page, rather than the entire page? And we need to know the time between the request made for data and when rendering that data is completed.
Try the open source Chrome plugin Angular-performance, you can benchmark specific controllers, digest time and events in Angular applications: https://github.com/Linkurious/angular-performance
Any chance of getting a reference to that particular view?
Similar to React + Flux, I believe Angular would be classified as a "current-state" front-end framework. Because it's functional programming and not object oriented. This is the reason company's have in the past switched over to angular, because of the speed and asynchronous nature of javascript.
If there are certain elements you don't want the DOM to render until conditions are met, I would recommend looking into ng-show and ng-hide.
https://docs.angularjs.org/api/ng/directive/ngShow
I hope that helps? I am not sure what situation in particular you don't want rendering asynchronously? Let me know how I can help.
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)
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.
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!
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.
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)
I was watching a youtube video and in that there was an example:
loginPage.userName.sendKeys ...
loginPage.password.sendKeys ...
loginPage.loginButton.click();
browser.waitForAngular();
expect( ...
I thought Protractor was coded in such a way that it would do the wait without the need for a browser.waitForAngular().
Can someone confirm if I need the waitForAngular() in this example?
I think that whether you need browser.waitForAngular() depends on the application you're testing.
Not 100% sure on what the conditions are, but I have found that I required this method when my test is performing a task that requires a response from a server, such as changing a user's password in a web app.
On another note, in my experience, browser.waitForAngular() is not robust enough to handle every type of wait condition I've needed to perform.
For example, I'm writing tests for a web application where the user logs in through a non-Angular page and is directed to an Angular page. If I want to make assertions to test the elements present on the login landing page, I can't use browser.waitForAngular() because non-angular pages do not have access to this method. I've found that a more reliable way to tell the driver "wait for the page to fully load, then check the text present on the page" is to use browser.wait to explicitly wait for the presence or visibility of an element on the next page that you know will take the longest to load.
What is the best approach to implement Mixpanel analytics for tracking share plugins.
Tracking third-party social network share plugins need a complex soultion and is possible if the social network API supports callbacks. Then you can catch them on your website and fire tracking events. That is the best and the most accurate method.
On the other side - if you use your own Share buttons - there are a lot of possibilities.
For Facebook - check this solution:
Facebook like and share button with callback
In function(response) you need to call Segment TRACK method.
Another solution I used in addition to the provider's callbacks when working with tracking iframes/javascript social widgets was:
https://github.com/finalclap/iframeTracker-jquery
pretty darn simple and nifty if you ask me!
jQuery(document).ready(function($){
$('.iframe_wrap iframe').iframeTracker({
blurCallback: function(){
// Do something when the iframe is clicked (like firing an XHR request)
}
});
});