Close

June 25, 2017

How to performance test AngularJS or ReactJS applications?

How to test AngularJS or ReactJS performance?

How to performance test AngularJS or ReactJS applications? In this article, we are going to learn how to performance test AngularJS or ReactJS applications? Performance testing applications using the traditional web protocols are deeply slashing. Enterprise organizations transforming their web applications by enhancing with better performance and user interface. Thanks to Web 2.0 technologies. Performance testers needs to redefine their testing approach to adapt the modern web applications to validate the end to end performance. Read further to know about how to approach the performance testing for the modern web applications.

Single Page Applications

Facebooks’s React or ReactJS and/or Google’s AngularJS are playing vital role in modern web applications. Other frameworks such as Ember.JS, Vue.js and others are also playing significant role. Facebook, Airbnb, Netflix are well known examples which implemented Single Page Applications. As you scroll down, the content will be loaded appropriately. The whole page will not be loaded, instead new content will be loaded from the server in the backend.

Challenges in performance testing

Traditional web applications’ performance can be easily tested by using web protocols. In LoadRunner, we can use Web HTTP/HTML and in JMeter, we can use HTTP Samplers. During recording, all the communication between the client and server will be captured and analyzed. Later, the recorded script will be enhanced (Data Parameterization, Correlation, Transactions, Run time settings etc) for load test.

Single Page Applications behavior is totally varied than the typical web applications. During the homepage load, all the objects will be loaded to the Document Object Model. Further navigation in the application is purely based on how the application is designed. E.g. When you scroll down to the end of your Facebook feed, then the application triggers the request to the server, else there will no communication between browser and the server.

When you record any Single Page Application in LoadRunner or JMeter using web protocols, it will capture only the service calls, not the actual communication between the browser and the server.

If you load test only the web service calls, you are not simulating the actual behavior of the application in real world. We shall see how to address the challenges and how to performance test AngularJS or ReactJS applications.

Case Study

To explain the approach, I took a sample web application called TMDB which is built on ReactJS. This is a simple web application where users can search to know about their favorite movies. It will display the movie title, description, release date, box office collection, and the average ratings. The application returns only the movies details, not the TV shows.

TMDB

TMDB

How it works?

TLDR: User search for a movie in the text box. Text box lists the suggestion as the user enters. Upon clicking on the movie name in the list suggestion, the application displays the movie details.

How it works?

How it works?

Under the hood

If we analyze further, the main functionality of the app works on ReST. When the user enters each character in the input box, each call (after first character) will be triggered to the server via ReSTful service. See the below snapshot.

Network Tracing

Network Tracing

In the above snapshot, totally there are 6 web service calls to the back end. Each service call will return its output in JSON format. Below is the JSON response for the query Titanic.

