show_me_the_pages: screenshot various screen resolutions with capybara to review responsive design

screenshots.rb

RSpec.configure do |config|
  config.filter_run_excluding :show_me_the_pages unless ENV["SHOW_ME_THE_PAGES"]
end



class Screenshots
  include Capybara::DSL
  attr_accessor :resolutions
  attr_accessor :output_path
  def initialize
    capture_fewer_resolutions
    self.output_path = './show_me_the_pages'
  end

  def resize_window(width, height)
    if Capybara.current_driver == :selenium
      page.driver.browser.manage.window.resize_to(width, height)
    elsif Capybara.current_driver == :poltergeist
      page.driver.resize(width, height)
    else
      raise "smtpgs unsupported driver #{Capybara.current_driver}"
    end
  end

  def capture_fewer_resolutions
    self.resolutions = [
      [1920, 1080], [1080, 1920], # 16:9 displays, many mobiles and computers
      [1600, 1200], # large 4:3 desktop screen
      [1440, 900], # medium laptop 16:10
      [1366, 768], # small desktop/laptop and some portables
      [1280, 1024], # common 4:3 desktop resolution
      [1280, 768], [768, 1280], # WXGA mobiles
      [1024, 768], [768, 1024], # older computers, iPad 1, 2, mini
      [1136, 640], [640, 1136], # iPhone 5
      [960, 640], [640, 960], # iPhone 4 and iPod touch
      [800, 480], [480, 800], # nokia, samsung
      [480, 320], [320, 480] # HVGA mobiles
    ]
  end

  # http://spirelightmedia.com/resources/responsive-design-device-resolution-reference
  def capture_more_resolutions
    capture_fewer_resolutions
    self.resolutions += [
      [854, 480], [480, 854], # sony
      [1600, 900], # large laptop 16:10
      [2560,1440], #WQHD laptop
      [2048, 1536], [1536, 2048] #iPad 3, 4, air
    ]
  end

  # take a picture of the current page
  def snap(outfile_prefix=page.current_url)
    resolutions.each do |res|
      resize_window(res[0], res[1])

      # determine and prepare photo path
      outfile_prefix = outfile_prefix.gsub('/', '-')
      outfile = File.join self.output_path, "#{outfile_prefix}_#{Capybara.current_driver}_#{res[0]}_#{res[1]}.png"
      puts outfile
      require 'fileutils'
      FileUtils.mkdir_p(File.dirname(outfile))

      # take picture
      save_screenshot(outfile)
    end
    # end on a reasonable default
    resize_window(1024,768)
  end

  # go to the given url and take a picture
  def capture(url)
    visit url
    snap(url)
  end
end

screenshots_spec.rb

  describe "new customers" do
    before(:each) do
      camera.output_path = 'tmp/smtpgs/new-visitors/'
    end

    specify "visitor pages" do
      paths = [
        root_path,
        faqs_path
      ]
      8.times{ Faq.make }
      5.times{ Pricing.make }
      paths.each do |path|
        camera.capture(path)
      end
    end

    specify 'payment process'
    specify 'exam demo'
  end

  describe "member pages" do
    let(:member) {log_in_as_new_paid_member}
    before(:each) do
      member
      camera.output_path = 'tmp/smtpgs/paid-content'
    end

    specify "dashboard and settings pages" do
      paths = [
        member_dashboard_path,
        edit_member_path,
        member_notices_path,
        faqs_path
      ]
      8.times{ Faq.make }
      5.times{ Pricing.make }
      paths.each do |path|
        camera.capture(path)
      end

      member.ukcat_date = Date.today + 2.months
      member.save!
      visit member_dashboard_path
      camera.snap('dashboard-with-ukcat-date-set')

      # again with notices
      5.times { Notice.make }
      camera.output_path = 'tmp/smtpgs/paid-content/with-notices'
      paths.each do |path|
        camera.capture(path)
      end
    end
  end
end