TDD/Testing CSS and HTML? [closed]

Answer 1

I believe Selenium can test your frontends for you. Specifically for browser compatibility testing, take a look at Selenium RC.

Answer 2

If you'd simply like to make sure you're contents are in the right contents etc. etc. you can create a simple testing suite that's going to be making GET requests to your website. When you receive all the content you can run it through a validation template like xslt. Well formed html will usually be able to be matched against xslt's or xsd's. It is not ideal but if you're only worried about the structure of your website and not the styling you'll be able to achieve it this way.

Answer 3

I am assuming that the issue that you're trying to test would be that the CSS changed in some incompatible way with the layout causing, for example, text to be truncated or otherwise visually "broken". If that's the case, then I would say that there isn't a good way to test the aesthetics of a page at this time. One of the primary benefits of TDD and CI is quick feedback so that you know something is broken before it gets to production. Not knowing much context around your environment and how those changes make it into your app it's hard to suggest solutions, but here is an example of a potential non-traditional option:

Put a commit hook into your repository that let's everyone on the team know via an e-mail when someone changes some CSS. Preferably with a diff of the CSS. This would give the team a heads up to keep an eye out for layout problems.

We started an experiment to use WATIR to walk some of the main screens in the app and take a picture using ImageMagik (essentially a screenshot) and store it in a "Last Known Good" folder. Every day re-run the script on a clean install of the app and data and place the images in a "Current" folder. At the end of each run use an MD5 to compare the images and alert on changes. Have the QA team review a list of flagged screenshots and if the change was acceptable (for example, a field was added as part of a feature) then copy "Current" to "Last Known Good". Unfortunately we didn't get our experiment finished so I don't know if it will work well. I'm concerned about the brittleness of screenshots as "assertions".

Hope that helps!

Answer 4

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.

Answer 5

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.