Thanks for all the comments guys.

In regard to open sourcing as the initial code was developed on agency time I unfortunately aren’t allowed to however some friends and I are looking to re-write and address a few of the issues I currently have with it and that will be open-sourced and on github!

Currently it’s in a very incomplete state as we try and re-factor the API (potentially removing the need for JSON based tests) but as we head into Christmas time I’ll be getting more time to work on it and hoping to get it running along quicker.

Follow the project at http://github.com/rossbruniges/os_sleuth and if you want to contribute I’d be very happy indeed :)

@Mathias – good points both. Due to the comment formatting I can’t be 100% what you’re suggesting but personally I just find the syntax a bit nicer using .length.
Have to remember that jQuery will always return a jQuery object regardless of if it matches the selector or not so the .length is needed to check that it both returns something and what it returns isn’t empty.

The second point is just a little bit of code creep. The version I created at LBi first checks to see if jQuery is included and if not loads it into the page. Inserting the stylesheet is one of this things it does before loading the library so therefore needs to work without it which is why the more verbose syntax is used. It’s by no means essential.

@Russell – it’s true that you could spend ages writing JSON tests but I’ve not found that when using it on my projects. You can kinda guess what things the external teams could get wrong and provide the tests for that.

Where it will save time is with off-shore development teams – those who are maybe at work when you’re at home asleep. If you can provide them hints at their errors they won’t need to wait for you to be in the office to start fixing them.

Some things will always go wrong and certainly to catch every single potential problem could be counter productive but if you pick your battles it should prove useful (it has been for me). I’m aware it might not be helpful in all situations though.

So instead of spending hours debugging HTML and seeing what the implementers missed I can spend hours writing JSON tests. I don’t think this solves the initial problem.

Just a minor thing. The code snippets contain the character ‘ (LEFT SINGLE QUOTATION MARK, U+2018) instead of ‘ (APOSTROPHE, U+0027). This will trigger an annoying “illegal character” error if you copy and paste the code without noticing the wrong character.

So please use U+2018 only in English text, not in the code, where bare apostrophe should be used instead. Maybe you’re preprocessing the text, you need to skip such preprocessing on the code block (never used Textile or know what it does, so I don’t know).

In this case, where you’re just checking if a certain element exists, <code>$(‘div#year’).length</code> can be shortened to <code>$(‘div#year’)⁰</code>.

I was also wondering why you’re using the following code:

<pre><code> // load in CSS for the logger var style = document.createElement(‘link’); style.type = “text/css”; style.rel = “stylesheet”; style.href = sleuth.test_page.console_css_location; document.getElementsByTagName(‘head’)⁰.appendChild(style);
</code></pre>

When you could just do something like:

<pre><code>$(‘head’).append(’<link href=”’ + sleuth.test_page.console_css_location + ‘” rel=“stylesheet” type=“text/css”>’);</code></pre>

(Honest question; maybe there are performance implications I’m not aware of.)

Thanks for this great article. Definitely some food for thought here!

(P.S. This comment looks mangled in the comment preview even though I’m using perfectly valid Textile formatting. I’m confused, so submitting anyway ;) Please fix if necessary! Thanks.)

Great article Ross; very useful and hopefully inspires testing in a whole new generation of front end coders.

However, I note that sleuth.js isn’t linked to anywhere—any chance you could put it on GitHub or somewhere similar for download? Might be helpful to those who want to get started on testing their own sites.

PS: Drew, are you sure this comment system takes valid Textile? I can’t generate code blocks (see sleuth.js above).

Very cool idea. I love seeing testing brought into more places and would love to see more designers handing off designs to us (devs) with test cases already built in.

@Bradley: I pulled the code from the demo and posted it on GitHub. Feel free to fork away: http://gist.github.com/254984

So now that this masterpiece is out there and everyone is using it, I expect to see you and your fellow interface developers in the pub much earlier. Problems all solved. Hooray.