Regression Testing CSS

Created by Frank Anderson / @frobdfas

Who am I?

Frank Robert Anderson

frob on Drupal.org, Github, and IRC.

What is Front-End Regression Testing?

Visual Diffs from screenshots that are generated from controlled sources.

Compare Screenshots

Taking a sequence of screenshots and diffing them with a tool such as ImageMagick Compare.

Take This

Compare to this

To get this

Tools

PhanotomJS
SlimerJS
Selenium
CasperJS
WebdriverCSS
PhantomCSS
Wraith

Developed in Ruby by BBC, uses PhantomJS, (or SlimerJS), optionally with CasperJS, to provide a website that houses your diffs and settings to help you manage them.

Benifit of Wraith

Simple to run, easy to setup (after installation), very powerfull.

Minimal Configuration

Run wraith setup or setup_casper

Configuration happens in two files.

configs/config.yaml
javascript/snaps.js

Config.yaml

domains: github: "http://frob.github.io" selfhosted: "https://www.frobiovox.com": List of environments to compare
screen_widths: - 320 - 768 - 1024: Screen resolutions that Wraith will generate diffs from.
paths: home: / tutorials: /tutorials.html rants: /rants.html everything: /river.html: The URL paths that Wraith will generate diffs from.
fuzz: '20%': Amount of fuzz ImageMagick will use

shots.js

Javascript that wraith uses with phantom and casper to generate the screenshots.

Wraith Problems

Installation and documentation

Documented Installation

gem install wraith

It's ruby so it just works, right?

Actual Installation on OSX

brew tap homebrew/versions
brew install phantomjs198
Do not attempt to install a gem with sudo on OSX!
install rbenv if not installed
brew install rbenv ruby-build
eval "$(rbenv init -)"
rbenv install 2.1.2
rbenv shell 2.1.2
gem install wraith