Overview

When it comes to image elements testing, using the functional testing paradigm, is not enough to verify if the image appears and shows content as expected. Therefore, QA automation testers leave such elements for manual testing only. After some time, the manual image check can become a burden for testers, as this is highly repetitive work. The chance for bug leakage is higher, as testers tend to check such features less often and with less detailed test cases. Hence, it is very important to try to include visual tests into daily automation regressions, as much as possible.

The easiest way to include image validation into testing practices is by using image comparison tools. It is pretty straight-forward to verify static image content because the output should always be the same. The basic idea is to have a default image (mockup) which will be used for comparison with images present in the application, while tests are executed.

However, usage of image comparison tools is not the best solution, as it requires further manual work. So, the best way to avoid any manual testing, and human-induced errors, is to automate image comparison using libraries for image processing. As our testing framework uses Ruby, Rspec, and Watir, we found Chunky PNG gem, as the most appropriate for this very purpose.

Chunky PNG is a Ruby library that provides a wide spectrum of image related functionalities. One of them is image comparison with the ability to save actual state and pinpoint image differences.

Chunky PNG divides the current image (image taken while regression tests are running) and mockup (image reference) into a pixel matrix, which are then compared by color. Such pixel representation can be manipulated, by using read/write access to the image’s pixels and metadata.

Most importantly, the used library has no dependencies on external image libraries. Based on this, it is easier to integrate its functionalities inside the test automation solution.

How to use chunky PNG gem for comparing two images?

Sample scenario

The challenge is to compare two images that are locally saved.

In this example the first_image.png is the mockup one and the second_image.png is the one which will be compared with the mockup.