{

“page”: 1,

“total_results”: 97,

“total_pages”: 5,

“results”: [{

“vote_count”: 6368,

“id”: 597,

“video”: false,

“vote_average”: 7.4,

“title”: “Titanic”,

“popularity”: 8.626191,

“poster_path”: “\/kHXEpyfl6zqn8a6YuozZUujufXf.jpg”,

“original_language”: “en”,

“original_title”: “Titanic”,

“genre_ids”: [18, 10749, 53],

“backdrop_path”: “\/fVcZErSWa7gyENuj8IWp8eAfCnL.jpg”,

“adult”: false,

“overview”: “84 years later, a 101-year-old woman named Rose DeWitt Bukater tells the story to her granddaughter Lizzy Calvert, Brock Lovett, Lewis Bodine, Bobby Buell and Anatoly Mikailavich on the Keldysh about her life set in April 10th 1912, on a ship called Titanic when young Rose boards the departing ship with the upper-class passengers and her mother, Ruth DeWitt Bukater, and her fiancé, Caledon Hockley. Meanwhile, a drifter and artist named Jack Dawson and his best friend Fabrizio De Rossi win third-class tickets to the ship in a game. And she explains the whole story from departure until the death of Titanic on its first and last voyage April 15th, 1912 at 2:20 in the morning.”,

“release_date”: “1997-11-18”

}, {

“vote_count”: 25,

“id”: 16535,

“video”: false,

“vote_average”: 6.2,

“title”: “Titanic”,

“popularity”: 1.380748,

“poster_path”: “\/8DMS4zPRF3uH4BZ8OC4GtZ8ewD9.jpg”,

“original_language”: “en”,

“original_title”: “Titanic”,

“genre_ids”: [18, 28, 10749],

“backdrop_path”: “\/4MlLN6nPOZ6RDFhPcfj4OM1meyY.jpg”,

“adult”: false,

“overview”: “Unhappily married, Julia Sturges decides to go to America with her two children on the unsinkable Titanic. Her husband, Richard also arranges passage on the luxury liner so as to have custody of their two children. All this fades to insignificance once the ship hits an iceberg.”,

“release_date”: “1953-04-11”

}, {

“vote_count”: 38,

“id”: 2699,

“video”: false,

“vote_average”: 6.4,

“title”: “Titanic”,

“popularity”: 1.344175,

“poster_path”: “\/AosgVsKPbLctVQ8hd8shEj7LJrZ.jpg”,

“original_language”: “en”,

“original_title”: “Titanic”,

“genre_ids”: [28, 18, 10749],

“backdrop_path”: “\/udi11sz1GzpVLTX2XavAWuqB9MW.jpg”,

“adult”: false,

“overview”: “A story of the romances of two couples upon the doomed ship. Isabella Paradine (Catherine Zeta Jones) is a wealthy woman mourning the loss of her aunt, who reignites a romance with old flame, Wynn Park (Peter Gallagher). Meanwhile, a charming ne’er do well named Jamie Perse (Mike Doyle) steals a ticket for the ship, and falls for a sweet innocent Irish girl on board. But their romance is threatened by the villainous Simon Doonan (Tim Curry), who has discovered about the ticket and makes Jamie his unwilling accomplice, as well as having sinister plans for the girl.”,

“release_date”: “1996-11-17”

}, {

“vote_count”: 6,

“id”: 86938,

“video”: false,

“vote_average”: 5,

“title”: “S.O.S. Titanic”,

“popularity”: 1.730052,

“poster_path”: “\/bR49KAYEBHm0WNESSsHSxLhUkhx.jpg”,

“original_language”: “en”,

“original_title”: “S.O.S. Titanic”,

“genre_ids”: [36, 18, 53],

“backdrop_path”: “\/wl2zUUC1OP8NkKgXcoNTZzvPIkn.jpg”,

“adult”: false,

“overview”: “The Titanic disaster is depicted as seen through the eyes of one couple in each of the three classes on board.”,

“release_date”: “1979-09-23”

}, {

“vote_count”: 11,

“id”: 11021,

“video”: false,

“vote_average”: 6.5,

“title”: “Titanic”,

“popularity”: 1.044216,

“poster_path”: “\/h0vUPTmuxzX6ZFHlV2gNXb18TbH.jpg”,

“original_language”: “de”,

“original_title”: “Titanic”,

“genre_ids”: [28, 36, 18],

“backdrop_path”: “\/nZo554S2DtQiZhK59TSzrJItD6X.jpg”,

“adult”: false,

“overview”: “This little-known German film retells the true story of the British ocean liner that met a tragic fate. Ernst Fritz Fürbringer plays the president of the White Star Line, who unwisely pressed the Titanic’s captain (Otto Wernicke) to make the swiftest possible crossing to New York. Interestingly, director Herbert Selpin was arrested by the Gestapo during this film’s production, and German censors banned the film for its scenes of panic and terror.”,

“release_date”: “1943-11-10”

}, {

“vote_count”: 7,

“id”: 124712,

“video”: false,

“vote_average”: 4.6,

“title”: “Titanic”,

“popularity”: 1.034142,

“poster_path”: “\/8TKjlBZtiWWL1Rt27Yzc6bYo56J.jpg”,

“original_language”: “en”,

“original_title”: “Titanic”,

“genre_ids”: [18],

“backdrop_path”: null,

“adult”: false,

“overview”: “An extraordinary re-telling of the doomed voyage that features both fictional and historical characters, ranging from steerage passengers to upper class guests.”,

“release_date”: “2012-03-21”

}, {

“vote_count”: 0,

“id”: 357517,

“video”: false,

“vote_average”: 0,

“title”: “Titanic”,

“popularity”: 1.001395,

“poster_path”: “\/yi73me6Jl3zDelS9pQK5jtMRhsc.jpg”,

“original_language”: “de”,

“original_title”: “Titanic”,

“genre_ids”: [18],

“backdrop_path”: “\/dbWq9iawF1qGeWwoCNM6eeznovc.jpg”,

“adult”: false,

“overview”: “”,

“release_date”: “1984-01-01”

}, {

“vote_count”: 0,

“id”: 455679,

“video”: false,

“vote_average”: 0,

“title”: “Titanic”,

“popularity”: 1,

“poster_path”: null,

“original_language”: “pt”,

“original_title”: “Titanic”,

“genre_ids”: [],

“backdrop_path”: null,

“adult”: false,

“overview”: “”,

“release_date”: “”

}, {

“vote_count”: 47,

“id”: 44918,

“video”: false,

“vote_average”: 3,

“title”: “Titanic 2”,

“popularity”: 2.01902,

“poster_path”: “\/tUSMxX60DGkTIoiDnUNNrJLtP3t.jpg”,

“original_language”: “en”,

“original_title”: “Titanic II”,

“genre_ids”: [28, 12, 53],

“backdrop_path”: “\/9nost5nL1EaqgcGpOpC550M0x9A.jpg”,

“adult”: false,

“overview”: “On the 100th anniversary of the original voyage, a modern luxury liner christened \”Titanic 2,\” follows the path of its namesake. But when a tsunami hurls an ice berg into the new ship’s path, the passengers and crew must fight to avoid a similar fate.”,

“release_date”: “2010-08-07”

}, {

“vote_count”: 0,

“id”: 428950,

“video”: false,

“vote_average”: 0,

“title”: “Drain the Titanic”,

“popularity”: 1.006956,

“poster_path”: “\/2A9OPQHztBsfFRMzintaOhn4Rry.jpg”,

“original_language”: “en”,

“original_title”: “Drain the Titanic”,

“genre_ids”: [99],

“backdrop_path”: “\/xVhQ4DztrnLiBNcApQMnOOMALKE.jpg”,

“adult”: false,

“overview”: “”,

“release_date”: “2016-05-05”

}, {

“vote_count”: 2,

“id”: 420341,

“video”: false,

“vote_average”: 5,

“title”: “Titanic Disaster”,

“popularity”: 1.000144,

“poster_path”: “\/2c0dUpI8CSoQT5rsbsgNGjvVuFM.jpg”,

“original_language”: “fr”,

“original_title”: “Die Katastrophe der Titanic”,

“genre_ids”: [],

“backdrop_path”: null,

“adult”: false,

“overview”: “Incredibly fascinating documentary short that is a truly historic film. We see the actual Titanic leaving for its last voyage and also all the aftermath of the tragedy. We get to view various interesting aspects including seeing Captain Smith minutes before the boat sails, the Mary Sculley and the Carpathia in action, the Carpathia returning to the shore with survivors, Captain Rostrum of the Carpathia, family members at the White Star Office in NY waiting for news and even some of the survivors pulled off the lifeboats. Anyone interested in this historic event would certainly find this film fascinating and it’s pretty sad and spooky to watch it today.”,

“release_date”: “1912-01-01”

}, {

“vote_count”: 0,

“id”: 428615,

“video”: true,

“vote_average”: 0,

“title”: “Titanic Waltz”,

“popularity”: 1.000143,

“poster_path”: “\/sS1dGIxItLGw12fqO0LSArUwoa6.jpg”,

“original_language”: “ro”,

“original_title”: “Titanic vals”,

“genre_ids”: [],

“backdrop_path”: null,

“adult”: false,

“overview”: “Based on a play by Tudor Mu?atescu, Titanic Vals is the essence of Romanian genius in comedy, with amazing performances and the beautiful absurd of the quotidian.”,

“release_date”: “1964-12-02”

}, {

“vote_count”: 3,

“id”: 4240,

“video”: false,

“vote_average”: 6.8,

“title”: “Titanic 2000”,

“popularity”: 1.284643,

“poster_path”: “\/fiEKal45vMDeGcxKXHBA4rNSWRy.jpg”,

“original_language”: “en”,

“original_title”: “Titanic 2000”,

“genre_ids”: [35, 27],

“backdrop_path”: null,

“adult”: false,

“overview”: “The luxury liner Titanic 2000 has set sail on its maiden voyage, and one of the passengers is the vampire Vladamina. Vladamina is searching for a woman she can turn into a vampire queen, and frustrated rock groupie Shari looks to be a perfect target. As various people get seduced and\/or killed as the liner continues on its doomed voyage, Shari must chose between eternity as a living dead sex slave or a frigid grave at the bottom of the ocean.”,

“release_date”: “1999-01-01”

}, {

“vote_count”: 1,

“id”: 285652,

“video”: false,

“vote_average”: 0.5,

“title”: “Titanic: The Complete Story”,

“popularity”: 1.099599,

“poster_path”: “\/A3uQMYg0Acc7pKWp0z5mDK1MYR7.jpg”,

“original_language”: “en”,

“original_title”: “Titanic: The Complete Story”,

“genre_ids”: [99, 36],

“backdrop_path”: “\/1BZnGBQsF3hgwL6vnR2reeYeshm.jpg”,

“adult”: false,

“overview”: “The \”unsinkable\” Titanic was a dream come true: four city blocks long and a passenger list worth 250 million dollars. But on her maiden voyage in April 1912, that dream became a nightmare when the giant ship struck an iceberg and sunk in the cold North Atlantic. More than 1,500 lives were lost in one of the greatest disasters of the 20th century. Now, using newsreels, stills, diaries, and exclusive interviews with survivors, Titanic: The Complete Story recounts the sensational history of the premier liner.  In Part I: Death of a Dream, the largest ship ever built is christened in Ireland before a cheering crowd of 100,000. Witness the disaster this trek becomes as numerous iceberg warnings go unheeded and the ship sinks in the icy North Atlantic.  In Part II: The Legend Lives On, over-packed lifeboats edge away from the crippled liner as a futile SOS signals flare into the night–leaving 1,500 passengers to a watery grave.”,

“release_date”: “1994-07-24”

}, {

“vote_count”: 0,

“id”: 102370,

“video”: false,

“vote_average”: 0,

“title”: “Saving the Titanic”,

“popularity”: 1.014919,

“poster_path”: “\/sAVXxt25jEHILAI3s9EGXWmY889.jpg”,

“original_language”: “en”,

“original_title”: “Saving the Titanic”,

“genre_ids”: [10770, 99, 18],

“backdrop_path”: “\/2m6NspBEu2DyuF8M3qm2dSPNz1j.jpg”,

“adult”: false,

“overview”: “In the hours after the Titanic struck an iceberg 100 years ago, a team of shipbuilders and engineers raced against time to save the stricken vessel.  Based on eye-witness accounts, this film reveals what went on below decks in the hours before the Titanic sank, telling the previously relatively unheralded stories of engineers who fought courageously to hold back the power of the sea and keep the power systems running, even when they learned that all was lost.  Most of these men died but their actions bought enough time to save many lives.  This drama-documentary tells a poignant story of self-sacrifice by the Titanic’s engineers, stokers and firemen in the face of impending death.”,

“release_date”: “2012-04-15”

}, {

“vote_count”: 0,

“id”: 180352,

“video”: false,

“vote_average”: 0,

“title”: “Asia’s Titanic”,

“popularity”: 1,

“poster_path”: “\/7zJv3FBCmjCwrA6jOLOdC6tbnvz.jpg”,

“original_language”: “en”,

“original_title”: “Asia’s Titanic”,

“genre_ids”: [],

“backdrop_path”: null,

“adult”: false,

“overview”: “The passenger ship Doña Paz collided with an oil tanker in the Philippines. 4,000 passengers died in the tragedy.  Just five days before Christmas in 1987, the passenger ship Doña Paz collided with an oil tanker off Mindoro Island in the Philippines. 4,000 passengers died in the tragedy. It was the world’s worst peacetime maritime disaster. Through dramatic first hand accounts from survivors and rescuers, transcripts from the Philippine congressional inquiry into the tragedy, archival footage and photos and a re-enactment of the collision, dissect the unfolding tragedy of Doña Paz.”,

“release_date”: “”

}, {

“vote_count”: 0,

“id”: 303710,

“video”: false,

“vote_average”: 0,

“title”: “Words of the Titanic”,

“popularity”: 1.088662,

“poster_path”: null,

“original_language”: “en”,

“original_title”: “Words of the Titanic”,

“genre_ids”: [99],

“backdrop_path”: null,

“adult”: false,

“overview”: “Readings from the diaries, accounts and letters of its passengers and crew tell the story of the Titanic, which sank 100 years ago today on its maiden voyage. The cast includes Richard E Grant, Roger Allam, Anna Madeley, James Wilby and Claudie Blakley, alongside relatives of those who were on board. Charles Dance narrates.”,

“release_date”: “2012-04-15”

}, {

“vote_count”: 1,

“id”: 305003,

“video”: false,

“vote_average”: 6,

“title”: “Titanic Arrogance”,

“popularity”: 1.043368,

“poster_path”: “\/5Ooqlobcoy0feQeMNBnZBxKKiUR.jpg”,

“original_language”: “en”,

“original_title”: “Titanic Arrogance”,

“genre_ids”: [99, 36],

“backdrop_path”: “\/pyYGg2TTdOAymOBVMCdiYVoAOUE.jpg”,

“adult”: false,

“overview”: “One hundred years ago the Titanic was launched. We bring you a new and never broadcast HD doc revealing the litany of human error, from the building process, to the tragic events that led her to be rammed into the iceberg that sank her.”,

“release_date”: “2011-06-02”

}, {

“vote_count”: 1,

“id”: 450581,

“video”: false,

“vote_average”: 10,

“title”: “Titanic 2”,

“popularity”: 1.031047,

“poster_path”: null,

“original_language”: “en”,

“original_title”: “Titanic 2”,

“genre_ids”: [35],

“backdrop_path”: null,

“adult”: false,

“overview”: “The long-awaited sequel to Titanic (1997).”,

“release_date”: “2017-04-04”

}, {

“vote_count”: 0,

“id”: 83036,

“video”: false,

“vote_average”: 0,

“title”: “Titanic Town”,

“popularity”: 1.020519,

“poster_path”: “\/zfx8YMEG3sR9t4rKYgOD3O0FoPN.jpg”,

“original_language”: “en”,

“original_title”: “Titanic Town”,

“genre_ids”: [18],

“backdrop_path”: “\/2fSn9K6Z22ngxQe3iyNyevZxdB2.jpg”,

“adult”: false,

“overview”: “Belfast 1972: The politically naive Bernie is trying to bring up a normal family in less than normal surroundings. Her best friend is accidentally shot dead by the IRA, and her neighbours are constantly raided by the army. In this climate of fear she stands up and condemns the murders. Criticising both factions, her call for a ceasefire is interpreted as an attack against the IRA, and as her peace movement takes momentum, she and her family are placed in the frontline.”,

“release_date”: “1998-08-08”

}]

}

