CSS Unit Testing

A few quick searches discovered that I'm obviously not the first person to have the thought "Can I unit test my CSS?".

I'm wondering if anyone here has taken on CSS Unit Testing successfully? If you've tried and failed, or just have your own theories, please tell me why it (apparently) hasn't been done yet?

There is a new css unit testing library called Quixote. Rather than comparing images visually, it looks at the code. Unlike Selenium, you don't have to assert specific styles, instead you can say something like "it should be centered" or "the left side should be 10px farther to the right of this other element".

You could use Selenium, which is a web testing framework. This way you could assert what styles are to be applied to elements in the DOM etc.

Selenium

Otherwise, not sure what your aim is. Unit testing is, as the name suggests, testing 'Units', and to me, this only makes sense with code, not css.

I don't understand why we couldn't or shouldn't unit test CSS. Here's the scenario I have in mind :

I have a CSS framework that is made of multiple modular CSS files and that drive 5 of my sites.

Ex : base.css / form.css / article.css etc.

Imagine I make a change to base.css for a requirement applying to Site #1 only => I may break Site #2 styling without.

CSS unit test would be even more pertinent if my CSS framework is build on top of LESS or SASS : a change in a macro could break all the styling. .

I think it would be possible in the browser (client-side) to "unit test" CSS. It would be more like an automated checker than an unit testing:

1. Evaluate the final CSS attribute conditions we would like to preserve for a particular CSS class or ID (the result).
2. We require a testing document HTML to render the static content and CSS. All elements should be included in the content in separate containers.
3. After rendering, check with javascript the final or resulting final attributes of the selected targets and output non matching elements.

Unit testing case:

DOM selectors:

.test1
.test2
#test3

This should always be the final attributes:

CSSAttribute1, CSSFinalValue1
CSSAttribute2, CSSFinalValue2
CSSAttribute3, CSSFinalValue3

A function to set test rules in JS could be:

addCSSUnitTest(".test1, .test2, #test3", "margin-left: 4px; font-size: 8px");

Then we check if DOM elements have this final attributes.

All done in javascript after rendering. But anyway this is not practical because you will have to construct many unit test cases that will increase your code significantly.

Also you should always have a reset.css for cross-browser "compatibility".

An alternative would be to designate CSS classes that you know should preserve their entire attributes. Create a list of DOM selectors. Use jQuery to get CSS class attributes (directly from the CSS class) and check if they are preserved in the target DOM elements. This last method could be almost fully automated, but will require a more complex javascript checker. This last one will not check CSS for ID selectors (e.g. "#test3"), only classes (e.g. ".test1")

You can use PhantomCSS for automatic visual comparison. And then you can create CSS module unit test page that only loads the base CSS styles and displays the component in all it's states, but does not load CSS from other components. And then you can compare it to full CSS file with all modules loaded.

We’ve set up unit tests on a large, UI-heavy project and it worked wonderfully! It was also way easier than it looks.

Take simple tools like getBoundingClientRect or getComputedStyle, pair it with hyperscript to create quick temporary DOM trees and you’re good to go. We’ve written tape-css to reduce boilerplate when testing with tape, but the stack will be similar in any test setup.

Yesterday I published a detailed blog post with a simple tutorial and live examples about our new workflow and how it boosted our productivity: How CSS unit tests helped us move fast.

There's an interesting approach which I've never tried, but may work:

1. You create sample pages (à la https://getboostrap.com) providing all components, etc.
2. You test with Huxley

Et voilà :)

Unit Testing CSS, depends on your framework and your approach to CSS.

Questions to ask :

Testing for a given class in your CSS e.g, Assert.IsNotNull

Get CSS property and verify its attributes.

Firstly, I would ascertain, if CSS file exist, then look for specific class then look for attributes inside the specified class.

I have experienced a missing class during my regression test and managed to fix it immediately from previous findings.

Currently, understanding whether CSS is working properly or not is visually determined. So far, the best way to test it is through installing multiple browsers on your dev machine. Start using tools like Firebug and Web Developer on Firefox, and forget about Unit testing CSS until it becomes Turing complete. :-)