Image Verification

You can build image verifications against specific elements for pixel-by-pixel visual verifications in tests. The image verification feature is based on an element’s visual rendering rather than the properties or attributes of that element. An application with rich graphic rendering can leverage this functionality to automate some of its test scenarios that have always needed manual visual inspection to verify. The image verification in Test Studio allows you to refine your verification area down to the pixel level within an element and also assign error tolerance for the matching.

You can also review our Telerik TV episode on Image Verification for a video walk-through of this process.

We recommend using Image Verification as a last resort as it is inherently fragile. Always use the DOM as your primary means of verification, even with images.

Attributes such as src and alt typically result in more reliable verifications. You can create an Advanced Verification based on Attributes in the Sentence Verification Builder.

<img src="boat.gif" alt="Big Boat" />

Green Use Image Verification when you need to verify an exact and static image, such as a logo, button, or icon.

Red Do not use Image Verification to verify a specific color, an image with text content, or a dynamic slide show.

1.  Create a Web Test and click Record.

2.  Navigate to www.telerik.com.

3.  Enable highlighting from the Recorder.

Enable Highlighting

4.  Hover over the Telerik logo and select Build Step...

Build Step

5.  In the Recorder click Verifications > Image :

Image

By default, Verify Entire Image is checked and the Tolerate Difference is 1%.

We recommend keeping the Tolerate Difference between 1 and 5%. A setting of 0 equals an exact match and the verification will fail if it is off by a single pixel.

6.  Uncheck Verify Entire Image to refine the comparison area. Either enter coordinates or drag the desired selection area over the image.

Refine

7.  Click Add Step and notice the Verify image step added to the test.

Step Added

8.  If you receive a failure on an Image Verification, double click the red and white X next to the step. The Failure tab displays the percentage difference versus the allowed tolerance.

Debugger

9.  The Images tab displays the actual versus expected images.

Failure Details