In the JSON response, there are 20 movie results which has the title contains Titanic. When the user selects an item from the suggestions, one more web service call will be sent to the server to display the output in the page. See the below snapshot.

Search Query Response

Search Query Response

Above highlighted request has an ID 597 which returns below JSON response.

{

“adult”: false,

“backdrop_path”: “/fVcZErSWa7gyENuj8IWp8eAfCnL.jpg”,

“belongs_to_collection”: null,

“budget”: 200000000,

“genres”: [{

“id”: 18,

“name”: “Drama”

}, {

“id”: 10749,

“name”: “Romance”

}, {

“id”: 53,

“name”: “Thriller”

}],

“homepage”: “http://www.titanicmovie.com”,

“id”: 597,

“imdb_id”: “tt0120338”,

“original_language”: “en”,

“original_title”: “Titanic”,

“overview”: “84 years later, a 101-year-old woman named Rose DeWitt Bukater tells the story to her granddaughter Lizzy Calvert, Brock Lovett, Lewis Bodine, Bobby Buell and Anatoly Mikailavich on the Keldysh about her life set in April 10th 1912, on a ship called Titanic when young Rose boards the departing ship with the upper-class passengers and her mother, Ruth DeWitt Bukater, and her fiancé, Caledon Hockley. Meanwhile, a drifter and artist named Jack Dawson and his best friend Fabrizio De Rossi win third-class tickets to the ship in a game. And she explains the whole story from departure until the death of Titanic on its first and last voyage April 15th, 1912 at 2:20 in the morning.”,

“popularity”: 7.626191,

“poster_path”: “/kHXEpyfl6zqn8a6YuozZUujufXf.jpg”,

“production_companies”: [{

“name”: “Paramount Pictures”,

“id”: 4

}, {

“name”: “Twentieth Century Fox Film Corporation”,

“id”: 306

}, {

“name”: “Lightstorm Entertainment”,

“id”: 574

}],

“production_countries”: [{

“iso_3166_1”: “US”,

“name”: “United States of America”

}],

“release_date”: “1997-11-18”,

“revenue”: 1845034188,

“runtime”: 194,

“spoken_languages”: [{

“iso_639_1”: “en”,

“name”: “English”

}, {

“iso_639_1”: “fr”,

“name”: “Français”

}, {

“iso_639_1”: “de”,

“name”: “Deutsch”

}, {

“iso_639_1”: “sv”,

“name”: “svenska”

}, {

“iso_639_1”: “it”,

“name”: “Italiano”

}, {

“iso_639_1”: “ru”,

“name”: “P??????”

}],

“status”: “Released”,

“tagline”: “Nothing on Earth could come between them.”,

“title”: “Titanic”,

“video”: false,

“vote_average”: 7.4,

“vote_count”: 6406

}

