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