Gists for the Automated cross-browser testing blogpost

01 capybara.rb

# features/support/capybara.rb

Capybara.app_host = 'http://staging.my-app.com'

02 cross_browser.rb

# features/support/cross_browser.rb

url = "http://#{ENV['BS_USERNAME']}:#{ENV['BS_AUTHKEY']}@hub.browserstack.com/wd/hub"

03 capabilities.rb

capabilities = Selenium::WebDriver::Remote::Capabilities.new
capabilities["os"] = "OS X"
capabilities["os_version"] = "Mavericks"
capabilities["browser"] = "chrome"
capabilities["browser_version"] = "33.0"
capabilities['browserstack.debug'] = true
capabilities['takesScreenshot'] = true

capabilities['project'] = "My project"
if ENV['BUILD_NUM']
  capabilities['build'] = ENV['BUILD_NUM']
end

04 register_driver.rb

# register a driver
driver_name = "chrome_33.0_Mavericks"
Capybara.register_driver(driver_name) do |app|
  Capybara::Selenium::Driver.new(app, :browser => :remote, :url => url, :desired_capabilities => capabilities)
end

05 use_driver.rb

# use the registered driver
Capybara.default_driver = driver_name
Capybara.javascript_driver = driver_name

06 browsers.json

{
   "chrome": {
      "human": "Chrome 33 on OS X Mavericks",
      "browser_version":"33.0",
      "browser":"chrome",
      "os":"OS X",
      "os_version":"Mavericks"
   },
   "firefox": {
      "human": "Firefox 27 on OS X Mavericks",
      "browser_version":"27.0",
      "browser":"Firefox",
      "os":"OS X",
      "os_version":"Mavericks"
   },
   "ie_9": {
      "human": "IE 9 on Windows 7",
      "browser_version":"9.0",
      "browser":"IE",
      "os":"Windows",
      "os_version":"7"
   },
   "ie_10": {
      "human": "IE 10 on Windows 7",
      "browser_version":"10.0",
      "browser":"IE",
      "os":"Windows",
      "os_version":"7"
   }
}

07 rake_task.rb

require 'rubygems'
require 'json'

require 'cucumber'
require 'cucumber/rake/task'

BROWSERS = JSON.load(open('browsers.json'))

desc 'Run all cross browser tests in parallel'
task :cross_browser => [:environment] do
  BROWSERS.keys.each do |browser_name|
    puts "Cross browser testing against #{browser_name}."

    Rake::Task["cross_browser:#{browser_name}"].execute
  end
end

namespace :cross_browser do
  BROWSERS.keys.each do |browser_name|
    Cucumber::Rake::Task.new("#{browser_name}_run".to_sym) do |task|
      task.cucumber_opts = ["--tags @cross_browser"]
      task.cucumber_opts <<  '-r features'
    end

    desc "Run cucumber against #{BROWSERS[browser_name]['human']}"
    task browser_name do
      ENV['BROWSER_TASK_NAME'] = browser_name

      Rake::Task["cross_browser:#{browser_name}_run"].execute
    end
  end
end

08 cross_browser_2.rb

# features/support/cross_browser.rb

def remote_browser?
  ENV.has_key? 'BROWSER_TASK_NAME'
end

if remote_browser?
  raise 'Please ensure you supply ENV variables BS_USERNAME and BS_AUTHKEY from browser stack' if !ENV['BS_USERNAME'] || !ENV['BS_AUTHKEY']

  url = "http://#{ENV['BS_USERNAME']}:#{ENV['BS_AUTHKEY']}@hub.browserstack.com/wd/hub"

  # load browser configuration
  browser_data = JSON.load(open('.browsers.json'))
  browser_name = ENV['BROWSER_TASK_NAME']

  browser = browser_data[browser_name]

  puts "Testing in #{browser['human']} (#{ENV['BROWSER_TASK_NAME']})..."

  # translate into Selenium Capabilities
  capabilities = Selenium::WebDriver::Remote::Capabilities.new
  capabilities["os"] = browser["os"]
  capabilities["os_version"] = browser["os_version"]
  capabilities["browser"] = browser["browser"]
  capabilities["browser_version"] = browser["browser_version"]
  capabilities['browserstack.debug'] = true
  capabilities['takesScreenshot'] = true

  capabilities['project'] = "My project"
  if ENV['BUILD_NUM']
    capabilities['build'] = ENV['BUILD_NUM']
  end

  # register a driver
  driver_name = "#{browser['browser']}_#{browser['browser_version']}_#{browser['os']}_#{browser['os_version']}"
  Capybara.register_driver(driver_name) do |app|
    Capybara::Selenium::Driver.new(app, :browser => :remote, :url => url, :desired_capabilities => capabilities)
  end

  # use the registered driver
  Capybara.default_driver = driver_name
  Capybara.javascript_driver = driver_name
end

09 capybara_2.rb

# features/support/capybara.rb

Capybara.run_server = true
Capybara.server_port = 3001
Capybara.app_host = 'http://127.0.0.1:3001'

10 tunnel.rb

capabilities['browserstack.local'] = true

11 circle_2.yml

dependencies:
  cache_directories:
    - browserstack
