How to work with an image file for comparing or indexing

Kevin Carroll

Introduction: This article discusses the topics of image comparison and locating images by image recognition.

Comparing a screen or div to a baseline¹ of itself is pretty straightforward. We use expressions like the following ones to do so.

compare screen to previous version
compare image of "my_div" to previous version with allowance of "5%"
compare screen to previous version with allowance of "5%" treating error as "minor"

Comparing to an image stored in test data can be a bit more complex. The commands are similar, as shown below:

compare screen to stored value "Saved Screenshot" treating error as "minor"
compare image of "logo" to stored value "logoFile" with allowance of "5%"

The key thing to consider when using the latter method is screen resolution. We use pixel-by-pixel comparison. This means that test data images must be as close as possible to the size of the image of comparison.

The next thing to consider is the screen resolution in the test suite settings. For best results, the test data image should be taken or cropped from a full-sized screenshot taken by testRigor. An image taken or cropped from a computer that has a different screen resolution from the one in the test suite settings will not match a reasonably low allowance². An allowance set too low may cause the case to fail due to the AI’s strict detection of discrepancies. An allowance set too high may end up defeating the purpose of a validation.

This is also true for the discrepancy³ between images used in test data and images on the screen. In this case, when the test data image matches the one on the screen, testRigor can identify the location of the click. This is used to interact with images that have no other way to be targeted or referenced (e.g., you need to click on an image inside a canvas or an image inside a larger image).

click on image from stored value "Logo" 
click on image from stored value "Logo" with less than "10" % discrepancy 
click on the 6th element by image from stored value "logo" with less than "10" % discrepancy

The default discrepancy is 20%.

Footnotes:

1. The baseline of an image is the original image that we use to compare the image in a test case to. The baseline can be changed by modifying the steps in a test case.
2. Allowance is the percentage by which an image can differ from the baseline and still be technically considered the same. It’s usually necessary because even a copy of an image has slight differences in quality that our AI can detect. It’s used to compare images.
3. Discrepancy is the term used instead of allowance in commands when image detection is used for clicking on or verifying the presence of an image.