TDD/Testing CSS and HTML?

It's very difficult to automate testing of layout. But it's not too difficult to drastically cut down the time and effort involved so that you can do it manually, but very quickly.

You could try Blink Testing.

I've heard of it used for websites like this.

1. Write a script that walks through your website, visiting as many pages as you can think of.
2. At each page, take a screen shot.
3. Combine all the screen shots into a 'movie' with just a second or two for each screenshot.
4. Now, each day you can 'play' the movie and watch it for any issues.

You could even extend bcarlso's approach but replace the MD5 check with a visual check. Each page gets displayed for 1 second - first the known good, then the new. You could alternate them a few times so any obvious errors will appear as a flicker.

A website with hundreds of pages can be checked like this in a matter of a few minutes. You may not think this will provide enough time to find issues, but it is remarkably efficient in identifying obvious problems with your website.

Any pages that have major layout problems will pop out at you as they don't match the same pattern as all the other pages.

A change to CSS should not affect the behaviour of a page, only it's appearance, so I'm not sure that Selenium would be much help for this.

I'm going to take a guess that you are trying to avoid problems such as elements being misplaced on the page so that they are not readable. If so, you would probably need some kind of OCR-based tool, but I don't know one off-hand to suggest.

However, it may be to better to invest your effort in preventing this kind of problem in the first place. If your layout is easily broken, maybe you need to refactor your CSS to something simpler.