Automated tests for HTML5 offline web applications with Capybara and Selenium

Testing web applications that make use of the new HTML5 features can be frustrating. With a bit of work, we can use Capybara to test them through the browser relatively easily.

Offline functionality has been discussed on this blog before here and here.

I recently started an offline web application built on Zend and Sammy.js. When I tried to add system tests using Capybara, the default drivers choked hard on the javascript-heavy site. Switching to Selenium helped tremendously and instantly made most of my tests pass.

Most of them.

I still got frustrating errors with the tests for specific offline-only behaviors. I simulated the browser being offline by simply shutting down the local Apache server that was being used for test. After that, I was greeted with this frustrating error:

That rather defeats the whole purpose of “offline applications”, doesn’t it? The problem is that Firefox will not start storing local data until the user has given it permission – something that Selenium does not offer an API for. This sticky issue can be solved with a little bit of elbow grease. Essentially, we’re going to make a prototype Firefox user profile that Selenium will copy when it starts Firefox for our tests.

First, let’s set up the profile directory and the sqlite3 database with our permissions data:

Now that we’ve got that setup, we can change the Firefox profile used in Capybara. We’ll register the new driver first:

After this, you should be able to run Cucumber tests on your offline app without trouble.