I’ve recently sat down with PhantomCSS and it has been incredible. PhantomCSS is an open-source library that merges PhantomJS, a headless webkit web ‘browser’; CasperJS, a web navigation scripting tool, and ResembleJS, an image diff tool, into a single library for front-end visual regression testing.

Functional tests are created by navigating to web pages, presumably on your site, and taking snapshots of particular elements on the page. These snapshots are then compared to prior snapshots of the same elements, called your baselines. If the snapshots match-up pixel by pixel then the test passes and ensures no regressions were introduced when delivering a new release. CasperJS also allows you to both interact and manipulate the page, as well. This means you can open menus, hover over buttons, and input text, all prior to taking the snapshot.

I can see this tool being especially useful for integration testing against a staging branch, prior to a deployment, via a continuous integration tool such as Jenkins, as well as for developers looking to confirm the intended scope of their work.

After downloading the library and integrating it into my Grunt workflow, this is already proving to be a great addition to our testing suite. I am currently in the midst of fleshing out a multitude of tests for the various home pages and key functionality on a multi-site I’m involved in. The experience has been relatively pain-free and I can easily foresee how effective the tests will be.

For further reading on PhantomJS check out Micah Godbolt’s thoughts at http://www.phase2technology.com/blog/css-testing-with-phantomcss-phantomjs-casperjs-and-grunt/