BackstopJS

Catch CSS curve balls.

Breaking CSS is easy. Checking every responsive page element is hard. That’s why there's BackstopJS.

New in version 0.4.0: NPM installer, SPA load events, improved config.

ONE

BackstopJS Creates reference screenshots of your DOM at multiple sceen sizes.

BackstopJS is a config-driven automated screenshot test component. Give it a set of DOM elements and viewport sizes and BackstopJS will work like an extra set of eyes on your workflow.

TWO

After editing your CSS, use BackstopJS to create a test batch of screenshots.

BackstopJS integrates into your build process and automaticly checks your work before you ship it to QA/staging/production. Alternatively, run BackstopJS manually whenever the need arises.

THREE

BackstopJS uses Resemble.js, CasperJS and PhantomJS to report on visual changes.

BackstopJS helps to catch the errors you might otherwise miss. Get a heads-up report for each selector. Quickly zero-in on issues with side-by-side screenshots and diff images.


Is BackstopJS for you?

Responsive layouts are very difficult to test. It's arguably more tedious to (re)test all of a project's DOM elements at every breakpoint then it is to code them in the first place. If you develop responsive UI, you know the worst thing ever is when you've developed a beautiful, rock-solid, responsive CSS layout only to accidentally and un-knowingly hose it while putting in a last-minute tweak from marketing. :-/

If that sounds familiar you are in the right ballpark... BackstopJS is a dead-simple way to add another line of defense between you and those unpredictable CSS curve-balls.

BackstopJS may be just the thing if you develop responsive CMS templates (e.g. Wordpress, Drupal), landing pages, static sites, or dynamic web-apps where one greedy selector from an imported module can potentially wreak havoc on your otherwise well behaved UI.


Installation, Documentation, Contributation!

And while you're at it, check out TremulaJS, another fine Art.com labs project.

BackstopJS was created by Garris Shipon at Art.com labs.