BackstopJS

Catch CSS curve balls.

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

News: Version 2.0 available now!

BackstopJS is the easiest way to visually test lots of web-app URL states: Simulate user interactions with CasperJS scripts – Inline-CLI reports – Detailed browser reports – jUnit Reports - Add (node module) logic to your config files – Test html5 elements like webfonts and flexbox – plays nice with CI integration, multiple config paths and source control.

ONE

BackstopJS Creates reference screenshots of your webpage/web-app at multiple sceen sizes.

BackstopJS is a config-driven automated screenshot test application for responsive websites and web-applications. Specify 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 find any unwanted CSS regressions.

BackstopJS integrates into your build process and automatically 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, PhantomJS and SlimerJS 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)view all of a project's screen elements at every breakpoint than 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 by adding a new module or putting in a last-minute tweak. :-/

If that sounds familiar then 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 can wreak havoc on your otherwise well behaved UI.


Installation, Documentation, Contribution!

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

BackstopJS was created by Garris Shipon.