Today I re-learned the same thing I learn every time I do anything significant with UI design. I learned that you can not write a test that asserts that the page looks right. The application can be correct, as far as functionality goes, but it can look weird. Spacing can be off, colors can be off and a ton of other things can not “work correctly” based on how the application looks.
I know there are a few tools out there that use screen shots and diffing which would be good for regression testing, but does nothing for testing that the design “looks right” initially. Maybe someday there will be some advanced AI tools that can tell you if your design is good or not.
Anyway, the situation that led me down this train of thought was an issue with a mobile web based fly out menu. I had two different applications using essentially all the same code and the fly out menu was, for some reason, starting part way down the page instead of sliding out at the top of the page like it should have for one of the applications and not the other. It was a nightmarish mess of
css to trudge through to try to find why the fly out menu was behaving slightly differently in one situation and not the other.
It turned out that twitter bootstrap was doing something with the style of an
h4 on one application that was throwing things off. Wrapping the
h4 in a bootstrap
container was the solution. The way that I arrived at the solution was to remove all of the differences between the two applications and gradually add things back until the difference showed up. Luckily, in this situation, this was a very good approach.