Once the response is received, the application will parse the JSON and embed it in the web page. Now we will see the performance test strategy to test TMDB web application.

How to performance test AngularJS or ReactJS applications?

HPE LoadRunner Web HTTP/HTML Protocol

In this case study, we will see how to approach the performance test in HPE LoadRunner. I recorded the TMDB in Web HTTP/HTML and TruClient for Web protocols. First, we will see how it got recorded in Web HTTP/HTML protocol. Below is the transaction flow.

  1. Launch TMDB
  2. Enter the keyword in the text box
  3. Select the first item in the suggestions
  4. Close the browser.

Using the default setting, I was not able to record the application in any of the modern browsers. Later, I changed Advanced Port Mapping Settings as shown below.

Recording Settings

Recording Settings

Here is the recorded script in HPE LoadRunner 12.53.

Action()

{

//Script recorded by NaveenKumar Namachivayam – QAInsights.com

web_set_sockets_option(“SSL_VERSION”, “2&3”);

web_url(“reactjs-tmdb-app”,

“URL=https://skempin.github.io/reactjs-tmdb-app/“,

“TargetFrame=”,

“Resource=0“,

“RecContentType=text/html“,

“Referer=”,

“Snapshot=t1.inf“,

“Mode=HTML“,

EXTRARES,

“Url=https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1“, ENDITEM,

“Url=https://fonts.gstatic.com/s/lato/v13/KT3KS9Aol4WfR6Vas8kNcg.woff“, ENDITEM,

“Url=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSols5HZxlQWyS9JY5d3_L9imbk0LiziHiyDtMZLHt_UNzoYUXs2g“, ENDITEM,

“Url=https://www.google-analytics.com/analytics.js“, ENDITEM,

“Url=https://fonts.gstatic.com/s/oswald/v13/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff“, ENDITEM,

“Url=https://api.themoviedb.org/3/movie/157336?&api_key={APIKEY}“, ENDITEM,

“Url=https://image.tmdb.org/t/p/w500/nBNZadXqJSdt05SHLqgT0HuC5Gm.jpg“, ENDITEM,

“Url=https://image.tmdb.org/t/p/original/xu9zaAevzQ5nnrsXN6JcahLnG4i.jpg“, ENDITEM,

“Url=https://api.themoviedb.org/3/search/movie?query=zoot&api_key={APIKEY}“, ENDITEM,

“Url=https://api.themoviedb.org/3/search/movie?query=zooto&api_key={APIKEY}“, ENDITEM,

“Url=https://api.themoviedb.org/3/search/movie?query=zootop&api_key={APIKEY}“, ENDITEM,

“Url=https://api.themoviedb.org/3/search/movie?query=zootopi&api_key={APIKEY}“, ENDITEM,

“Url=https://api.themoviedb.org/3/search/movie?query=zootopia&api_key={APIKEY}“, ENDITEM,

“Url=https://api.themoviedb.org/3/movie/269149?&api_key={APIKEY}“, ENDITEM,

“Url=https://image.tmdb.org/t/p/w500/sM33SANp9z6rXW8Itn7NnG1GOEs.jpg“, ENDITEM,

“Url=https://image.tmdb.org/t/p/original/mhdeE1yShHTaDbJVdWyTlzFvNkr.jpg“, ENDITEM,

LAST);

return 0;

}