test:
  override:
    - RAILS_ENV=test bundle exec rake spec
    - RAILS_ENV=test bundle exec cucumber
    - script/ci/browserstack_tunnel.sh
    - browserstack/BrowserStackLocal -skipCheck $BS_AUTHKEY 127.0.0.1,3001
        background: true
    - RAILS_ENV=test bundle exec rake cross_browser
    - script/ci/browserstack_tunnel.sh stop:

12 script.bash

#!/bin/bash

if [[ "$1" == "stop" ]]
then
  echo "Stopping browserstack tunnel..."
  killall BrowserStackLocal
  exit
fi

if [[ ! -e browserstack ]]
then
  echo "Downloading browserstack tunnel..."
  mkdir -p browserstack
  curl https://www.browserstack.com/browserstack-local/BrowserStackLocal-linux-x64.zip > browserstack/BrowserStackLocal-linux-x64.zip
  cd browserstack && unzip BrowserStackLocal-linux-x64.zip && chmod a+x BrowserStackLocal
  cd ..
fi

echo "Browserstack tunnel ready..."

13 capabilities_3.rb

capabilities['project'] = ENV['CIRCLE_PROJECT_REPONAME'] if ENV['CIRCLE_PROJECT_REPONAME']
capabilities['build'] = ENV['CIRCLE_BUILD_NUM'] if ENV['CIRCLE_BUILD_NUM']

14 raketask_3.rb

desc 'Run all cross browser tests in parallel (with ENV["nodes"] parallel limit)'
task :cross_browser => [:environment] do
  parallel_limit = ENV["nodes"] || 2
  parallel_limit = parallel_limit.to_i

  sliced = BROWSERS.keys.each_slice(parallel_limit).to_a
  browser_groups = sliced.first.zip(*sliced[1..-1])

  browser_groups.each_with_index do |browser_group, group_index|
    browser_group.compact.each do |browser_name|
      if ENV['CIRCLE_NODE_INDEX'].to_i == group_index
        puts "Cross browser testing against #{browser_name}."

        Rake::Task["reset"].execute
        Rake::Task["cross_browser:#{browser_name}"].execute
      end
    end
  end
end

15 tunnels_3.rb

capabilities['browserstack.localIdentifier'] = "#{ENV['CIRCLE_PROJECT_REPONAME']}-node-#{ENV['CIRCLE_NODE_INDEX']}"

16 cross_browser_final.rb

def remote_browser?
  ENV.has_key? 'BROWSER_TASK_NAME'
end

if remote_browser?
  raise 'Please ensure you supply ENV variables BS_USERNAME and BS_AUTHKEY from browser stack' if !ENV['BS_USERNAME'] || !ENV['BS_AUTHKEY']

  url = "http://#{ENV['BS_USERNAME']}:#{ENV['BS_AUTHKEY']}@hub.browserstack.com/wd/hub"

  # load browser configuration
  browser_data = JSON.load(open('.browsers.json'))
  browser_name = ENV['BROWSER_TASK_NAME']

  browser = browser_data[browser_name]

  puts "Testing in #{browser['human']} (#{ENV['BROWSER_TASK_NAME']})..."

  # translate into Selenium Capabilities
  capabilities = Selenium::WebDriver::Remote::Capabilities.new
  capabilities["os"] = browser["os"]
  capabilities["os_version"] = browser["os_version"]
  capabilities["browser"] = browser["browser"]
  capabilities["browser_version"] = browser["browser_version"]
  capabilities['browserstack.debug'] = true
  capabilities['browserstack.local'] = true
  capabilities['browserstack.localIdentifier'] = "#{ENV['CIRCLE_PROJECT_REPONAME']}-node-#{ENV['CIRCLE_NODE_INDEX']}"
  capabilities['takesScreenshot'] = true

  capabilities['project'] = ENV['CIRCLE_PROJECT_REPONAME'] if ENV['CIRCLE_PROJECT_REPONAME']
  capabilities['build'] = ENV['CIRCLE_BUILD_NUM'] if ENV['CIRCLE_BUILD_NUM']

  # register a driver
  driver_name = "#{browser['browser']}_#{browser['browser_version']}_#{browser['os']}_#{browser['os_version']}"
  Capybara.register_driver(driver_name) do |app|
    Capybara::Selenium::Driver.new(app, :browser => :remote, :url => url, :desired_capabilities => capabilities)
  end

  # use the registered driver
  Capybara.default_driver = driver_name
  Capybara.javascript_driver = driver_name

  # Resize browser window to be consistant when testing cross browser
  Before do
    page.driver.browser.manage.window.resize_to(1280, 800)
  end
end

17 circle_final.yml

dependencies:
  cache_directories:
    - browserstack
test:
  override:
    - RAILS_ENV=test bundle exec rake spec
    - RAILS_ENV=test bundle exec cucumber
    - script/ci/browserstack_tunnel.sh:
        parallel: true
    - browserstack/BrowserStackLocal -localIdentifier "$CIRCLE_PROJECT_REPONAME-node-$CIRCLE_NODE_INDEX" -skipCheck $BS_AUTHKEY 127.0.0.1,3001:
        parallel: true
        background: true
    - RAILS_ENV=test bundle exec rake cross_browser nodes=4:
        parallel: true
    - script/ci/browserstack_tunnel.sh stop:
        parallel: true