Acceptance Testing with Responsive Layouts

What’s so special about responsive layouts and acceptance testing?

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 did we resize the browser window until now?

A popular workaround until now was to execute some javascript:

def resize_window(screen_size)
  @browser.execute_script("window.resizeTo(screen_size[:width], screen_size[:height])
end

But this always felt like hacking and according to Jari Bakken this workaround is being disabled in modern browsers. So he implemented a Webdriver API for resizing the browser window.

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

You can access the new resize method trough Capybara like this:

Capybara.current_session.driver.browser.manage.window.resize_to(width, height)

(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:

it "can submit voucher", :mobile => true do
  login_user
  fill_in 'voucher_code', :with => "12345"
  click_button 'submit'
  page.should have_content 'Successful!'
end

module BlauIntegrationTest

  Capybara.default_driver = :selenium

  DESKTOP_SCREENSIZE = { :width => 1280, :height => 1024 }
  MOBILE_SCREENSIZE  = { :width => 320, :height => 480 }

  RSpec.configure do |config|
    config.before(:each) do
      if example.metadata[:mobile]
        BlauIntegrationTest.resize_browser_window(MOBILE_SCREENSIZE)
      else
        BlauIntegrationTest.resize_browser_window(DESKTOP_SCREENSIZE)
      end
    end
  end

  def self.resize_browser_window(size)
    Capybara.current_session.driver.browser.manage.window.resize_to(size[:width], size[:height])
  end

end

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!

Mehr? Aktuelle Artikel oder alle Artikel im Archiv.