Visual Verification: Element Verifications

Element based verifications are a feature on 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 that is 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 for Chrome via Architect during creation, or during the first successful execution of the test. The baselines may be updated after any execution to the current run'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 compare a company logo always appears just like the first step's logo, you might use the Previous Step Verification method.

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 mceclip0.png to perform a visual verification. This works identically to a regular checkpoint verification using the mceclip1.png. Once the eye-flag icon is selected, select the element from the webpage that you wish to verify.mceclip3.png
  3. Once the element has been selected, you will be brought to the Visual Check popup to verify that your element appears as expected. From here, you are set to a Baseline Comparison by default along with the default Visual Match Requirement %. The default may be updated per project in the advanced project settings.mceclip4.png
  4. Select Save.
  5. The new verification with mceclip6.png will appear in the action list.  
  6. Alternatively, if you wish to add the visual verification to an existing verify, click the white mceclip7.png to the left of the Verify Action, then select Visual Check to access the same feature.  mceclip8.png
  7. If navigating via the white dot, or another method, remember to then click Save to add the visual check to the test case.

Creating a Step Comparison Element Verification

  1. Follow the same steps as Creating a Baseline Verification until the Visual Check popup appears. 
  2. Set the Visual check type to Step Comparison
  3. Select 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 Match Requirement %.
  5. Click Save.
  6. If navigating via the white dot, or another method, remember to then click Save to add the visual check to the test case.

Viewing Comparison Results

  1. Go to the Architected test case where the verification was created. Click Actions >> Details.
  2. Notice the VIS on the steps an element verification.mceclip4.png
  3. Hovering over the VIS tag will show you the current run's element on the right, and the baselined image on the left. The actual and expected matches are the values used during the execution being viewed. Everything below the line are current settings for the test. Match Requirement is the value used across all browsers of the test, and Baseline is the baseline image set for this particular browser.mceclip0.png
  4. Clicking on Edit Match Requirement allows you to quickly update the setting used on future executions of any browser
  5. Clicking Update Baseline allows you to update the baseline image for the given browser. Each browser renders webpages slightly differently so they east must have their own baseline image. Clicking the mceclip3.png icon will allow you to view what the baseline is currently set to.mceclip2.png

Viewing Baselines

If you would like to view the baseline images across all browsers, view the Action Log.

Both Full Page Verifications and Element Baselines will have a mceclip6.png tag.

Hovering over the tag will show you the current settings used for the test. The mceclip3.png tag is clickable and will show you the full image used during the baseline.


Setting the Default Match Requirement %

The default value may be set at the project level. On any project page, select the mceclip5.pngicon to view Project Level information. 

Navigate to Advanced Settings >> Settings >> Element Match Requirement Default % in order to update the default value.