Okay, here's the problem that needs solving:
CSS testing is not difficult, it is simply difficult to get started with. The number of different projects out there that all do the same thing combined with the number of people who've asked about or starred GhostStory on GitHub leads me to believe that people are interested, do a quick search, download, star, take one look at it and stop. If they were using it regularly (or at all), people would find mistakes and missing features.
What is needed is a way to download a single file, project or application that you can point at your web project and start testing. It doesn't really matter whether this is a node module, grunt build task or tracks CI integration, just that it works easily.
The current build of GhostStory is, essentially, a fork of spookyJS. Download the fork, npm install recursive, you get spooky, casperJS, GhostStory itself and PhantomCSS. Run 'make ghost' and it'll generate image diff tests and show you where to modify stuff to make your own tests using Cucumber. Almost what's needed, in fact.
There are two problems here, however. Firstly, spooky is no longer maintained as the majority of what it did has been superseded by the fact that webdriverjs is now integrated into phantom and it can be run from selenium. Essentially, you can use and testing and assertion setup and attach phantomjs at the end as simply as fx, chrome, ie, etc. this also means that spooky doesn't work with phantomjs > 1.7. Secondly, GhostStory can only be run against phantomjs. This is fine for a lot of cases but it is limiting in that if I'm going to the trouble of writing and maintaining CSS tests, I really want them to work in all the target browsers. Moving GhostStory to selenium would alleviate that.
What's the problem, then?
Okay, it now looks obvious that GhostStory should just become a set of steps that test CSS values in various ways and a configuration for setting up cucumber and selenium in nodeJS. That's why I did that last week. However, the first thing I'd want to do is replicate current functionality. I migrated the 'and header should have font size "2em"' steps but then got to the "and the 'header' should look the same as before" image diff steps. PhantomCSS is written, predictably, for phantomjs and makes it really easy to render a screenshot of any element for regression testing. It also handles the first run set up and assertions. If I were to move ghoststory to selenium, I'd need to recreate all that functionality. There are image diff projects (specifically 'js-imagediff' that was ported from node to phantomjs for PhantomCSS) but they lack the assertion framework. Not a huge problem but I'm only really at the 3rd step of migrating and I'm already considering rebuilding another project from scratch. I can imagine needing to do that for the next thing and the next thing…
A UNIX wizard hears cries of torment from his apprentice's computer room where the apprentice is studying, and goes to investigate.
He finds the apprentice in obvious distress, nearly on the verge of tears. "What's the problem?" he asks. "Why did you cry out?"
"It's terrible using this system. I must use four editors each day to get my studies done, because not one of them does everything."
The wizard nods sagely, and asks, "And what would you propose that will solve this obvious dilemma?"
The student thinks carefully for several minutes, and his face then lights up in delight. Excitedly, he says, "Well, it's obvious. I will write the best editor ever. It will do everything that the existing four editors do, but do their jobs better, and faster. And because of my new editor, the world will be a better place."
The wizard quickly raises his hand and smacks the apprentice on the side of his head. The wizard is old and frail, and the apprentice isn't physically hurt, but is shocked by what has happened. He turns his head to face the wizard. "What have I done wrong?" he asks.
"Fool!" says the wizard. "Do you think I want to learn yet another editor?"
Immediately, the apprentice is enlightened.
