Screenshot tool

Note:

The screenshot tool is currently broken since it uses RMagick which we had to drop for compatibility issues.

Note:

This HowTo requires you to have read and to follow the Git Workflow. Please, read it, in case you haven't.

The screenshot tool is a glorified collections of a few Cucumber features orchestrated by some rake tasks. The main idea to have such a thing is that, when bigger changes to the stylesheets or the page templates are made, they can be easily verified and compared to the previous state by simply invoking a few commands and as a result you get a couple of nice before/after images.

Reference images

Since you are neatly following the Git Workflow, all the awesome work you do is happening on a separate git branch, and all you have to do to get the current HEAD of the develop branch is to check it out:

git checkout develop

Now you're ready to take the "before" (or "reference") screenshots:

bundle exec rake screenshots:reference

The image files will be stored in tmp/screenshots/reference.

Comparison images

It is time for you, to do all the work you came to do (and improve the unholy mess we call stylesheets). Since you're reading this, we'll simply assume you are already done and on the git branch where all the work has happened, so we can just continue by taking screenshots of all the great improvements you did.

bundle exec rake screenshots:comparison

That's all, the images files can be found in tmp/screenshots/current

Flicker images

Here comes the interesting part: GIF images, showing the "before" and "after" screenshots in rapid succession, in order to be able to spot differences more easily. You must have manually created the reference and comparison screenshots in advance to this step, otherwise there will be no usable result.

bundle exec rake screenshots:flicker

This command will tell you, when it's done and show you the path in your filesystem where you can find the flicker GIF images. (It will be tmp/screenshots.)

Now you can look at the individual images in your favourite image viewer and check whether all the changes look OK. As an added bonus, you can even use the pictures as illustration for the pull request on Github or for exhibiting purposes elsewhere.