Front End Testing with Wraith: A Step by Step Recipe
I had occasion to finally get to one of my goals from last year - and that was to introduce some testing to my front end development.
My goal was to have a way to have a before/after visual regression test. The open source Wraith project, from the BBC, fits the bill wonderfully.
This post is merely meant to be a step-by-step procedure to get Wraith up and running. I'm not going to provide any context to what each step means.
First off, this post assumes that you're running Mac OS X, and already have Ruby installed. This post also assumes that you want to use the "history" mode in Wraith - where you are taking two snapshots of the same URL. (The "standard" mode requires two different URLs).
Step 1: install home brew (if you don't already have it)
Open a terminal and enter this:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Hit enter and enter password at prompts
Step 2: install imagmagik
brew install imagemagick
Step 3: install phantomjs
brew install phantomjs
Step 4: install capserjs
brew install casperjs --devel
Step 5: install wraith
sudo gem install wraith
Step 6: cd to your project directory
Step 7: set up wraith
This creates two files:
Step 8: if desired, set up config for history mode
See this example config file for an example.
Step 9: initiate wraith history to take first set of screenshots
wraith history configs/config.yaml
If you get "unable to find config" errors, check the YAML syntax.
## step 10: do development (or, switch branches)
step 11: have wraith capture the latest
wraith latest configs/config.yaml
This will take a bit, so be patient.
step 12: wraith will generate a gallery page with diffs visually highlighted
It will be found in the "directory" you configured - e.g. 'shots/gallery.html'. Just open that file in your favorite browser.
This is all with the defaults as presented by wraith. There is nothing to stop you from rearranging directories, if it makes sense. For instance, in my project I consolidated everything into
If you change the config file - e.g. add more paths, etc, delete your inital shots and shots_history directories.
My initial instinct is to not commit shots generated by your tests into a version control repo. (In git, this would be done by modifying your
.gitignore file) There are a lot of image files generated, and binary files tend to make git repos balloon in size if they are running amok.