Performance testing with node and webpagetest


Webpagetest

Webpagetest is an online service that allows you to gather performance metrics for your websites. It can handle either single URLs or, with the use of rudimentary scripts, gather metrics for multiple operations and navigations.

Tests can be run against a variety of browsers in public locations around the world. You can also set up a private instance to keep testing internal. Latency and connection speeds can be mocked to make results more "realistic".

I'm going to assume that you know how webdriver's results are used to improve your site's performance and that you have a private instance running.

A node.js client for webpagetest

Marcel Duran has produced a node.js wrapper for the webpagetest API. You can either run tests directly from the command line, or from within node.js programs/scripts.

Requiring webpagetest

Install webpagetest with npm, then require it in your script and point it to your private instance:


    var WebPageTest = require('/usr/lib/node_modules/webpagetest');
    var wpt = new WebPageTest('192.168.10.150');
                

A webpagetest script

Scripts are passed to the webpagetest object as an array of objects representing interactions with the website, e.g to log in and wait for the landing page:


    var script = wpt.scriptToString([
        {logData: 0},//don't gather metrics about the initial log in page
        {setViewportSize: ["1750",  "850"]},
        {navigate: testPage},
        {setValue: ['id=username', 'tester@acme.com']},
        {setValue: ['id=password', 'PASSWORD']},

        {logData: 1},//gather metrics only after signing in
        {clickAndWait: 'id=signIn'}
    ]);
                

Webpagetest settings

You also pass in a settings object to tell webpagetest which location/browser to use, connection quality and other parameters which affect the types of results you get:


    var testSettings = {  
        "location": "Local-IE10",
        "firstViewOnly": false,
        "pollResults": 5,
        "timeout": 60,
        "reporter": "xunit",
        "notifyEmail": "tester@acme.com",
        "video": true,
        "connectivity": "custom",
        "bandwidthDown": "5000",
        "bandwidthUp": "512",
        "latency": "150",
        "packetLossRate": "5"
    }
                

Running tests and parsing results

Call the runTest method with the script, settings and a callback to handle the results of the test (or any errors).


    wpt.runTest(
        script
        ,testSettings
        ,function(err, data) {
            var runData = data.data;
            var results = runData.runs["1"].firstView;
            //write out 4 interesting metrics to CSV
            fs.writeFileSync(HOME + "/PerformanceTestResults.csv",
                "TTFB,DocComplete,FullyLoaded,VisuallyComplete\n" +
                 results.TTFB + "," + results.docTime + "," 
                 + results.fullyLoaded + "," + results.visualComplete);
        }
    );
                
Next: Continuous integration with Jenkins