Testing mobile sites with Cucumber


Recently I was working on a site that had been originally built with Rails 2 and was later migrated to Rails 3. As part of the migration the cucumber integration tests were switched from using Webrat to drive the UI to using Capybara. Unfortunately this broke a handful of tests for the mobile version of the UI.

Take One

The site decides whether or not to show the user the mobile version of the site based on the user agent. The problem is that Capybara won’t let you set custom headers (such as the user agent) the Webrat will. After a quick search of the internet I can across This site. In short the blog post details a way to open up the current RackTest driver (the default driver that cucumber uses) and adds a way to put in arbitrary headers.

I added the code in the blog post to my project and indeed it fixed my tests (with a little reorganizing). Something about it struck me as wrong. Even the blog post I got the technique from calls the class a “Hack.” I wanted to find a cleaner way…

Introducing capybara-iphone

My “cleaner” solution was to write a new Capybara driver that pretends to be an IPhone and to have the mobile specific tests run with that. It is a very simple project that extends the Capybara::Driver::RackTest code and adds an additional user agent header to identify itself as an IPhone. Now all you have to do is set up the capybara-iphone gem in your project and tag the tests that you want to run the a mobile browser with ‘@iphone’.

The Future

One could imagine an incarnation of capybara-iphone that adds support for handling that IPhone specific javascript calls, and lets you do other things that better test your application’s IPhone interface. At the moment, however, I don’t have plans to do any of these, but the project sounds fun enough that with a little push I might start working on it.

More information on using capybara-iphone can be found in the Readme on Github.


Get every new post delivered to your Inbox.

%d bloggers like this: