How do I unit test a website?
I’ve been spending a lot of time recently attempting to puzzle out a good way of testing the work I’m been doing. I’m enamoured with the idea of unit tests, and I have the feeling that I could save myself a bit of misery if I had a mechanism to build tests for each bug I close. It’s a great dream, but I’m not coming up with much in the way of a solid solution for my work.
Sketching out the broad outlines of what I want is pretty simple. There are two broad categories of things I want to test:
Core functionality: If I click on an article from some listing page, I should end up at the same article’s page. I shouldn’t ever see 404’s. PHP errors and warnings shouldn’t exist on the site.
Presentation tests: Each module in the sidebar should be X pixels wide in all the A-Grade browsers. Text shouldn’t be cut off because of overflow issues. Thing X should be Y pixels away from thing Z.
Core functionality is easy, rather, I can come up with good ways of writing those tests. A spider is just a quick Perl script away, and the tests I want to do are almost completely doable with regular expressions. If a link’s text matches the headline of the page to which it leads, wonderful! If not, error! With a few hardcoded exceptions to handle “More” links and the like, I’ve got a solid testing system. Presentation, on the other hand, is hard.
It’s hard not because it’s terribly complex, it’s hard because it’s
tremendously difficult for a computer to determine if a page looks right.
The only test mechanism I’ve come up with is a convoluted system of JavaScript
checks: grab an element’s computedStyle and run a series of checks. That
covers a good chunk of presentational issues, but it’s incredibly
timeconsuming to build out a testing system that way. Moreover, it only
catches the subset of errors that are directly tied to the box model. I don’t
really know how to generically test to see if a particular link is floated
next to an image, or gets pushed under it, for example. Sure, I can check X
and Y offsets and compare those to the image’s width and height, but those
sorts of interdependencies get very complex, very quickly.
So I’m still looking. Selenium looks like something I should play with,
even if the notion of writing tests using HTML table elements is somewhat
disheartening. JSUnit is likewise a potential source of testing goodness.
Any other good sources I should be taking a look at?
Comments
I’m not sure presentation tests can be tested mechanically. Beyond basic things like spacing between blocks, it is surely a matter of judgement whether something is presented properly. The nature of the web is that you aren’t going to get pixel-perfect rendering of everything between browsers and pages, especially with lots of different content.
Furthermore, do you necessarily trust the browser to report accurately what it has rendered and where if it has not rendered it according to the standards and styles you have specified?
Posted By: Bruce Boughton 18. May 2007, 13:53