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

The comments about it not being turing complete, not unit-testable, etc.. are just lame. For example the inheritance (cascading) in css is something that would be very interesting to test for. Cross-browser tweaks are also interesting to verify. And selenium, or any other in-browser solution does not sound like it could work. Unless maybe it is based on something like qunit/jquery and actually pokes the DOM to see if the CSS applies like the author intended (and could be run/tested in different browsers to validate it works). — Evgeny, Jan 27 '11 at 17:45
Including CSS checks in tests could help prove some business requirements in BDD (such as the size of something being NxN and blue). These types of things are certainly testable, even if their appearance in user-agent X fails to meet said requirements (which is where something like selenium can fill the gaps) — Kevin Peno, May 07 '13 at 17:56

score 22 · Answer 1 · answered Oct 21 '14 at 18:48

22

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

answered Oct 21 '14 at 18:48

aharris88

3,560
3
27
45

wondering whether you have you tried Quixote already. If yes, would you be able to share some details about your experience? – leenasn Jan 21 '15 at 17:28
I haven't, but I want to try it. – aharris88 Jan 21 '15 at 22:08

score 19 · Accepted Answer · edited Jul 08 '14 at 06:30

19

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.

edited Jul 08 '14 at 06:30

Jens Piegsa

7,399
5
58
106

answered Dec 05 '08 at 01:18

RekrowYnapmoc

2,166
2
22
23

7

well, CSS is code, ...kind of. Anyway, changing the input (the CSS file) will change the output (the visuals), and I'd like to make assertions about the output - checking that the font size in paragraphs is never different - checking that the text aligns to a grid properly, etc. – nickf Dec 05 '08 at 01:21
1

Selenium is what you need for that. And just to be clear. CSS isn't code :-) , it's not a programming language, and is in no way Turing Complete, it's a descriptive language to visually style XML Docs. – RekrowYnapmoc Dec 05 '08 at 01:31
14

It's not a programming language. But it is code. Just as HTML is code. – slim Dec 05 '08 at 15:36
4

again, sorry have to disagree. Code is something executed by a machine. HTML is markup. – RekrowYnapmoc Dec 05 '08 at 21:07
21

OK, you've picked an extremely narrow definition of 'code'. By that definition the C in 'ASCII' doesn't make sense. – slim Dec 06 '08 at 18:51
10

Actually CSS3 _is_ (arguably) Turing complete :) – Michael Mior Apr 25 '13 at 19:35
1

I think the question is a valid one, for example when CSS is combined with JavaScript, styles of text and the position of elements may be changing in various scenarios, so it warrants the need to have a test in place to ensure the styling is indeed the correct one for the given scenario – Jasdeep Khalsa Jun 20 '13 at 08:29
No matter the definition we have about CSS. The practical question about this is: can be tested with automated tasks? I think we could validate final states of DOM elements checking the final attribute CSS values. This could be achieved with javascript <-> CSS unit testing. – Heroselohim Jul 21 '14 at 14:16
3

"Code is something executed by a machine." Haskell, HTML and CSS are all interpreted and executed by a machine. https://en.wikipedia.org/wiki/Declarative_programming – Todd Chaffee Apr 26 '18 at 19:38

score 2 · Answer 3 · answered Jul 21 '14 at 15:38

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:

Evaluate the final CSS attribute conditions we would like to preserve for a particular CSS class or ID (the result).
We require a testing document HTML to render the static content and CSS. All elements should be included in the content in separate containers.
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")

score 1 · Answer 4 · answered Nov 22 '13 at 09:04

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.

score 1 · Answer 5 · edited Mar 12 '14 at 18:02

1

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

edited Mar 12 '14 at 18:02

Remy

13
1
3

answered Mar 12 '14 at 02:01

boudu

99
1
4

Yes, I also have some base CSS stylesheets for many sites. But also each one has custom CSS files to make them unique. With custom CSS files you may override default styling and also enable/disable them. – Heroselohim Jul 21 '14 at 15:30

score 1 · Answer 6 · answered May 14 '16 at 09:17

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.

score 0 · Answer 7 · answered Jul 25 '14 at 09:32

0

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

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

Et voilà :)

answered Jul 25 '14 at 09:32

avetisk

11,651
4
24
37

score 0 · Answer 8 · answered Sep 11 '17 at 07:39

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.

score -4 · Answer 9 · answered Dec 05 '08 at 15:29

-4

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

answered Dec 05 '08 at 15:29

Clinton

2,296
4
19
21

And once you've installed multiple browsers on your dev machine, you can _visually determine_ if the CSS is working properly... Selenium is a way to automate this visual determination. – Greg Oct 22 '13 at 15:24

CSS Unit Testing

9 Answers9

Linked