Capturing Javascript Errors in Selenium

Here at Linn we write automated acceptance tests using SpecFlow and Selenium, targeting Google Chrome. For the most part these tests run pretty well, but from time to time we run across test failures which prove difficult to diagnose. This week I ran across one such error – I knew error messages must be being displayed from the javascript code in Chrome’s console, but I had no way of seeing that information when the tests were run in Selenium. Worse still, I couldn’t replicate the issue locally.

One of my colleagues suggested that perhaps there was a way to capture and log the errors from Chrome’s console for later examination, and it turns out there is, using the rather handy ChromeJSErrorCollector extension.

Having grabbed a copy of the packed extension.crx file and included it in the Visual Studio solution, the first step was to get Selenium to run that extension on the instance of Chrome used for the tests:

var options = new ChromeOptions();
options.AddExtension("extension.crx");
var driver = new ChromeDriver(options);

Following this we execute the test code itself as standard. Then at the end of the test, we need to have a look for errors:

var javascriptDriver = driver as IJavaScriptExecutor;
var errors = javascriptDriver.ExecuteScript("return window.JSErrorCollector_errors ? window.JSErrorCollector_errors.pump() : []");

The javascript being executed here is key – it’s querying the extension for errors and pumping them out to a javascript object which is then returned to us.

Unfortunately that object isn’t particularly nicely typed, so we need the following slightly ugly code to turn the object into useful output:

var writer = new StreamWriter("jsErrors.log");
var collection = errors as ReadOnlyCollection<object>;
foreach (var item in collection)
{
    var errorObject = item as Dictionary<string, object>;
    foreach (var field in errorObject)
    {
       writer.WriteLine(field.Key + " - " + field.Value);
    }
    writer.WriteLine("-------------------");
}
writer.Flush();
writer.Close();

Presto! We get text output of any errors from the log file for diagnosis. Useful stuff, especially when used in combination with Selenium’s ability to save screenshots.

Cross Domain Google Analytics – Easier with jQuery

We run two public facing websites at the company I work for, sitting on different domains. Recently our marketing team requested that we enable cross-domain tracking under Google Analytics to allow them to track a user’s journey between the two sites, rather than losing them at the boundary.

Google has extensive documentation on enabling cross domain analytics but the long and the short of it is that at links which cross the boundary, you need a wee bit of javascript to push an analytics event, something like this:

<a href="http://www.my-other-domain.com/intro"
   onclick="_gaq.push(['_link', 'http://www.my-other-domain.com/intro.html']); return false;">
   Some Link</a>

For two domains with a bunch of joining links, this adds a tedious task of chaning links, and an ongoing overhead in terms of ensuring that news links added to the site which cross the domain boundary include the relevant onClick event. Surely we can do better? Enter jQuery.

Adding the following snippet to your Site.Master, Razor Layout or equivalent will automatically add the relevant click events to all links containing the relevant domain. Simple!

$('a[href*="my-other-domain.com"]').each(function (index, link) {
    $(link).click(function () {
        _gaq.push(['_link', $(link).attr('href')]);
        return false;
    });
 });

Visual Studio Plugins I Love

Doubtless everyone has their favourite plugins for Visual Studio, and more great addins are being developed all the time. Here are a few that I can’t live without:

• ReSharper – Jetbrains’ amazing add-in gives real-time code analysis, intellisense improvements, navigation shortcuts, code templates, a built in unit test runner, and countless other features. This tool will pay for itself a thousand times over in the time it will save you.
• PowerCommands for Visual Studio 2010 – a free extension offering a set of useful additional commands such as “Open Containing Folder”. Basically adds a bunch of stuff that should have been there all a long. Despite the name, works in VS 2012 too.
• T4 Toolbox – A set of subtle but incredibly useful additions to the built in T4 template functionality to assist with code reuse and better file generation.
• Chirpy – Automatically regenerates T4 templates on build. Also does a bunch of other stuff which I’ve never explored fully.
• Chutzpah – A Javascript Unit Test runner supporting both Jasmine and QUnit.
• AnkhSVN – If you’re using Subversion for version control, I find this to be invaluable. It handles unloading/reloading project files when updating, and provides a nice addition to the GUI showing changed files in the solution explorer, and built in diff-ing, among other things.
• Git Source Control Provider – If you’re using Git for version control, this is an excellent extension. While it’ll never entirely replace the command line, it gives a nice view of modified files and built in diffing, making for easy commits.
• NCrunch – Continuous Testing for Visual Studio. A huge time saver, constant updates on test coverage/failures as you type!