CSS Regression Testing

So. I’d like to tell a story with no ending (yet). I, as part of a small team, are participating in a CSS refactoring project, with the goal of more maintainable CSS, without affecting the visuals of the site. A bold goal, but one that’s (hopefully) achievable.

However, we’ve hit something of a problem, and a part of it stems from the architectural decisions that went in early, (with good intentions), that make it really difficult to test changes.

We have a set of 3 apps/sites that share styles, so we have a shared CSS file that we serve up to each site, and it consumes the same CSS. Great idea in principle, and to some extent in practice. Although it makes visual regression testing, automated or not, tiresome and difficult.

Whenever a CSS change is made, we need to ensure that the visuals of the page haven’t changed. This means we check out the site locally, change the <link> tag to our local CSS, and trawl through each page of each site, making sure we’ve not changed anything.

As you can understand, automating this process would be fantastic, however I feel that having to download and run 3 apps locally is a bit of a large price to pay, and will slow our tests considerably, which will lead to people not running them as often as they should, which makes failures more difficult to remedy, as more changes may have been made than a single commit’s worth.

The crux of this story is a question. Is there a way to take a live website and replace it’s <link rel=“stylesheet”> tag with CSS of your choosing, in an automated way, and could we even inline our stylesheet in place of the default remote stylesheet?

I don’t mind having to create a tool that does this, but it seems like someone may have run into this problem before. It’s also a lot of work, and I’d likely wind up with difficulties around page security because I would be intercepting pages as they are served.

Is there a better way?