A lightweight tool for regression testing of Cascading Style Sheets.
One picture might say more than 1000 words:
For background information watch the screencast or checkout some examples for a hands-on experience with an application that has its UI tested. Fast forward to see it in action testing the TodoMVC application.
Your web stack should be fully testable - even your UI including CSS. CSS Critic can shine here. For example let it supervise changes to your project's styleguide so you know things are looking good.
$ npm install csscritic
node_modules/csscritic/example/RegressionRunner.html for an example on how to take it from there.
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.
RegressionRunner.htmlsimilar to the one under
example/and put it with your code that is to be tested.
Register your page under test via:csscriticaddurl: 'SOME_URL' // link to the test case HTML document// Optionally:width: number // the viewport width in pixelheight: number // the viewport height in pixelhover: 'A.SELECTOR' // element receiving an :hover effectactive: 'A.SELECTOR' // element receiving an :active effect;csscriticexecute;
Open the RegressionRunner.html in Firefox for the first time and save the resulting image as future reference.
Re-run the RegressionRunner.html and see your test passing. Congratulations.
What do I do if my test fails?
Have a look at the diff image and visually inspect what has changed.
If the change is an unwanted one fix your CSS,
If deliberate accept the change (generating a new reference image).
For tests install Node.js and run
- Currently works in Firefox only.
- Same-origin restrictions apply when sourcing files. All files referenced need to be inside the same directory as the
RegressionRunner.htmlor in ones below.
- Because of the way the HTML is rendered to the canvas inside the browser form inputs and certain more esoteric pages might fail to render correctly. Do file an issue if you see something odd.
Licensed under MIT. Maintained by @cburgmer. Copyright (c) 2012, 2013 ThoughtWorks, Inc.