Screenshot tool: Difference between revisions

From diaspora* project wiki
(draft)
 
(Drop i18n template)
 
(9 intermediate revisions by 5 users not shown)
Line 1: Line 1:
{{note
{{note
|This HowTo requires you to have read and to follow the [[Git Workflow]]. Please, read it, in case you haven't.
|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 held together by some rake tasks. The main idea to have such a thing is that, when bigger changes to the stylesheets 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.
The ''screenshot tool'' is a glorified collections of a few [[Testing Workflow | 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 ==
== Reference images ==
Line 17: Line 16:


<source lang="bash">
<source lang="bash">
bundle exec rake screenshots:reference
RAILS_ENV=test bin/rake screenshots:reference
</source>
</source>


Line 24: Line 23:
== Comparison images ==
== 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 assume you are already done and on the git branch where all the work is on, so we can continue by taking screenshots of all the great improvements you did.
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.


<source lang="bash">
<source lang="bash">
bundle exec rake screenshots:comparison
RAILS_ENV=test bin/rake screenshots:comparison
</source>
</source>


Line 37: Line 36:


<source lang="bash">
<source lang="bash">
bundle exec rake screenshots:flicker
RAILS_ENV=test bin/rake screenshots:flicker
</source>
</source>


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 <tt>tmp/screenshots</tt>.)
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 <tt>tmp/screenshots</tt>.)
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.


[[Category:Developers]]
[[Category:Developers]]

Latest revision as of 02:45, 15 October 2018

NoteNote: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:

RAILS_ENV=test bin/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.

RAILS_ENV=test bin/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.

RAILS_ENV=test bin/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.