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.
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.
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.
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.
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.
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.