add cucumber feature for taking screenshots of important pages

- for before/after comparisons,
including rake tasks for easily generating the images from command line

Changelog.md

@@ -13,6 +13,7 @@
 
 ## Features
 
+* Add 'screenshot tool' for taking before/after images of stylesheet changes. [#3797](https://github.com/diaspora/diaspora/pull/3797)
 * Add possibility to contact the administrator. [#3792](https://github.com/diaspora/diaspora/pull/3792)
 * Add simple background for unread messages/conversations mobile. [#3724](https://github.com/diaspora/diaspora/pull/3724)
 * Add flash warning to conversation mobile, unification of flash warning with login and register mobile, and add support for flash warning to Opera browser. [#3686](https://github.com/diaspora/diaspora/pull/3686)

Gemfile

@@ -46,7 +46,7 @@ group :production do # we don't install these on travis to speed up test runs
   # analytics
   gem 'rack-google-analytics', '0.11.0', :require => 'rack/google-analytics'
   gem 'rack-piwik', '0.1.3', :require => 'rack/piwik', :require => false
-  
+
 end
 
 
@@ -162,10 +162,12 @@ group :test do
 end
 
 group :test, :development do
-  gem "rspec-rails", "2.11.4" 
+  gem "rspec-rails", "2.11.4"
 end
 
 group :development do
   gem 'capistrano', '2.12.0', :require => false
   gem 'capistrano_colors', '0.5.5', :require => false
+
+  gem 'rmagick', :require => false
 end

Gemfile.lock

@@ -336,6 +336,7 @@ GEM
       vegas (~> 0.1.2)
     resque-timeout (1.0.0)
       resque (~> 1.0)
+    rmagick (2.13.1)
     rspec (2.11.0)
       rspec-core (~> 2.11.0)
       rspec-expectations (~> 2.11.0)
@@ -475,6 +476,7 @@ DEPENDENCIES
   remotipart (= 1.0.2)
   resque (= 1.23.0)
   resque-timeout (= 1.0.0)
+  rmagick
   roxml!
   rspec-instafail (= 0.2.4)
   rspec-rails (= 2.11.4)

config/cucumber.yml

@@ -1,8 +1,19 @@
 <%
-rerun = File.file?('rerun.txt') ? IO.read('rerun.txt') : ""
+rerun  = File.file?('rerun.txt') ? IO.read('rerun.txt') : ""
-rerun_opts = rerun.to_s.strip.empty? ? "--format #{ENV['CUCUMBER_FORMAT'] || 'progress'} features" : "--format #{ENV['CUCUMBER_FORMAT'] || 'pretty'} #{rerun}"
+format = ENV['CUCUMBER_FORMAT'] || 'pretty'
-std_opts = "--format #{ENV['CUCUMBER_FORMAT'] || 'pretty'} --strict --tags ~@wip"
+
+# option lists for the `cucumber` command
+rerun_opts = rerun.to_s.strip.empty? ? "--format #{format} features" : "--format #{format} #{rerun}"
+std_opts   = "--format #{format} --strict --tags ~@wip --tags ~@screenshots"
+screenshot_opts  = "--require features --format pretty"
 %>
+
+# 'normal' test runs
 default: <%= std_opts %> -r features
 wip: -r features --tags @wip:3 --wip features
-rerun: <%= rerun_opts %> --format rerun --out rerun.txt --strict --tags ~@wip
+rerun: <%= rerun_opts %> --format rerun --out rerun.txt --strict --tags ~@wip --tags ~@screenshots
+
+# screenshot feature
+ref_screens: "<%= screenshot_opts %> --tags @reference-screenshots"
+cmp_screens: "<%= screenshot_opts %> --tags @comparison-screenshots"
+all_screens: "<%= screenshot_opts %> --tags @screenshots"

features/screenshots.feature

@@ -0,0 +1,31 @@
+@screenshots @javascript
+Feature: layout reference screenshots
+  In order to be able to compare style and layout changes
+  As a developer
+  I want to be able to look at before/after screenshots
+
+  Background:
+    Given following users exist:
+      | username       | email             |
+      | B Robertson   | bob@bob.bob       |
+      | A Aronsdottir | alice@alice.alice |
+    And a user with email "bob@bob.bob" is connected with "alice@alice.alice"
+    And "bob@bob.bob" has a public post with text "this is a test post!"
+    And Alice has a post mentioning Bob
+    And "alice@alice.alice" has a public post with text "i am using a #tag"
+
+  @reference-screenshots
+  Scenario: take the reference screenshots
+    Given the reference screenshot directory is used
+    When I take the screenshots while logged out
+
+    And I sign in as "alice@alice.alice"
+    Then I take the screenshots while logged in
+
+  @comparison-screenshots
+  Scenario: take the comparison screenshots
+    Given the comparison screenshot directory is used
+    When I take the screenshots while logged out
+
+    And I sign in as "alice@alice.alice"
+    Then I take the screenshots while logged in

features/step_definitions/custom_web_steps.rb

@@ -1,3 +1,55 @@
+module ScreenshotCukeHelpers
+
+  def set_screenshot_location(path)
+    @screenshot_path = Rails.root.join('tmp','screenshots', path)
+    @screenshot_path.mkpath unless @screenshot_path.exist?
+  end
+
+  def take_screenshot(name, path)
+    visit send("#{path}_path")
+    browser = page.driver.browser
+    pic = @screenshot_path.join("#{name}.png")
+
+    sleep 0.5
+
+    browser.manage.window.resize_to(1280, 1024)
+    browser.save_screenshot(pic)
+  end
+
+  def take_screenshots_without_login
+    pages = {
+      'register' => 'new_user_registration',
+      'login'    => 'user_session'
+    }
+
+    pages.each do |name, path|
+      take_screenshot name, path
+    end
+  end
+
+  def take_screenshots_with_login
+    pages = {
+      'stream'        => 'stream',
+      'activity'      => 'activity_stream',
+      'mentions'      => 'mentioned_stream',
+      'aspects'       => 'aspects_stream',
+      'tags'          => 'followed_tags_stream',
+      'contacts'      => 'contacts',
+      'settings'      => 'edit_user',
+      'notifications' => 'notifications',
+      'conversations' => 'conversations',
+      'logout'        => 'destroy_user_session'
+    }
+
+    pages.each do |name, path|
+      take_screenshot name, path
+    end
+  end
+
+end
+World(ScreenshotCukeHelpers)
+
+
 When /^(.*) in the header$/ do |action|
   within('header') do
     step action
@@ -237,3 +289,19 @@ end
 Then /^I should see a flash message containing "(.+)"$/ do |text|
   flash_message_containing? text
 end
+
+Given /^the reference screenshot directory is used$/ do
+  set_screenshot_location 'reference'
+end
+
+Given /^the comparison screenshot directory is used$/ do
+  set_screenshot_location 'current'
+end
+
+When /^I take the screenshots while logged out$/ do
+  take_screenshots_without_login
+end
+
+When /^I take the screenshots while logged in$/ do
+  take_screenshots_with_login
+end

features/support/user_cuke_helpers.rb

@@ -59,14 +59,14 @@ module UserCukeHelpers
     find("#user_menu li:last-child a").click
   end
 
-  # fill change password section on the user edit page 
+  # fill change password section on the user edit page
   def fill_change_password_section(cur_pass, new_pass, confirm_pass)
     fill_in 'user_current_password', :with => cur_pass
     fill_in 'user_password', :with => new_pass
     fill_in 'user_password_confirmation', :with => confirm_pass
   end
 
-  # fill forgot password form to get reset password link 
+  # fill forgot password form to get reset password link
   def fill_forgot_password_form(email)
     fill_in 'user_email', :with => email
   end

lib/tasks/screenshots.rake

@@ -0,0 +1,44 @@
+
+namespace :screenshots do
+
+  Cucumber::Rake::Task.new({:reference => 'db:test:prepare'}, 'Take reference screenshots') do |t|
+    t.profile = 'ref_screens'
+  end
+
+  Cucumber::Rake::Task.new({:comparison => 'db:test:prepare'}, 'Take comparison screenshots') do |t|
+    t.profile = 'cmp_screens'
+  end
+
+  desc 'Take reference and comparison screenshots'
+  task :all => [:reference, :comparison]
+
+  desc 'Generate "flicker" images for easy comparison (requires RMagick)'
+  task :flicker do
+    require 'RMagick'
+    screen_dir = Rails.root.join('tmp', 'screenshots')
+
+    ref_dir = screen_dir.join('reference')
+    cur_dir = screen_dir.join('current')
+
+    Dir.glob("#{ref_dir}/*.png") do |img|
+      filename = File.basename(img)
+
+      if !File.exist?(cur_dir.join(filename))
+        raise "the comparison screenshot for #{filename} doesn't exist!"
+      end
+
+      img_list = Magick::ImageList.new(ref_dir.join(filename), cur_dir.join(filename))
+      img_list.delay = 65      # number of ticks between flicker img change (100 ticks/second)
+      img_list.iterations = 0  # -> endless loop
+      img_list.write(screen_dir.join("#{filename}.gif"))
+    end
+
+    puts %Q(
+    Done!
+    You can find the flicker images here:
+
+      #{screen_dir}
+
+    )
+  end
+end