CSS Unit Testing

0 votes
asked Dec 5, 2008 by nickf

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?

10 Answers

0 votes
answered Jan 5, 2008 by flussence

It doesn't make sense to do so IMO. CSS is a language for controlling page layout; trying to unit-test it would be like trying to unit-test Postscript.

The only obvious use for unit testing I could think of is comparing screenshots to see which browsers were affected by a change in the code. Beyond that though, you can't say the code is right unless you manually compare everything in the rendered output to what the spec says it should be. To me, getting CSS right is always going to be trial-and-error.

0 votes
answered Jan 5, 2008 by judy

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. :-)

0 votes
answered Dec 5, 2008 by rekrowynapmoc

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.

0 votes
answered Dec 22, 2013 by jkarttunen

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.

0 votes
answered Jan 25, 2014 by avetisk

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à :)

0 votes
answered Dec 12, 2014 by boudu

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

0 votes
answered Dec 21, 2014 by heroselohim

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")

0 votes
answered Dec 21, 2014 by aharris88

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

0 votes
answered Dec 14, 2016 by tomekwi

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.

0 votes
answered Sep 15, 2017 by muks

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.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...