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:

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:

Comments

  1. Jeff Chew
    Permalink to comment#

    Simon just did a great talk about automated CSS testing this week in CSS Summit (http://environmentsforhumans.com/2013/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.

Leave a Comment

Current day month ye@r *

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