CSS Critic

A lightweight framework for regression testing of Cascading Style Sheets

View the Project on GitHub cburgmer/csscritic

CSS Critic is here to fill the gap in your test tooling.

Watch the screencast and learn how to write your first test:

You can see it in action testing the TodoMVC application.

The CSS Critic Examples project collects example applications integrating the UI test suite.

How it works

CSS Critic checks your current layout constantly against a reference image you have provided in the past. If your layout breaks (or simply changes - CSS Critic can't tell) your tests fail.

Get started:

  1. Create a RegressionRunner.html similar to the one under example/ and put it with your code that is to be tested.

  2. Register your page under test via:

    csscritic.add(PUT_THE_PAGE_URL_HERE);
    csscritic.execute();
    
  3. Open the RegressionRunner.html in Firefox for the first time and save the resulting image as future reference.

  4. Re-run the RegressionRunner.html and see your test passing. Congratulations.

What do I do if my test fails?

  1. Have a look at the diff image and visually check what has changed.

  2. If the change is an unwanted one fix your CSS,

  3. If deliberate generate a new reference image.

The test suite in action for the TodoMVC applicationThe test suite in action for the TodoMVC application.

Limitations

Maintained by @cburgmer. Copyright (c) 2012 ThoughtWorks, Inc.
Licensed under MIT.