Why CSS Testing Could Be Huge

Design has established itself as a differentiating factor in web applications, and along with it, the importance of the visual experience. Testing visuals is usually done by manual inspection, which can get tedious. Integration testing misses out on that very aspect of how your application should look at any given time.

Fortunately, the visual experience on the web is controlled by CSS, and CSS is testable. Frameworks like Needle have taken a stab at it. But I find them too cumbersome to be useful; Needle compares your pages to gold-standard screenshots.

So I was really excited when my friend and ex-colleague Winston released Cactus. Cactus takes a more practical approach and tests based on the computed CSS of the document.

But hold on, isn’t it overkill to test your CSS?

No it’s not.

You do it already #

You already have a style guide. You already know what classes and styles each nook of the UI should have. CSS tests are just a baseline representation of your style guide. Are my headers appearing? Is the nav bar the right height? Does that nested paragraph have the right derived font size? Instead and clicking through the application and boring your eyes to death, all that can now actually be verified automatically.

Refactoring and regressions #

Styles get bloated as a project gets larger. And just like any piece of code, cruft and deprecation appear. You have to carefully make sure that any improvement you make doesn’t screw up how your page looks. So by asserting that key page elements have key styles, you can refactor with a safety net. You can spend more time refactoring and less time refreshing the browser.

Cross browser testing #

We don’t live in a perfect world. Inconsistent rendering engines still exist (hat tip to IE). Integration tests give you a peace of mind when you do cross browser testing. CSS tests give you an automated way to ensure that each browser’s computed styles are what you would expect.

As web applications get ever more intricate and complex, I see CSS testing playing a crucial part in a fast-paced, continuous deployment environment. And just like other forms of testing, CSS testing is only as effective as the approach you take (don’t test like the TSA). When done right, it could give you a huge boost in productivity.

Do check out Cactus and Winston’s presentation about it. I personally can’t wait to see how CSS testing evolves.

Catch me on Twitter over here, and continue the discussion on Hacker News.