For testing the visual appearance of a website the use of tools like selenium (functional surface test) is not sufficient because it doesn´t check the visual appearance and/or the CSS-Code directly. Different approaches are possible
- Defining style guides
- Syntax checking of CSS and HTML
- DOM comparison
- Screenshot comparison
How do you check the visual appearance of websites from a web-application?
I implemented a screenshot comparison tool in Java. Screenshots are generated by a framework based on selenium. I started with pixel by pixel comparison. Actually I split the screenshot into different parts (maybe 10x10 rectangles) and compare the histograms of corresponding parts. For the future I want to determine relevant parts (regions of interest) automatically. Maybe someone has ideas how to do that.