Acceptance Testing with Responsive Layouts

At first one might think rearranging content and resizing images won’t break any acceptance tests because you’re testing functionality not
layout, don’t you? Well, this is right until the day you replace the wide navigation bar with a clickable dropdown for smaller screen sizes.
That’s the point when you get into trouble if you don’t set the browser window size for your tests. There are now two ways how a user navigates
through your website depending on the screen size and you want to make sure both ways keep working.

How can you resize the browser window with Capybara/Selenium now?

(Disclaimer: This solution is still beta and only works with the latest selenium-webdriver (=> 2.12.2) and Firefox Browser.)

To integrate this method call smoothly into our test suite with RSpec, Selenium and Capybara we expanded our RSpec config to provide a
‘mobile’-filter. Examples that are being tagged with ‘mobile’ run in a small browser window and all other examples run in a desktop sized
browser window. Example:

What about other drivers and browsers?

For Selenium it currently only works with Firefox. We haven’t tried other drivers like akephalos and capybara-webkit with websites with
responsive layout. Feel free to share your experience if you know more about it!