Explaining how the real world works!     RSS Feed The Automated Tester on Twitter The Automated Tester on LinkedIn The AutomatedTester on github

Automating the Capture of Web Timings with Selenium 2

Wed 04 Aug 2010

Measuring the speed of how long a page takes to load is becoming one of the most important metrics that we as software developers or testers can measure. This is because milliseconds can mean the difference between a sale being paid for or abandoned. A couple of years ago Amazon did research that showed for every 100ms slower the page was in loading they lost 1% of sales.

The downside to all of this is that we, as developers, testers and even ops, can only control the speed of things within our code and within our datacenters. With this in mind we should be trying to record all of the information that we can from within the browser. Last year at GTAC 2009 ( presentation video) David Henderson and I discussed how we used YSlow and Selenium to record page metrics and load times of the web application. We made the total primed page size decrease by 85% with the work we did.

The unfortunate thing about the way we did this was that we had to hack YSlow because it didn't give us all the information that we wanted. We also needed to hack Selenium because it blocked a few of the headers to do with element expiry. This is not really ideal but with the new Web Timings API we are starting to be able to do all of this with just a bit of JavaScript.

To access this we need to get hold of the performance object and then get it to return a dictionary of all the timing data. The values that are returned are milliseconds from 1/1/1970. They give you all cool bits of information like how long it takes to unload a page you're on before navigating to the new page and how long that takes to load. It also tells you how long domain lookups take and how long redirects take. These are all neat tidbits of information when performance tuning your web application.

So below is a C# extension method that I have created that extends the WebDriver object to collect the information for you. Not all browsers support this at the moment but as web timings becomes the standard the code will start returning data. Current browsers that support this are Chrome 6 and IE9 pre3. A patch has been submitted to Mozilla for Firefox 4 so hopefully this will be applied soon.

 
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using OpenQA.Selenium;

namespace AutomatedTester.PagePerf
{
    public static class Extensions
    {
        public static Dictionary<string,object> WebTimings(this IWebDriver driver)
        {
            var webTiming = (Dictionary<string, object>)((IJavaScriptExecutor)driver)
                .ExecuteScript(@"var performance = window.performance || window.webkitPerformance || window.mozPerformance || window.msPerformance || {};
                                 var timings = performance.timing || {};
                                 return timings;");
			/* The dictionary returned will contain something like the following.
             * The values are in milliseconds since 1/1/1970
             * 
             * connectEnd: 1280867925716
             * connectStart: 1280867925687
             * domainLookupEnd: 1280867925687
             * domainLookupStart: 1280867925687
             * fetchStart: 1280867925685
             * legacyNavigationStart: 1280867926028
             * loadEventEnd: 1280867926262
             * loadEventStart: 1280867926155
             * navigationStart: 1280867925685
             * redirectEnd: 0
             * redirectStart: 0
             * requestEnd: 1280867925716
             * requestStart: 1280867925716
             * responseEnd: 1280867925940
             * responseStart: 1280867925919
             * unloadEventEnd: 1280867925940
             */ 
            return webTiming;
        }
    }
}

    Area: blog

blog comments powered by Disqus