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.
Note: 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.
|Use Image Verification when you need to verify an exact and static image, such as a logo, button, or icon. |
|Do not use Image Verification to verify a specific color, an image with text content, or a dynamic slide show. |
- Create a Web Test and click Record.
- Navigate to www.telerik.com.
- Enable hover over highlighting by clicking the icon in the docked toolbar.
- In the recording browser window, hover over the Telerik logo in the upper left.
- Wait for the blue circular nub to appear and click it.
- This opens the Elements Menu.
- Click the Image Verification button. This opens the Image Verification dialog.
- The selected image appears with Help Information at the top.
- By default, Verify Entire Image is checked and the Tolerate Difference is 1%.
Note: 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.
- Uncheck Verify Entire Image to refine the comparison area. Either enter coordinates or drag the desired selection area over the image.
- Click OK and notice the Verify image step added to the test.
- 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.
- The Images tab displays the actual versus expected images.