CSS regression tool? [closed]

Question

I'm looking for a visual regression testing tool for CSS refactoring and see whether or not there are any unintended cascading behavior in a website.

Ideally, the tool that can crawl a website (even locally) and grab snapshots of each page and store it in a single repository.

When run for the second time, it will show the pages that are visually different since the last time it was run.

Even better:

1. if it can show the overlapper XOR view of the 2 version of the page.
2. compare rendering results of different browsers (almost like an automated Microsoft Expression Web compare feature).

Answer 1

My current favorite is WebDriverCSS in combination with BrowserStack Automate API. This pair of tools allows for multi-platform, multi-browser regression testing across the very wide range of devices that BrowserStack supports. It requires writing code but is much more comprehensive than any solution bound to Phantom or Slimer.

If you are ok with an old WebKit being your only test UA, here's a great writeup on CSS regression testing using PhantomCSS. Their basic example provides exactly what the original question desired: visual diffs between two commits.

For a simpler tool that requires no coding (only YAML config), I point people towards Wraith more often than PhantomCSS. Give @ericcraio's answer a vote if you like Wraith and don't want to write Casper code.

Answer 2

I know this question has been posted for awhile but I wanted to mention about a new CSS regression tool called wraith by bbc-news.

http://github.com/bbc-news/wraith

It utilizes tools such as phantomJS and imagemagick.

http://responsivenews.co.uk/post/56884056177/wraith

Answer 3

Check out Browser Shots. This is a free service.

There are some restrictions on how many tests you can run each day as a free user. But unlike Litmus; you can run tests on all supported browsers--Litmus only allows free users to test their websites on Internet Explorer 7 and Mozilla Firefox 2.

Answer 4

I am developing a CSS regression testing tool which is called SUCCSS, it is a npm global, open source: https://github.com/B2F/Succss. Atm, you can read its full documentation there: http://succss.ifzenelse.net