Speaking of testing visuals, there's an interesting project called Sikuli[0] that seems to do exactly the thing.<p>Core idea looks like easy inexact image matching + Python scripting environment. This approach seems to eliminate the need to test CSS, accounting for all kinds of cross-browser issues. It's like the most high-level integration test possible, which looks kind of appealing. I haven't had a chance to try Sikuli myself yet though. Probably there are other similar tools.<p>[0] <a href="http://sikuli.org/" rel="nofollow">http://sikuli.org/</a>, was featured on HN a couple of times as well.
A test looks like this:<p><pre><code> Cactus.expect("p", "font-size").toEqual("12px");
</code></pre>
That doesn't make any sense. It's exactly the same as<p><pre><code> p { font-size: 12px; }
</code></pre>
just in a more verbose language. CSS has no logic, just rules. Rules are already "tests" for themselves.<p>Visual matching is whole other story that might be useful. Set some tolerance for deviations that trigger alarms on deploy - that could be a lifesaver for IE and mobile support.
I think this could definitely help with some of the bulk testing which would be fantastic. It seems like it might be difficult to test really complex CSS (which is the stuff that probably needs the most testing) like drop-down menus, interactive hover effects, etc.<p>I've definitely had those times where we've tweaked a stylesheet only to find out later that some page deep in the site now caused a floated div to move to the next line and mess up the layout. It would be so great to have unit testing to keep an eye on these kinds of things.
The single most annoying aspect in CSS (IMO) is class and id names, or better: keeping them predictable (we already used that one) and concise (that one should be named <i>that</i>).<p>I'd like to know if there's a simple "namespace convention" that works. As features get added, I always end up making up class/id names or waste time hunting them down. Especially dynamically generated stuff.