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:
- Article: 4 tools for automatic CSS testing
- Website: csste.st
- Presentation: “automated testing and the tale of orangered.”
Regression Testing Tools and Info
- Automating CSS Regression Testing by Garris Shipon (about BackstopJS)
- PhantomCSS
- SUCCSS: “Easy to install, easy to use CSS regression testing tool.”
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!
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.
Use SaSS then you’ll have CSS testing for free :D
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 ?
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.
The link for “4 tools for automatic CSS testing” article is old. Here is the new one: http://www.creativebloq.com/css3/4-tools-automatic-css-testing-7133777
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.
http://chris.gunawardena.id.au/software-development/automated-regression-testing-of-jira-stories/