CSS Critic

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

Limitations

• Works in Firefox only (experimental PhantomJS runner in the making).
• Same-origin restrictions apply when sourcing files. All files referenced need to be inside the same directory as the RegressionRunner.html or in ones below.
• Because of the way the HTML is rendered to the canvas inside the browser certain more esoteric pages might fail to render correctly. Here the CLI runner can be of some help as it uses the native interface to render pages. See the README for details.

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