From ff173e233c2f4e797206f2705a2ee4147c61d275 Mon Sep 17 00:00:00 2001 From: Florian Staudacher Date: Mon, 10 Dec 2012 21:14:44 +0100 Subject: [PATCH] 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 | 1 + Gemfile | 6 +- Gemfile.lock | 2 + config/cucumber.yml | 19 ++++-- features/screenshots.feature | 31 +++++++++ features/step_definitions/custom_web_steps.rb | 68 +++++++++++++++++++ features/support/user_cuke_helpers.rb | 4 +- lib/tasks/screenshots.rake | 44 ++++++++++++ 8 files changed, 167 insertions(+), 8 deletions(-) create mode 100644 features/screenshots.feature create mode 100644 lib/tasks/screenshots.rake diff --git a/Changelog.md b/Changelog.md index e0be503fb0a..01af2c7a2f6 100644 --- a/Changelog.md +++ b/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) diff --git a/Gemfile b/Gemfile index 5a91cae5b3b..da40f6a9931 100644 --- a/Gemfile +++ b/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 diff --git a/Gemfile.lock b/Gemfile.lock index 5ebcd88271d..f12da65ce16 100644 --- a/Gemfile.lock +++ b/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) diff --git a/config/cucumber.yml b/config/cucumber.yml index 818f68834df..cace674ba56 100644 --- a/config/cucumber.yml +++ b/config/cucumber.yml @@ -1,8 +1,19 @@ <% -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}" -std_opts = "--format #{ENV['CUCUMBER_FORMAT'] || 'pretty'} --strict --tags ~@wip" +rerun = File.file?('rerun.txt') ? IO.read('rerun.txt') : "" +format = ENV['CUCUMBER_FORMAT'] || 'pretty' + +# 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" \ No newline at end of file diff --git a/features/screenshots.feature b/features/screenshots.feature new file mode 100644 index 00000000000..19429219387 --- /dev/null +++ b/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 diff --git a/features/step_definitions/custom_web_steps.rb b/features/step_definitions/custom_web_steps.rb index 6942655d0ca..79716e12fcf 100644 --- a/features/step_definitions/custom_web_steps.rb +++ b/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 @@ 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 diff --git a/features/support/user_cuke_helpers.rb b/features/support/user_cuke_helpers.rb index e10a57c4006..6c6adc2a027 100644 --- a/features/support/user_cuke_helpers.rb +++ b/features/support/user_cuke_helpers.rb @@ -59,14 +59,14 @@ def manual_logout 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 diff --git a/lib/tasks/screenshots.rake b/lib/tasks/screenshots.rake new file mode 100644 index 00000000000..e5f1f3df2d3 --- /dev/null +++ b/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