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;

i. Ruby
ii. ImageMagick
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;

ruby --version

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;

convert --version

How to Install Web Browsers on Ubuntu?

Here we will consider how to install PhantomJS. You can also install the following browsers;

i. CasperJS
ii. SlimerJS
iii. Chrome

Let us here proceed with the installation of PhantomJS. To do this, first update the system package list;

apt-get update

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;

export PHANTOM_JS="phantomjs-2.1.1-linux-x86_64"

Now, we can download the PhantomJS tar.bz2 installer file, by running the following command;

wget https://github.com/Medium/phantomjs/releases/download/v2.1.1/$PHANTOM_JS.tar.bz2

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;

wraith --version

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;

cd /home/user/wraith

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

vim configs/capture.yaml

Below is a complete view of the file.

# (required) The engine to run Wraith with. Examples: 'phantomjs', 'casperjs', 'slimerjs'

browser: "phantomjs"

# (required) The domains to take screenshots of.

domains:

current: “http://www.example.com”

new: “http://develop.example.com”

# (required) The paths to capture. All paths should exist for both of the domains specified above.

paths:

home: /

about: /about

contact: /get-in-touch

# (required) Screen widths (and optional height) to resize the browser to before taking the screenshot.

screen_widths:

- 320

- 600x768

- 768

- 1024

- 1280

# (required) The directory that your screenshots will be stored in

directory: 'shots'

In order to configure the "new_project_name.yaml" file, there are six required parameters we need to adjust.

i. browser
ii. domains – current, new
iii. paths – home: /, about: /about, contact: /get-in-touch
iv. screen_widths
v. directory
vi. fuzz

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) JavaScript file to execute before taking screenshot of every path. Default: nil

before_capture: 'javascript/disable_javascript--phantom.js'

# (optional) The maximum acceptable level of difference (in %) between two images before Wraith reports a failure. Default: 0

threshold: 5

# (optional) Specify the template (and generated thumbnail sizes) for the gallery output.

gallery:

template: 'slideshow_template' # Examples: 'basic_template' (default), 'slideshow_template'

thumb_width: 200

thumb_height: 200

# (optional) Choose which results are displayed in the gallery, and in what order. Default: alphanumeric

# Options:

# 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.

mode: diffs_first

# (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

threads: 8

Finally, Save the file after updating the specific settings.

[Need additional help to install Wraith on Ubuntu? – We are available to help you today.]