Visual Verification: Element Verifications

Visual Verification: Element Verifications Overview

Element-based verifications are a feature of any Verify Action. The element could be an image, but also a div, span, or any kind of element that you would normally baseline. The area highlighted in green for the selected element will be used as an image for comparison.

There are two types of element verifications:

• Baseline Verifications: On every execution, we compare against the baseline, which is set by separately by browser during the first successful execution of the test and the baselines may be updated after any execution to the current execution's element
• Previous Step Verification: This should be used when wanting to verify an element against a previous step's verification
  For example: If you would like to ensure a company logo that always appears on the first test step at later steps throughout your test flow, you should use the Previous Step Verification option.

Creating a Baseline Element Verification

This verification must be created using Architect. It may be created on an image element, or a div, or any other kind of element. The entire element must fit into the viewport, the visible screen, in order to properly perform a visual validation.

1. Launch Architect to create the test case
2. Select to perform a visual verification, this works identically to a regular checkpoint verification using the
   
   
   
3. Once the icon is selected, choose the element from the webpage that you wish to verify
   
   
   
4. Once the element has been selected, you will be brought to the Visual Check modal to verify that your element appears as expected - this is where you set the Visual Check Type to Baseline Comparison, by default and set the default Visual Match Requirement %, the default can be updated under the Advanced TAB in Project Settings
   
   
   
5. Click Save on the Visual Check modal
6. The new Verify Action with will appear in the action list of the Architect
   
   
   
7. Alternatively, if you wish to add the visual verification to an existing verify, click the white dot to the left of any Verify Action, then select Visual Check button in the left side panel to access the same feature
   
   
   
8. If navigating via the white dot or another method, remember to click Save on the left side panel to add the Visual Check to the test
   
   

Creating a Step Comparison Element Verification

1. Follow the same steps as Creating a Baseline Verification until the Visual Check modal appears
2. Set the Visual Check Type to Step Comparison
   
   
   
3. Select the Step # for the previous step to which you'd like to compare the current image to, only previous verifications will appear in the dropdown when selecting the step
4. Update or keep the default Visual Match Requirement %
5. Click Save button in the modal
6. If navigating via the white dot, or another method, remember to then click Save in the left side panel to add the Visual Check to the test
   
   
   

Viewing Visual Comparison Results

1. Go to the Architected test case where the visual verification was created
2. Notice the Visual Check on the steps and element verification
   
   
   
3. Hovering over the Visual Check tag will show you the Current run's element on the right, and the Baseline image on the left, the Actual and Expected Matches are the values used during the execution being viewed, Match Requirement is the value used across all browsers of the test, and Baseline is the baseline image set for the particular browser for which you are reviewing results
   
   
   
4. Clicking on Edit Match Requirement allows you to quickly update the setting used on future executions of any browser
   
   
   
5. Each browser renders web pages slightly differently, so they must have their own baseline image, clicking the View chrome baseline will allow you to view what the Chrome baseline is currently set to
   
   
   
6. Clicking Update Baseline allows you to update the baseline image for the given Browser
   
   

Viewing Baseline

1. If you would like to view the baseline images across all browsers, view the Actions Log
   
   
   
2. Element Baselines will have a Baseline tag
   
   
   
3. Hovering over the Baseline tag will show you the current settings used for the test and the Baseline tag is clickable and will show you the full image used for that Browser baseline
   
   
   

Setting the Default Match Requirement %

1. The default value may be set at the project level
2. On the Test Listing page, click the Project Actions icon, on the top right side, to view Project Settings information
3. Navigate to Project setting > Advanced Tab > Element Match Requirement Default % in order to update the default value for Tests under this Project