CSS Dev Conf Visual Regression Workshop

Before you start

Before getting started, there a few items to note.

Expected technical skills

Not to scare you away, but the following skills are assumed:

• Basic understanding of the command line
• Intermediate understanding of CSS/Sass
• Intermediate understanding of JavaScript

You can complete the exercises without these skills, but you may need to do a little extra research to fill in the details.

Computer setup

You will need to install some pre-requisites that the regression testing tools use. They are:

The things the tools need to run:

Ruby

I recommend using RVM or RBENV to easily manage Ruby installs. This helps with differences between the require version of Ruby between Wraith and DiffUX.

To check your version, open a command line and enter ruby -v. This will output the current version of Ruby you have running.

If it doesn't match what you want, never fear. If you're using RVM, you can install and use a different version fairly easily. RBENV should manage this for you.

Node

I recommend using NVM for Node. You can install Node manually, but NVM makes managing different versions much simpler.

Other Stuff

• ImageMagick. Install via Homebrew: brew install imagemagick or via NPM (npm install -g imagemagick)
• PhantomJS. Install via Homebrew (brew install phantomjs) or via NPM (npm install -g phantomjs)
• CasperJS Install via Homebrew brew install casperjs or via NPM (npm install -g casperjs)

Having Installation Troubles?

You can use the thoughtbot/laptop repo to help with dependency installation. It is an install script that takes care of everything you need besides phantom/casper and the tools themselves. Be warned, the installation process can take a long time.

PG gem install issues?

Check out this Stack Overflow question.

Once You're Ready

$ git clone https://github.com/micahgodbolt/visual-regression-workshop.git
$ cd visual-regression-workshop
$ npm install
$ npm run start