With Wraith Software, you can access the visual differences in website overtime through screenshot comparisons. To install Wraith on Linux (Lets say Ubuntu or Debian), for it to work properly, you need to add some dependencies.
Here at Ibmi Media, as part of our Server Management Services, we regularly help our Customers perform Software Installation Services.
In this context, we shall look into the steps to install and configure Wraith on Ubuntu.
More about install and how to install Wraith on Ubuntu Linux?
As earlier stated, Wraith makes it possible to assess the visual differences on a website over time efficiently. It helps to ensure that the any new change made does not affect the design of a live website.
For Wraith to function properly on your Ubuntu Server, you need to install the following dependencies to the system;
iii.Any of the browsers: PhantomJS, CasperJS, SlimerJS
How to install Ruby on Ubuntu?
To install Ruby, start by logging into your Server as the root user and once logged in, simply execute the following command;
apt-get install ruby-full
After the Ruby installation is completed, you can confirm and check its version by running the command;
How to install ImageMagick on Ubuntu?
Basically, ImageMagick is a set of programs for reading and editing files in graphic format. It may come preinstalled with the version of Ubuntu.
To get ImageMagick installed, start by installing its prerequisites as shown below;
apt-get install php php-common gcc
Once completed, execute the following command to install ImageMagick;
apt-get install php-imagick imagemagick-6.q16
To confirm that it has been successfully installed, run the following convert command to check its version;
How to Install Web Browsers on Ubuntu?
Here we will consider how to install PhantomJS. You can also install the following browsers;
Let us here proceed with the installation of PhantomJS. To do this, first update the system package list;
Then, we install a few additional libraries needed for PhantomJS as shown below;
apt-get install build-essential chrpath libssl-dev libxft-dev libfreetype6 libfreetype6-dev libfontconfig1 libfontconfig1-dev -y
Next, let us export the file by running the command;
Now, we can download the PhantomJS tar.bz2 installer file, by running the following command;
Next, let us extract the file by executing the command;
tar xvjf $PHANTOM_JS.tar.bz2
Then, we will move the phantomjs-2.1.1-linux-x86_64/ folder to "/usr/local/share", by running the command;
mv $PHANTOM_JS /usr/local/share
Now, we can link the phantomjs binary to the bin by running the command;
/usr/local/share# ln -sf /usr/local/share/$PHANTOM_JS/bin/phantomjs /usr/local/bin
Finally, let us check the installation to see if the version we need is installed. To do this, execute;
/usr/local/share# phantomjs --version
How to install Wraith on Ubuntu?
Let us now proceed with the Wraith installation, To do this, execute;
/usr/local/share# gem install wraith
Again, let us verify the version of Wraith installed. Execute the command;
How to configure Wraith?
To begin, we need to create a project folder. Run the following command to do this;
mkdir -p /home/user/wraith
Then, let us change directory into our project folder by executing the command;
Next, we can use the wraith command to set up the folders and files required in our project folder.
/home/user/wraith# wraith setup
The wraith command creates the necessary configuration, templates, and settings folders for our wraith files. Next, we will make a copy of the file called "config.yaml" located within the configs folder and give it a new filename called "new_project_name.yaml".
Then, we can use vim command to add the settings we want to employ to compare our sites.
/home/user/wraith# cp configs/capture.yaml configs/my_project_name.yaml
Below is a complete view of the file.
# (required) The engine to run Wraith with. Examples: 'phantomjs', 'casperjs', 'slimerjs'
# (required) The domains to take screenshots of.
# (required) The paths to capture. All paths should exist for both of the domains specified above.
# (required) Screen widths (and optional height) to resize the browser to before taking the screenshot.
# (required) The directory that your screenshots will be stored in
In order to configure the "new_project_name.yaml" file, there are six required parameters we need to adjust.
ii. domains – current, new
iii. paths – home: /, about: /about, contact: /get-in-touch
The yaml file format is space sensitive so the settings like the "Domain" and "Path" entries in the file should be spaced out as depicted within the editor.
There are also several other optional settings we can modify to meet our specific needs. Some of them include:
# (optional) The maximum acceptable level of difference (in %) between two images before Wraith reports a failure. Default: 0
# (optional) Specify the template (and generated thumbnail sizes) for the gallery output.
template: 'slideshow_template' # Examples: 'basic_template' (default), 'slideshow_template'
# (optional) Choose which results are displayed in the gallery, and in what order. Default: alphanumeric
# alphanumeric - all paths (with or without a difference) are shown, sorted by path
# diffs_first - all paths (with or without a difference) are shown, sorted by difference size (largest first)
# diffs_only - only paths with a difference are shown, sorted by difference size (largest first)
# Note: different screen widths are always grouped together.
# (optional) Set the number of threads to use when saving images. Raising this value can improve performance, but very high
# values can lead to server connection issues. Set to around 1.5 the available CPU cores for best performance. Default: 8
Finally, Save the file after updating the specific settings.