I wrote not long about the virtues of CSS visual regression testing. There’s a small problem: getting it set up.
PhantomCSS is incredibly powerful, but an incredible pain the ass. I had the chance to install PhantomCSS on my desktop from scratch, and thus this time I documented my adventure. It took me several hours to get this up and working on my development computer. The only assumptions I’ll make is that you have Xcode installed and are using OS X. *Nix users will be able to follow along and my apologies to Windows users. Users may be at all walks of skill so I’ll try to keep this as humanly sane as possible despite jamming in a bunch of terminal commands. PhantomCSS requires pieces of software to work (and several more to install these):
- PhantomJS (a headless webkit web browser)
- CasperJS (a navigation scripting & testing utility that interacts with headless web browsers)
- ImageMajack (a CLI batch image processor that makes Visual Regression Testing possible)
Let’s begin, shall we?
- Check to see if node is installed:
If you do not have Node installed, you can grab it Here.
Node is an open source cross-platform runtime enviroment for fullstack js development, but contains built-in libraries to act as a web server without software like Apache or IIS, and used commonly to distribute packages.
- Check to see if you have bower installed
If you do not have Bower installed,
npm install -g bower
Bower is a package manager for popular web libraries, allowing for quick distribution of code.
- Install Xcode developer utilities:
This is required to install Ruby, and even if you have installed Xcode, will still need to be run. Skip if you have already installed it.
- Install Homebrew, a package manager for OS X, skip if you have already installed it:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
- Make sure Brew is up-to-date:
- Make sure Brew packages are upgraded
- Install ImageMagick
brew install imagemagick
- Install CasperJS
sudo npm install -g casperjs
- Install PhantomCSS
sudo npm install phantomcss
- Casper bundles the wrong version of PhantomJS, uninstall it.
brew uninstall phantomjs
- Install a compatible version of PhantomJS
brew install homebrew/versions/phantomjs192
Note: this will install version 1.9.2, you can manually install 1.9.8 by visiting PhantomJS’s downloads section, downloading 1.9.8, unzipping it and moving the phantomjs to /usr/local/Cellar/
- Install Resemble.JS
sudo npm install resemblejs
Testing to make sure it is installed correct
In your terminal, go to your desired directory and run
bower install phantomcss
Next test to make sure it works by running the default test from this same directory.
run casperjs test bower_components/phantomcss/demo/testsuite.js
You should see three or so failed tests as the testfile isn’t entirely configured correctly but followed by “Must be your first time?” Success!
Problem: npm ERR! Error: EACCES, open ‘somefile path’
Fix: You didn’t run a npm install as sudo, re-run the npm install as sudo npm install
Problem: Fatal: [Errno 2] No such file or directory; did you install phantomjs?
Fix: brew install homebrew/versions/phantomjs192
Problem: CasperJS needs PhantomJS v1.x
Fix:Casper, the library that talks to PhantomJS only works with PhantomJS 1.x, you have currently installed PhantomJS 2.0. Run brew uninstall phantomjs and brew install homebrew/versions/phantomjs192
Problem: FAIL [PhantomCSS] Resemble.js not found: ./node_modules/resemblejs/resemble.js
Fix:You need to install resemblejs, sudo npm install resemblejs