Top

Why to automate CSS testing?

Different types of automated testing

All we know that automated testing is a great technique to keep your software out of bugs. Most of us heard things like unit testing, functional testing, regression testing and other types of it. But how it can be applied to CSS styles of the websites? Usually when we need to test how styles look like we need human to open the pages in different browsers, devices and check if everything is fine. But sometimes it is not easy job to do.

Nature of the CSS styles is that they get applied to all the site at once. Of course some websites are developed in the way that it selectively loads pieces of CSS styles on the page, in this way you could be more sure where styles get applied. But it is rather exception that a rule for web development industry. Usually you are dealing with big styles file (or multiple files) and it takes responsibility for the whole website.

In this case once you are doing changes you potentially can change the look of multiple pages on your site. Even the ones you would never thought about. If you are original developer of the website, you probably know its structure pretty well. You know what basic html elements site consists of and where are the CSS lines that are responsible for styling those elements.

But what if you got your project for support. Even if your company has built the site, but people who built it are in the other team. In this case you are in much worse situation when you need to change CSS styles. Because you do not know what pages are going to change.

Example from our live project

We have News listing page on the site http://www.steptoe-johnson.com/recent-news that looks like
 

News page
News page (click to enlarge)

We have received request from client to change the padding between rows. Because we would like to save some space decision was made to remove padding completely.

From code perspective we open styles and see following rule:

.all-type .all-news .views-row {
   border-top: 1px solid #a8aaad;
   padding: 15px 0;
   padding: 0.9375rem 0;
}

Of course we are under time pressure from the client and we see that it looks like style rule is pretty unique (we have “.all-news” in it). So we just remove these styles of padding, deploy changes and report to client that task is done.

After some time we receive angry call from client that we have broken All Blogs page.
 

Broken Blogs page
Broken Blogs page (click to enlarge)

And… we discovered that styles were reused on other pages we never expected. Unfortunately this is very usual problem for support projects. Also when you start working on project that is in development for a long time.

How could we avoid such situations?

Obvious answer -- test better. But if you have big website, you physically don't have time to check all pages. Also of course you will have limited Quality Assurance

Automated visual CSS testing to resque

The main idea of the testing is to work with screenshots of the pages. So for this particular scenario we could create screenshots of all pages. After making changes to CSS files we could make another set of screenshots and then compare sets. In this way we could see what pages have been changed and what exactly changed. This operation could be done on multiple levels -- when we develop the site, when we run release or regularly on live site if we do releases often.

I hope all above makes sense and gives you more arguments why would you need to use automated testing of your visual appearance on the site. So please give it a try.

Should you have any further questions -- please let us know in comments.