As you see, Web HTTP/HTML protocol recorded only the ReST calls of the search query Zootopia and few other resources. The output of the above will be the JSON response. It doesn’t capture how the pages loaded and what the actual response time from the end users perspective. I’ve parameterized the API keys and we can parameterize the search keyword as well by implementing the typing logic.

Now we will see how the approach can be designed in TruClient.

HPE LoadRunner TruClient for Web Protocol

TruClient is the apt choice to test the modern web applications. But you need to follow the best practices and right approach to get most of the TruClient luxury. Below is the script of view of TruClient.

How to performance test AngularJS or ReactJS applications?

TruClient Protocol Script

I do not prefer to use Automatic (recommended) method to identify the objects in TruClient, though it is a patented technology. I prefer to use XPath, so that I can control the script maintenance.

TruClient Object Identification

TruClient Object Identification

Following are the XPath for the TMDB objects.

  • //input[@id=”q”] for the input text box
  • //div[@class=”tt-dataset-0″] for the list suggestions
  • //h1[text()=”Zootopia”] for the search result verification

Please watch below video to know about XPath identification in TruClient.

I installed Network Virtualization in HPE LoadRunner 12.53 to capture the end-to-end metrics. I prefer to execute with only ONE VUSER (not swarming the Vusers). It is because 99% only one browser instance will be used by the end user and also TruClient works on real browser instance during the execution. The memory footprint is directly proportional to the number of Vusers. So it is not good idea to swarm the Vusers while working on TruClient protocol.

