Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TDD/Testing CSS and HTML? [closed]

IS there a way to test CSS and HTML? For instance: sometimes some of the notices get affected by some CSS changes. I don't want to be testing all the notices by hand every time I do a change.

Thanks

like image 984
donald Avatar asked Apr 17 '11 21:04

donald


3 Answers

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!

like image 27
bcarlso Avatar answered Nov 18 '22 19:11

bcarlso


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.

like image 133
Mark Irvine Avatar answered Nov 18 '22 19:11

Mark Irvine


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

like image 1
BoltClock Avatar answered Nov 18 '22 20:11

BoltClock