CSS is what makes a website pretty. However, it does so only when well written and properly designed. Tests are necessary to make sure everything is working well and users see what they are supposed to rather than text crawling outside its frames and many more awful pieces of a little personal hell for perfectionists.
And, despite all the benefits you may gain from manual testing this path is still not the best option sometimes. Automated testing will be required and you surely want to know how things are done before bursting into that world with a blazing sword and desire for perfection.
Why automate CSS tests?
Manual testing has many advantages and certainly deserves a place somewhere in the project. More to that point: it should be done! However repeated manual testing may be a simple waste of time, effort and resources especially if we are talking about responsive pages and the necessity to test every single layout.
There are several other solid points. When was the last time you have seen the CSS code on a large project? It’s more than huge, the thing is enormous and looks ready to blow because of any careless twig here or there. If you rely on manual means only you will have to go through all nine circles of hell while Refactoring. However, automation will make this process almost painless.
There is also Regression that may be hard to be identified precisely due to various factors like defects popping out in areas that are not situated anywhere around active development or even design apathy. If your CSS testing session is automated you will find less trouble on your way to new discoveries in Regression.
However not all automation is valid. Take the XPath for example or any CSS selector. Making sure that any .green-button is existing does not equal making sure it is a button and that it’s actually green.
There is more than one way to skin a cat!
Basically, there are two nice ways of automating CSS tests:
- Screenshot comparison
- Usage of window.getComputedStyle() for assertion of some computed styles with JS
Surely both these ways have series of strong sides as well as downfalls. My personal favorite is the first one, although I’m pretty eager to read all ideas you may have in the comment section. But before that, I would have no notice why I enjoy screenshot comparison more. This way you are testing the exact pieces of the website your users will be seeing.