Below is the NV Analytics results for 1 Vuser.

Network Virtualization Results

Network Virtualization Results

Network Virtualization Breakdown

Network Virtualization Breakdown

Right Approach to performance test AngularJS or ReactJS applications

In AngularJS or ReactJS applications, Web HTTP/HTML gives you the performance of web services and TruClient gives you the end-to-end performance for single Vuser. To validate the performance, you need to blend two protocol approach.

  • Create a TruClient script with 1 Vuser to validate the end user performance
  • Create a Web HTTP/HTML script to achieve target transactions to validate the web service
  • Name the transactions uniquely to differentiate Web HTTP/HTML and Truclient. E.g. T01_Launch_WebHTTP_HTML and T01_Launch_TruClient
  • Create a scenario and add above two scripts and configure the vusers
  • Execute it for the defined duration
  • This will give the overall performance of web service and end-to-end performance

To know the server side performance, you can either use the APM tools or use the below formula:

T01_Launch_TruClient = 2 seconds ( C + S)

T01_Launch_WebHTTP_HTML = 0.5 second (S)

T01_Launch  = T01_Launch_TruClient – T01_Launch_WebHTTP_HTML

C – Client side metrics

S – Server/Service Call metrics

T01_Launch = (C+S) – S

T01_Launch = C 

i.e. T01_Launch = 0.5 second is the pure client side metrics

I have uploaded all my working scripts in GitHub, please visit https://github.com/QAInsights/How-to-performance-test-AngularJS-or-ReactJS-applications- to check out.

Conclusion

Above blended approach will be helpful to validate client side SPAs and also web services. If you have a different approach or better than above, please let me know in the comment section. Looking forward to your feedback.

About NaveenKumar Namachivayam

Hi there! is a passionate and experienced Performance Test Analyst based in Chicago, USA with skill sets in Manual Testing, Test Automation, Performance Testing, and Test Estimation. He loves to learn and experiment new trends and models in Software Testing. Please stop by at his personal blogs: Excel Blog, DealsBrook, NaveenKumarN.in, and Affiliate Insights blog and Software Testing Memes.

2 Comments on “How to performance test AngularJS or ReactJS applications?

Jeevan
July 3, 2017 at 8:38 pm

Hi Naveen,

This is really an interesting article.
But I have one doubt, as HTTP protocol give the response times of service calls and TruClient gives the entire end to end response time, isn’t T01_Launch is Client Side response time (Time to load the pages, js, UI rendering, etc.) ?

Reply
NaveenKumar Namachivayam
July 15, 2017 at 11:59 pm

That is correct.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *