Aegir is a tool to Deploy and manage Drupal sites.
Built by a community of system administrators and developers who share Drupal deployment tools, strategies and best practices, instead of continuing to write our own little shell scripts.
When you install the hosting_drulenium module in Aegir you get two extra task buttons to visually compare webpages. When you already have Aegir 3.x you can add this module like any other Drupal module.
You also need the drulenium module, see http://drulenium.org/installation for instructions. I'm currently only testing with the local server setup, so my own selenium. But the intention is to have it functional with all the listed tools. The Drulenium readme file had a few Debian hints and debugging info.
The two task types are:
- “Drulenium – Screenshots” creates a new screenshot of your site.
- “Drulenium – Compare” lets you select a second site to compare screenshots with.
By starting a "Drulenium - Screenshots" task you quickly get a set of screenshots from the current site. This can be later used as a baseline when have made changes to the site.
When you edit the site node in Aegir you can specify which pages to use. It defaults to just the frontpage.
When your first screenshots are ready the hosting_drulenium module adds a few links to the site's overview page in Aegir, giving quick access to the most recent screenshots.
After clicking 'Run' for the Compare task you get a dialog asking you to which site you would like to compare the current one. This might eventually become an auto complete field ... (patches welcome)
You also have the option to re-use existing screenshots of a site you made earlier using Drulenium. This saves some time and resources when you often compare a development site to hardly changing live site.
On the comparison page you get four sorts of visual comparisons.
- A percentage difference number
- The red highlighted image
- The Animated gif
On this comparison page the images can be clicked to enlarge (opens n new tab/window) ... The 'Release A' and Release B' links can be used to get both original screenshots.
Enlarged the 'Diff highlighted' looks like:
The red parts indicate a place where there is a difference between the screenshots.
The 'Animated GIF':
With a frequency of 1 second the two screenshots are switched, giving a blinking effect.
And the most recent addition, the 20-20 comparison, with the real thing you can move the verical bar from left to right. Both screenshots are layered onto each other.
If you have any feedback please let us know, issue queues are always open.
For more information visit: