Introduction

The ZUL Testing Language(ZTL) has been available for one year and during this time we have looked into improving the verification of layout placement, which is hard to do using normal unit testing techniques. This led to the idea of a visual comparison to locate any discrepancies. The capture image API in Selenium-RC provided does not satisfy our requirements and it is not ready for all the modern browsers. However, we found a way to solve the capture image issue, and found a method will allows comparison between images from the same browser. Please take a look at the demo below.

Demo

Unable to display content. Adobe Flash is required.

As you can see, we encapsulate the image comparison algorithm into a Java API called verifyImage(), which compares the current image with the other, and if an area is different, the test case will throw a JUnit AssertionError exception, identify the area which failed and store the result for debugging purposes.

Summary

We are going to add this feature to our current ZTL’s test cases. So far we have created hundreds of test cases and run them on a daily basis when someone changes ZK’s source code in SVN.

Resource

For more details, please take a look at the tutorial for our Vision Test system.
The image comparison implementation is based on Pat Cullen’s code located here. A big thanks to him for letting us use it.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

5 Responses to “Vision Test for ZTL”

  1. Luca Visconti says:

    Have you tried Sikuli Project (http://sikuli.org/) ?
    I’ve used for some testing and seems to be very good.

  2. Jumper Chen says:

    Yes, I knew that, but I think we are not the same concept.

  3. Tom Yeh says:

    The image comparator is configurable. You could plug in a different implementation if you’d like.

  4. […] Vision Test for ZTL shows how they do image comparison. […]

  5. Ryan Wu says:

    Really powerful !

Leave a Reply