{"id":2196,"date":"2015-10-16T16:49:40","date_gmt":"2015-10-16T15:49:40","guid":{"rendered":"https:\/\/blogs.kent.ac.uk\/webdev\/?p=2196"},"modified":"2015-12-04T13:44:05","modified_gmt":"2015-12-04T13:44:05","slug":"css-testing-and-pattern-libraries","status":"publish","type":"post","link":"https:\/\/blogs.kent.ac.uk\/webdev\/2015\/10\/16\/css-testing-and-pattern-libraries\/","title":{"rendered":"CSS testing and pattern libraries"},"content":{"rendered":"

The project I’m working on right now<\/a>\u00a0uses a bought-in piece of software with a complex set of patterns and styles. HTML elements can be used in different ways in different contexts, and the resulting css can be complicated and fiddly.<\/p>\n

To add to the complexity, much of the system has already been built (and is live) while the majority has yet to be built and is\u00a0actively evolving.<\/p>\n

If ever there were\u00a0a use-case for automated testing, this would be it.<\/p>\n

And yet as we all know testing web styling has in the past usually involved making changes, checking a few key pages, and then hoping everything will be ok. This works ok in smaller projects, but can be time consuming and error prone in larger projects.<\/p>\n

PhantomCSS<\/h2>\n

I therefore looked at a handy visual regression tool called PhantomCSS<\/a>. It’s actually a CasperJS<\/a> module which uses PhantomJS<\/a> and Resemble.js<\/a>\u00a0to compare baseline screenshots of a webpage with the current screenshots.<\/p>\n

Of course, comparing one complete web page with another complete web page isn’t much use, especially if those pages are dynamic.<\/p>\n

Far better is to compare your website’s building blocks in a pattern library.<\/p>\n

Luckily I already have a living pattern library for this project, which you can find out more about on my blog post about a github-hosted pattern library<\/a>. You might also want to bear Brad Frost’s atomic design principles<\/a> in mind too.<\/p>\n

With a pattern library you can tell PhantomCSS to pick out the HTML examples (for example using an id<\/code> on each example). It will then build screenshots of things like example panels, tables, forms and compare them to your baseline. Any differences will be picked up before you roll to live.<\/p>\n

Setup<\/h2>\n

The great thing about PhantomCSS is that it’s pretty easy to set up. I’m not per se a full-on web developer (although I have some experience in that area) but I managed to get things set up pretty quickly.<\/p>\n

If you’re at all familiar with node<\/a> and npm<\/a>\u00a0then you can set up the required phantomcss, phantomjs, casperjs, and\u00a0resemblejs dependencies in your package.json<\/code> file.<\/p>\n

You will also need the phantomcss.js<\/code> config file. I had to manually copy this into my project, as I couldn’t figure out how else to include it. There might be a better way of doing this, but for now it works.<\/p>\n

Get testing<\/h2>\n

Finally you’ll need to write your test suite file, using standard casperjs syntax.<\/p>\n

For example you’ll end up writing tests like:<\/p>\n

\ncasper.thenClick('a[href=\"patterns.html\"]');\ncasper.then( function () {\n  phantomcss.screenshot( '#example-table', 'tables' );\n  phantomcss.screenshot( '#example-form', 'forms' );\n});\n<\/code>\n<\/pre>\n
where casperjs follows a link, loads a page, looks for certain elements, and takes a screenshot.<\/p>\n
Any good?<\/h2>\n
I’ve so far used PhantomCSS\u00a0in a fairly experimental way. I certainly found it\u00a0to be much much nicer than having to check things manually!<\/p>\n
Setup and configuration was pretty simple even though I’m very far from being a hardcore dev.<\/p>\n
I would say that for this to work you really need a pattern library using the principles of atomic design. That will give you a great base for testing out all the possible design examples.<\/p>\n
In my current\u00a0project things were a bit more complex design-wise. It’s a pain but it’s just how things often are. So it made testing far harder, but still possible in many cases.<\/p>\n
For that reason I’d only advise automated css testing as a kind of fire blanket. It gives you peace of mind, but you will always need to do some manual testing as well.<\/p>\n
Summary<\/h2>\n
PhantomCSS is a great tool for quickly and easily setting up some visual regression testing, preferably on your site’s pattern library (you do<\/em> have a pattern library, don’t you?)<\/p>\n
It won’t cure all your most complex css testing issues, but it will give you an element of peace of mind that if you edit some css it won’t have some catastrophically weird effect somewhere else.<\/p>\n","protected":false},"excerpt":{"rendered":"
PhantomCSS is a great tool for quickly and easily setting up some visual regression testing, preferably on your site’s pattern library (you do have a pattern library, don’t you?)<\/p>\n
It won’t cure all your most complex css testing issues, but it will give you an element of peace of mind that if you edit some css it won’t have some catastrophically weird effect somewhere else.<\/p>\n","protected":false},"author":2,"featured_media":2197,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1464,79395,79421],"tags":[79458,79455,28927,79392],"_links":{"self":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/2196"}],"collection":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/comments?post=2196"}],"version-history":[{"count":3,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/2196\/revisions"}],"predecessor-version":[{"id":2200,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/2196\/revisions\/2200"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media\/2197"}],"wp:attachment":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media?parent=2196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/categories?post=2196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/tags?post=2196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}