At Mint, we make some pretty cool websites. We also pride ourselves on the quality of our code. Sites like Landshare, Orange unsignedAct and Sexperience all use technologies like AJAX and JavaScript to make them look good and feel great. But, as with anything in life, adding complexity to something increases the risk of things going wrong.
Until now, we have relied on our eagle-eyed Quality Assurance Police to prod, poke, push and pull our sites ad nauseum in search of these failures.
This is time consuming and error prone, even for our über talented QAs. So, being the geeks we truly are, we thought we’d get a computer to do the leg-work.
Consequently I have been working on a little hocus-pocus to bewitch web browsers into thinking a real person is using the site. The result is pretty entertaining: a browser dancing away, apparently all by itself! It also uncovers any errors in the code - but that is less fun.
I had to move the browser so you could see it, but other than that it's all magic!
Because JavaScript is fiddly, modifications can easily break the code. By having the browser automatically run through the site, we can pick up on these failures before they even get to the traditional QA stage. There is still a heck of a lot for QA to check (user experience, layout design and Internet Explorer being top of the list) but we have taken one headache off their plate and increased the quality of our code to boot.
I bet you are wondering how we have managed to achieve this staggering wonderment of web browser mastery. Mint did it with the use of a Cucumber (and a ton of help from our top quality developers). Cucumber, best consumed with a Spork and supplemented with Selenium, is a tool that lets you write tests in plain English (or Spanish, or even LOLspeak). You can therefore have a test saying:
Given I am on the “videos” page
When I click the thumbnail for “video 1”
Then the featured video should be “video 1”
When you run that test, under the hood all sorts of magic happens. A web browser opens a page called “videos” and clicks on a little image with the imaginative title “video 1”. It then checks that there is a video on the page that is marked as “featured” and has the title “video 1”.
If it passes, we know that the JavaScript that opens up the video when you click on the thumbnail works. Great! If you blink you'll miss this test. When you start to build up more complicated user flows, the browser’s dance lasts longer. It’s one downside to this kind of testing – though fun to watch, it is time consuming waiting for tests to complete.
Mint has a long history of Test-Driven Development. We have always tested each component of our code. Cucumber does not replace this but it does allow us to test all these little bits working together.
And it makes us giggle, like the geeky kids we are, at web browsers dancing.