Visual testing to check the visual appearance the CSS-Code directly in Regression Testing



  • 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.



  • The most efficient tool for testing the appearance of a website is still the human eye and brain.

    That said, if you want or need to automate, image comparison is probably the least effective method because even with fuzzy logic it can generate far too many false positives. All it takes is a change in hardware (a different monitor or video card - this will change such things as color saturation, image brightness and so forth, and that's before you consider changes to screen resolution), and a screenshot image comparison will fail.

    If I had to do this, I'd look at first verifying the site by eye, then building file compare routines for the CSS and HTML on a per-page basis, using a saved baseline. This would avoid issues with different rendering across different browsers (best handled by eye for the initial verification) and cause a lot less work when changes are made (for each image, you'd need to define the regions of interest, how much variance you allowed, and where you allowed it. For a file comparison you really only need a way identify and strip things like timestamps which will always change - it's not affected by a change to the baseline file).

    There are test tools that perform image comparisons: the ones I've tried haven't impressed me. They may meet your needs.



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2