Automatic CSS Testing

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Simon Madine is leading the charge in the neglected world of CSS testing. This is the scoop so far as I understand it.

Types of Testing

There are four different categories of CSS testing:


Did you literally make mistakes in your CSS?


Does this CSS meet the standards you set?


Does the rendered page look as you expect it to? Cross-browser as well.


After actions are performed, does the page look as you expect it to?

I’m personally most interested in regression testing. Example: I’ve pushed production code where I changed the z-index of a header. I manually tested a few things and it seemed fine. But there was one type of alert message that could show, that I forgot to test, that ended up having a lower z-index and was completely hidden by the header. Wheels were spun trying to figure out why the message wasn’t showing. Through regression testing, it may be possible to declare actions to be performed on a page, then test that the things are showing as you intend.


Simon is the man, so learn more and find out what tools are out there that can help you with the different types from his work:

Regression Testing Tools and Info