Skip to content

Latest commit

 

History

History
93 lines (68 loc) · 3.08 KB

README.md

File metadata and controls

93 lines (68 loc) · 3.08 KB
Raw

Cucumber-Snapshot: Unchanged UX

The purpose of this tool is to make the design of the website doesn't change even after a tiny change in HTML / CSS / Javascript. Cucumber is great to test the Website behave in defined way. Great but not enough ! What if an unclose div completely breaks the layout of your homepage? Do you think it is well tested ? I don't.

Install:

  1. Install gem
gem install cucumber-snapshot

OR in your Gemfile (if using Bundler):

gem 'cucumber-snapshot', :git=>'https://github.com/NNA/cucumber-snapshot'
  1. Create a file features/support/cucumber_snapshot.rb with the following content:
  require 'cucumber-snapshot/cucumber_hooks'
  1. Copy to your /feature folder and adapt the following files:
  • examples/snapshot.feature
  • examples/cucumber-snapshot_steps.rb
  1. Run cucumber features:
bundle exec cucumber -t @snapshot

How To:

Capturing Snapshots

cucumber-snapshot comes with some cucumber steps that you can use to take snapshots of your pages (see examples):

  Given I am logged with email "[email protected]"
  When I go to the home page
  And I take a snapshot #Will take a snapshot of current page

or you can use the @snap_capture tag

  @snap_capture #Will take a snapshot at the When page
  Given I am logged with email "[email protected]"
  When I go to the home page

snapshots are :

  • full page screenshots as displayed using specified capybara driver (can be selenium or webrat)
  • saved as .png
  • saved using this folder pattern : "app_root" \ snapshots \ "name_of_when_step"

Comparing Snapshots

  @snap_capture @snap_compare #Will take a snapshot of When page and compare. Will fail if differences are > 5%
  Given I am logged with email "[email protected]"
  When I go to the home page

Notes:

  • Do not change Scenario name otherwise the previous snapshot will not be used

TODO

  • Feature Testing of app using cucumber-snapshot (should create snapshot, compare, etc...)
  • Remove warning: class variable access from toplevel
  • Save snapshots in Scenario subfolders so it becomes possible to have 2 When steps on differents scenarios.
  • Document how to change driver and improve existing steps
  • Cucumber Rake Tasks to automatically take snapshot of every When step without adding @snapshot or @compare tags
  • Reset Reference snapshots : maybe using a cucumber task
  • Use generators to automatically create folders, add examples files to the project so you don't have to add them manually
  • Take snapshots of certains parts of page using 2 x,y coordinates (usefull if some parts always change):
	And I take a snapshot at (x,y) and (x,y) # Will take a snapshot of current page of the square calculated with 2 points
  • Add error threshold on snapshots:
	@snap_capture @snap_compare_5 #Will take a snapshot at the When page. Will fail if differences are > 5%
 	Given I am logged with email "[email protected]"
   When I go to the home page
  • Use Travis CI