Automate Client-side Performance Metrics collection

Often times as Performance testers we all encounter the question of the validity of the results that we share. Once that is proven with the help of supporting documentation from the load test tools, the most common question any performance tester would encounter is the below one.

What is the page load time on the browser? Or What is the end to end response time or customer perceived time?

The above question was addressed earlier by conducting a stopwatch test for the key business transactions when the load test was running. However, due to the latest technologies and the advanced architectures implemented in recent days, the stopwatch test has become obsolete and considered as an error-prone one.

Every organization is moving towards achieving faster time to market. Agile methodology, Continuous Integration / continuous delivery (CI/CD) have become ubiquitous. Due to this, the boundary of performance testing moved far beyond the traditional performance testing tasks. Though a performance test engineer is not expected to develop a test automation framework, a basic understanding of test automation using Selenium WebDriver and browser Add-ons are being considered as “Preferred” skills nowadays.

As this topic is not a new one and everybody would have done their research at various time-frames, would have come across many tools and approaches like Google WebpageTest, Google PageSpeed, Yslow, HttpWatch, Fiddler etc.

Though most of us would have come across this theoretically, I have shared a simple example with code below.

Integrating JavaScript Navigation timing API with Selenium Automation script

  • Javascript Navigation Timing API — Overview

This is an API that helps us to get the most accurate timing details of the browser events from the moment we requested an URL in the browser till the page is displayed. Please refer to the below diagram and the URL for a detailed understanding of the events that occur during the HTTP request and response life cycle.

Reference – Javascript Navigation API

  • Pre-requisites
  1. Basic understanding of Selenium, Java, Maven repository & JSON.
  2. Chrome driver installed and placed in the path C:\\tmp\\chromedriver.exe
  3. Maven project
  4. Selenium-Java and Chrome WebDriver [3.11.0] setup
  5. Eclipse IDE [Preferably Oxygen.3 Release (4.7.3)]
  6. Get the JSONSimple 1.1.1 maven repositories added to the Maven project.

I have written a simple method in Java to collect a few key client-side performance metrics. This method should be called within a Selenium script right after the HTTP request is sent to the server.

Example: webdriver.get(URL), Submit /Next button, Hyperlink etc.

  • TTFB(Time to First Buffer) = responseStart-navigationStart
  • Page Load Time=loadEventEnd-responseStart
  • Total Response Time=loadEventEnd-navigationStart

Sequence [What this simple code does?]

  1. The below method receives WebDriver object as an argument and JSON filename[output] as another argument.
  2. Webdriver object is typecast to a JavascriptExecutor object.
  3. Collects the key client-side performance metrics TTFB, Page Load Time and User perceived time in variables.
  4. A JSONObject instance is created and all the key-value pairs are added to this object.
  5. toJSONString method returns the content as a string and that is written into the file name specified in the method argument.
  6. Closes all the streams and quits the browser.

Sample Implementation/How to call method writePerfMetricasJSON()?

public static void main(String[] args)throws Exception 
{       //Selenium WebDriver code  
System.setProperty("webdriver.chrome.driver", "C:\\tmp\\chromedriver.exe"); 
WebDriver wd1=new ChromeDriver(); 
String url="http://www.msn.com"; 
wd1.get(url); 
wd1.manage().window().maximize();
// Pass Webdriver object and the filename in which the JSON content would be written
writePerfMetricasJSON(wd1,"Demo3.json");
}

Output:

{"PageLoad Time":1331,"TTFB":1195,"Customer Time":2526,"Timestamp":"2018-06-10 16:41:21.908","url":"https:\/\/www.msn.com\/"}

Code:

Complete Java code can be downloaded from the following GitHub URL Complete Code

Though this code looks very simple, once the required metrics are gathered as JSON in a file, it can be directly processed using a JQuery & HTML or it can be stored and processed by any other methods.


Leave a Comment