Wraith helps to assess the visual differences in website overtime via screenshot comparisons. Install of Wraith on Ubuntu also requires to add some dependencies.

As a part of our Server Management Services, we help our Customers with software installations regularly.

Let us today discuss the steps to install and configure Wraith on Ubuntu.

How to install Wraith on Ubuntu?

Wraith helps to assess the visual differences on a website over time. It helps to ensure that the new changes do not affect the design of a live website.

Install of Wraith in Ubuntu requires the following dependencies added to the system:

•  Ruby
• ImageMagick
• At least one of the browsers: PhantomJS, CasperJS, SlimerJS

Let us now discuss the steps to add these dependencies and then install Wraith.

Install Ruby

Ruby can be easily installed with the command below:

[root@host ~]# apt-get install ruby-full

After Ruby installation, we can check the version using the following command.

root@host:~# ruby --version
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux-gnu]

Install ImageMagick

ImageMagick is a set of programs for reading and editing files in graphic format. It may come preinstalled with the version of Ubuntu. If not installed, the following command shows an output that converts is not installed.

root@host:~# convert --version

To install ImageMagick, first, we need to install some of its prerequisites:

root@host:~# apt-get install php php-common gcc

The command to install ImageMagick is as follows.

root@host:~# apt-get install php-imagick imagemagick-6.q16

Now, if we check the convert version, it returns the version of ImageMagick in the server.

Once again, we can check to see whether ImageMagick is installed by running the following command.

Install One of the Following Browsers

Next, we need to install one from the browser list below:

• PhantomJS
• CasperJS
• SlimerJS
• Chrome

Let us here proceed to install PhantomJS. For this, we will again update our package list.

root@host:~# apt-get update

Then, we need to install a few additional libraries needed for PhantomJS.

root@host:~# apt-get install build-essential chrpath libssl-dev libxft-dev libfreetype6 libfreetype6-dev libfontconfig1 libfontconfig1-dev -y

Next, let us export the file.

root@host:~# export PHANTOM_JS="phantomjs-2.1.1-linux-x86_64"

Now, we can download the PhantomJS tar.bz2 installer file.

root@host:~# wget https://github.com/Medium/phantomjs/releases/download/v2.1.1/$PHANTOM_JS.tar.bz2

Next, let us extract the file.

# tar xvjf $PHANTOM_JS.tar.bz2

Moving forward, we will move the phantomjs-2.1.1-linux-x86_64/ folder to /usr/local/share.

root@host:~# mv $PHANTOM_JS /usr/local/share

Now, we can link the phantomjs binary to the bin.

root@host:/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.

root@host:/usr/local/share# phantomjs --version
2.1.1

Install Wraith on Ubuntu

Let us now proceed with the Wraith install.

root@host:/usr/local/share# gem install wraith

Again, let us verify the version of Wraith installed.

root@host:~# wraith --version
4.2.4

Configure Wraith

First, we need to create a project folder.

# mkdir -p /home/user/wraith

Now, let us change directories into our project folder.

root@host:~# cd /home/user/wraith

Next, we can use the wraith command to set up the folders and files required in our project folder.

root@host:/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 “my_project_name.yaml”. Then, we can use vim to add the settings we want to employ to compare our sites.

root@host:/home/user/wraith# cp configs/capture.yaml configs/my_project_name.yaml

root@host:/home/user/wraith# 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 “my_project_name.yaml” file, there are six required parameters we need to adjust.

• browser
• domains – current, new
• paths – home: /, about: /about, contact: /get-in-touch
• screen_widths
• directory
• 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

Save the file after updating the specific settings.

[Need any further assistance to install Wraith on Ubuntu? – We’re available 24*7]

Conclusion

In short, Install of Wraith on Ubuntu also requires adding Ruby, ImageMagick, and some other dependencies added to the system. Today, we saw how our Support Engineers install Wraith on Ubuntu.