Automatic CSS Testing

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

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:

Syntax

Did you literally make mistakes in your CSS?

Project

Does this CSS meet the standards you set?

Reference

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

Regression

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.

Resources

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