Page tree
Skip to end of metadata
Go to start of metadata

Using Navigation Timing from Dom on real devices

by Uzi Eilon

Access to DOM allows the client to build robust automation by finding the web elements and execute actions on these elements , but the DOM contains more data. In this article I will show how to get the timers from the DOM and use it as part of Selenium script.

How to get the timers from the DOM

After the page is loaded you can access to the document/window and fetch data, 
I'm getting the Navigate Timing using command: window.performance.timing

The results is array with the following data:

connectEnd = 1442838557626
connectStart = 1442838557526
domComplete = 1442838557915
domContentLoadedEventEnd = 1442838557753
domContentLoadedEventStart = 1442838557753
domInteractive = 1442838557753
domLoading = 1442838557691
domainLookupEnd = 1442838557526
domainLookupStart = 1442838557526
fetchStart = 1442838557523
loadEventEnd = 1442838557915
loadEventStart = 1442838557915
navigationStart = 1442838557300
redirectEnd = 0
redirectStart = 0
requestStart = 1442838557626
responseEnd = 1442838557752
responseStart = 1442838557657
secureConnectionStart = 1442838557554
unloadEventEnd = 0
unloadEventStart = 0

The following figure explains the different timers :

Navigation Timing

The following code gets the data from RemoteWebDriver and generate timers report. 
I used Perfecto Mobile RemoteWebDriver and get the timers from real devices.

import java.util.HashMap;
import java.util.Map;
import org.openqa.selenium.remote.RemoteWebDriver;
public class NavigateTimeReport {

public static void printPageTimers(RemoteWebDriver w)

    {

        Map<String,String> params = new HashMap<String,String>();

        Object size =  w.executeScript("var a =  window.performance.timing ;     return a; ", params);

        printTimers ((Map<String, Long>) size);

    }

    private static void printTimers( Map<String, Long> data)
    {
        long navStart = data.get("navigationStart");
        long loadEventEnd = data.get("loadEventEnd");
        long connectEnd = data.get("connectEnd");
        long requestStart = data.get("requestStart");
        long responseStart = data.get("responseStart");
        long responseEnd = data.get("responseEnd");
        long domLoaded = data.get("domContentLoadedEventStart");
       

        System.out.println(" ** PAGE TIMERS **");
        System.out.println("Total Duration := "+(loadEventEnd - navStart) );
        System.out.println("Network (redirect ,DNS,TCP) := "+(connectEnd - navStart) );
        System.out.println("httpRequest := "+(responseStart - requestStart) );
        System.out.println("httpRsponse := "+(responseEnd - responseStart) );
        System.out.println("Build DOM := "+(domLoaded - responseEnd) );
        System.out.println("Rendring := "+(loadEventEnd - domLoaded) );
        System.out.println(" ** **** **");

   }

}

The navigation timers can help us to analyzed performance issues and drill down into the real problem.
In order to use it start the webdriver , use get function , validate the page loaded by finding and element and then execute the getTimer code.