Responsive Layout Testing

Gemfile

source 'https://rubygems.org'

gem 'selenium-webdriver', '~> 2.45.0'
gem 'eyes_selenium', '~> 2.15.0'
gem 'rspec', '~> 3.2.0'
gem 'rake', '~> 10.4.2'

login_spec.rb

require 'eyes_selenium'

ENV['browser']          ||= 'internet_explorer'
ENV['browser_version']  ||= '9'
ENV['platform']         ||= 'Windows 7'
ENV['viewport_width']   ||= '1024'
ENV['viewport_height']  ||= '768'

describe 'Login' do

  before(:each) do |example|
    caps                      = Selenium::WebDriver::Remote::Capabilities.send(
                                  ENV['browser'])
    caps.version              = ENV['browser_version']
    caps.platform             = ENV['platform']
    caps[:name]               = example.metadata[:full_description]
    caps['screen-resolution'] = '1280x1024'
    @browser                  = Selenium::WebDriver.for(
      :remote,
      url: "http://#{ENV['SAUCE_USERNAME']}:#{ENV['SAUCE_ACCESS_KEY']}@ondemand.saucelabs.com:80/wd/hub",
      desired_capabilities: caps)
    @eyes                     = Applitools::Eyes.new
    @eyes.api_key             = ENV['APPLITOOLS_API_KEY']
    @driver                   = @eyes.open(
      app_name:       'the-internet',
      test_name:      example.metadata[:full_description],
      viewport_size:  { width: ENV['viewport_width'].to_i,
                        height: ENV['viewport_height'].to_i },
      driver:         @browser)
  end

  after(:each) do
    @eyes.close
    @browser.quit
  end

  it 'succeeded' do
    @driver.get 'http://the-internet.herokuapp.com/login'
    @eyes.check_window('Login Page')
    @driver.find_element(id: 'username').send_keys('tomsmith')
    @driver.find_element(id: 'password').send_keys('SuperSecretPassword!')
    @driver.find_element(id: 'login').submit
    @eyes.check_window('Logged In')
  end

end

Rakefile

desc 'Run tests against each screen resolution we care about'
task :run do
  RESOLUTIONS = [ { width: '1000', height: '600' },  # iPad/Desktop
                  { width:  '414', height: '699' },  # iPhone 6+
                  { width:  '320', height: '568' } ] # iPhone 5
  threads = []
  RESOLUTIONS.each do |resolution|
    threads << Thread.new do
      ENV['viewport_width']   = resolution[:width]
      ENV['viewport_height']  = resolution[:height]
      system("rspec login_spec.rb")
    end
  end
  threads.each { |thread| thread.join }
end