-
Notifications
You must be signed in to change notification settings - Fork 19
CSS Critic will tell you when your screenshot doesn't look the same as before.
In an environment where quality is paramount we need tooling for web development to deliver under the same standards as any other part of the system. CSS Critic provides a safe haven for refactoring around CSS & HTML (and if you want JS to some extent) and will reliably let you know if the given pages still render correctly.
The page you provide is rendered once for the screenshot to be checked and signed off by you. Future runs will safeguard this one rendering. Any change will be reported back to you. It is then up to you to decide where to go from there.
Quickly compare the old and the new rendering, supported by a difference image highlighting the changed pieces. Then reject or accept the new rendering.
You can actually feed in either HTML pages, or images. If you have a more complex setup, it might be easier for you to generated PNGs instead, and diff those. For example you could diff PDFs that way.
Even a slight change in color of one pixel - not enough for humans to pick up - will trigger CSS Critic to fail your test. Each screenshot is compared pixel by pixel, no compromise. The reasoning is simple: Take a simple underlined text of 100px. This thin line makes up less than 1% of a 800x600 screenshot - and still we want this change (an addition or removal) to turn up in our test.
No. The idea is that you are going to test units of your UI and with that the tests should only change if those units are intentionally touched and changed. More importantly CSS Critic makes it easy to fill your pages with mock values - helpful if you have volatile content or a complex page set-up.
We aim for modular code, why fall short of that in our UI. CSS Critic will shine with your UI modules. If you'd like to test a legacy system don't despair. Have a look at the (closed) issue 28 and let us know how we can help.
The way CSS Critic integrates with your code it is easy to simulate such kind of behaviour. See the documentation on csscritic.add().
Most libraries that implement JS-based transitions have a way to turn them off for testing.
For jQuery do jQuery.fx.off = true, for D3 try d3.timer.flush() (or see d3's #1789).
Sharing renderings is rather difficult as all browsers have slight rendering differences and thus CSS Critic does not aim to support such a setup. What works quite well however is placing an instance of your test suite on a big screen that is triggered on every build. This will also directly show a screenshot of the breaking change.
cburgmer/buildviz is using CSS Critic to test graphs rendered with D3 (see https://github.com/cburgmer/buildviz/tree/master/test).
Feel free to provide feedback and share you story. You might see something the previous people so far haven't.