February 27, 2014 - Comments Off on Why developers should put their faith in Wraith

Why developers should put their faith in Wraith

Many great things have come from the BBC, such as the iPlayer, Match of the Day and Simon McCoy. Well, recently I learnt about something else that needs to be added to that list: Wraith.

Not so long ago I attended Forefront Leeds, which is an up-and-coming get-together for front end developers and designers in the city. Amongst three great talks, David Parker discussed Wraith – and as he did I frantically began tapping notes into my iPhone.

Wraith is, in essence, an image comparison tool, but to describe it as such would be massively underselling it. A better description would be to say that it’s a gift from the development gods.

Testing is a job few people enjoy, and tools that promise to help out in testing a website or application often don’t – or they require a lot of time and patience to set up. This is where Wraith is different.

By taking advantage of JavaScript headless browser libraries such as PhantomJS, SlimerJS and TrifleJS, Wraith is able to take screenshots of two websites at various different screen sizes – and then it compares the two images to produce a third image that highlights everything that’s different.

Pretty clever, right? Now imagine if the two sites you were comparing are a development/staging, and the live version of a website you’re working on. This gives you the ability to see what effect your changes have made across an entire site at numerous resolutions by running one command in the CLI.

I know, I know – I’m just as excited as you are, but before you rush off to try it out, there’s more…

It’s great to be able to compare two sites, but a lot of the time you’re creating something new and don’t have a live site to compare it to. Well, worry not – because Wraith has got you covered for that too.

The ability to capture a website at various different screenshots is a godsend for responsive design, and with its easy-to-configure config files it’s a snap to get new tests up and running quickly.

So then, we can compare two sites on different URLs and grab screenshots of a single URL at various sizes. But wouldn’t it be great if we could take screenshots of the same URL in multiple browsers and semi-automate our cross-browser testing? Yep, I thought so too – so this is something I’m currently working on now.

Admittedly my knowledge of the Ruby programming language is limited, but I’ve managed to hack together a working version. It needs more work before I can submit a pull request on the GitHub repository, but I’m hoping to get something up there soon as I’m sure I’m not the only person who wants this feature.

Obviously tools like Wraith will never completely replace human testing, but that’s not the point. The point is to allow you to make more educated decisions about where that human testing time should be focused.