Grow your CSS skills. Land your dream job.

Automatic CSS Testing

Published by Chris Coyier

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:


  1. Jeff Chew
    Permalink to comment#

    Simon just did a great talk about automated CSS testing this week in CSS Summit ( He’s definitely doing great work there!

  2. Hey Chris, thanks for the links. I wanted to get into automatic CSS testing for quite some time now but haven’t found a good roundup of tools – until now! Have you tried one (or more) of the tools yet? I think I’ll try PhantomCSS (or GhostStory) on my next client project. Maybe there’s even a way to integrate that with Grunt.

  3. cvb
    Permalink to comment#

    Use SaSS then you’ll have CSS testing for free :D

  4. Thanks for the links, it would be a good idea if some editors like Sublime Text 2 and 3 could integrate those tools. Same thing with Codekit…

    @cvb : i am using Sass and Compass, it is not testing css ? If you make mistakes on the scss, the will be in your scc file no ?

  5. Permalink to comment#

    The BBC just released this post where they’re talking about their own tool for CSS testing: Wraith. It’s using PhantomJS by default to capture images and Imagemagick to compare two versions by generating diffs.

  6. Alfredo Cavalcanti Segundo

    The link for “4 tools for automatic CSS testing” article is old. Here is the new one:

  7. I wrote an article on how to integrate PhantomCSS regression testing to your daily git workflow. We use JIRA stories as the source for test URLs but it could be anything with an API. Git Hooks are used to run tests and provide instant feedback on commits.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".