CSS Unit Testing

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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.