Drulenium in the Aegir Hosting System

 

Aegir logo

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.

 

Hosting task buttons   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.

This post of based on hosting_drulenium 7.x-3.0-alpha2, and 7.x-1.0-beta22 of Drulenium.

 

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.

Site node edit form field for pages

 

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.

 

Site node view, containing Drulenium links.

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.

Confirm dialog

 

On the comparison page you get four sorts of visual comparisons.

  1. A percentage difference number
  2. The red highlighted image
  3. The Animated gif
  4. A link to a JavaScript enabled sliding comparison.

 

Comparison over view page

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:

Diff Highlighted image

The red parts indicate a place where there is a difference between the screenshots.

The 'Animated GIF':

Animated comparison

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.

screenshot of a 20-20 comaprison

 

If you have any feedback please let us know, issue queues are always open.

For more information visit: