Image Based Validation Example

Before you start recording, let’s define the test.  It consists of five steps:

1. Start the demo application.
2. Click the Image-based automation tab.
3. Select Show image to display the cat image.
   
4. Verify that the image is displayed (image-based validation).
5. Exit the Demo Application.

1. Demo App selected as AUT and is launched automatically when you start recording. When the Solution Wizard has finished, click the Recording1 tab in the Ranorex Studio working environment.

1. In Recording1, click RECORD.
   Ranorex Studio minimizes automatically, and the Recorder control center appears.
2. In the AUT, click the Image-based automation tab.
3. Select Show image to display the cat image.
   

The goal is to verify that the cat image appears when Show image is selected. Because this validation checks image content, you’ll use an image-based validation.

Activate image-based validation

1. In the Recorder controls, enable Image-based recording.
   
2. Click Validate. The Recorder pauses recording and switches to image-based validation mode
3. Select the UI element to validate:
   • Mouse over the image of the cat. A purple frame follows your mouse movement.
   • The purple frame indicates which element is currently selected for validation.
   • Once your selection matches the image, click it.
     
4. Click Next to confirm the selected UI element.
   
5. UI element location within GUI: The UI element tree represents the hierarchical GUI structure of the application.
   You can click a different UI element to select it for validation if desired.
6. UI element states and attributes: All the attributes of the selected UI element appear in this area.
7. Screenshot of validation UI element: Use the screenshot to quickly check whether you’ve selected the correct UI element.Define the image that will be used for the validation. For our example, simply leave everything as it is and click OK to confirm.
   
   1. The Image tab is selected in the validation dialog instead of the Attributes tab.
   2. Draw a rectangle to select a part of the image when using the “Contains” validation mode.
   3. Different image validation modes are available:
      None: deactivates image validation.
      Contains: determines whether the validation image is contained in the actual image found during the test.
      Compare: determines whether the validation image and the actual image found during the test are the same.

Once you’ve finished the validation action, Ranorex automatically continues recording. The next step is to end the test recording. In the Recorder control center, click Stop to end the recording.
 

Back in Ranorex Studio, the actions table contains three actions. Action #3 is the validation action.

1. Validation type operator: This operator identifies the type of validation to perform. There are nine different validation type operators.
   
   A detailed description of all validation match operators can be found in Action properties.
2. The validation screenshot is used as the expected image.
3. The repository item linked to the action (the UI element the validation runs against).

Interpreting the validation

In plain language, the validation reads like this:

If Screenshot1 is contained (ContainsImage) in the UI-element referenced by the repository item TheCat, THEN the validation returns the value ‘True‘.