4 tools for automatic CSS testing

This article first appeared in issue 240 of .net magazine – the world's best-selling magazine for web designers and developers.

When you’ve got a small, static, single-page website, you’d think that you would spot anything wrong with the layout or the design fairly easily. Maybe a two-page microsite would still be OK. Add in a couple of hover states and that’s probably fine, too. Keep adding things, keep building and, before you know it, you’ve got a multi-page site with a shiny responsive design, subtle hover states and a great vertical rhythm. It’s perfect. Still sure you can’t spot anything wrong? On any page?

As the websites we develop get larger and more complex, we need to rely more and more on testing. Automated testing is exactly what you’d guess from the name. Rather than the developer or QA checking a list of pre-defined actions on the website to make sure everything works as expected, you have an automated system run the tests instead.

All aspects of web development can benefit from automated testing and the sheer number of testing frameworks available for JavaScript alone is enough to show how important it is. Unfortunately, unlike JavaScript, the number of CSS testing tools is limited. The reason is that, fundamentally, CSS is hard to test because it isn’t instruction-driven like JavaScript or PHP. Don’t despair, I didn’t say it was impossible. Below, I’ll run through a few areas that can be tested, mention some tools to use and give a few examples of them in action.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of eight full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Ecommerce Editor Beren Neale, Senior News Editor Daniel Piper, Editor, Digital Art and 3D Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Beth Nicholls and Staff Writer Natalie Fear, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.