Visual Verification: Full Page Verification

Full Page Visual Verification Overview

Visual Page Check is an action type used to visually verify a full page of a website. This action type is abbreviated as VisPageChk. This verification type utilizes Machine Learning (ML) for intelligent matching of the current screenshot against the baselined screenshot for the site. The baseline will be automatically set during the first successful test run, or you can manually set or update the baseline image when needed.

Note: Currently, this is only supported in desktop web browsers.

Here are two types of full page visual verifications:

  • Baseline Verifications: In every execution, we compare against the baseline, which is set per browser during the first successful execution of the test on that browser and the baselines may be updated after any execution to match the current screenshot
  • Previous Step Verification: This should be used to visually verify a screenshot against a previous step's visual verification of the same screenshot

Adding a Visual Page Check Action

  1. Select the  in Architect to open the Architect Advanced Actions sidebar panel
  2. Select the Visual Page Chk action


  3. Verify or set the Visual Match Requirement % - the default value can be updated at the project level


  4. Click the Add button in the Architect Advanced Actions sidebar panel
  5. The resulting VisPageChk Action should appear in the Architect Action list

Viewing Full Page Visual Check Results

  1. Once the test has been executed, view the full page visual check results in the Slider View page
  2. Similar to the Prev (previous), Cur (current), and Arc (architect) screenshots, there is an additional section for Visual Page Check Actions that displays the Cur (current) and Base (baseline) images side-by-side


  3. When viewing Visual Page Check Actions, there is a control widget, and when in side-by-side comparison, a yellow draggable bar


  4. In the CV Controls modal, the following options are available:


    • Select Show Ignore Regions checkbox to display regions of the full page to ignore
    • Select to view Modified areas within the screenshot that are different from the baseline
    • These overlays may appear on any set of images but will always reflect the current versus baseline changes
    • In the Settings area, you can make changes to the full page visual verification settings, Edit Match %, Update Curr to Base, Ignore Elements and Compare Regions - similar to other settings changes, these adjustments will be reflected across the entire test, and any enabled browser will adopt these settings for the next execution
    • Click on Compare Regions Popup window will open and select the Region and Save

  5. Click the gearicon on Vispagechk Action 
  6. The Settings pop-up window will display, click on Advanced tab.

  7. Select the Check box Basic Pixel comparison and click on save

Setting the Default Match Requirement %

The Full page visual check default value may be set at the project level.

  1. On any project page, select the icon to view project level settings
  2. Navigate to Project Settings >> Advanced tab >> Full page visual check default value % in order to update the default value

Insert Full Page Check action

Full Page Visual Check Actions can be inserted via the Test Detail page and Slider View.

Test detail page:

  1. Open your Test
  2. Hover where you would like to insert the action


  3. Open the Insert menu and select Full Page Check Action


  4. Enter a value in the Visual Match Requirement (%) and select Visual Check Type (Baseline Comparison or Previous Action)


  5. Click Insert

Slider Page:

  1. Open your Test
  2. Open Slider View via the View Results button or the View button next to any action


  3. Hover where you would like to insert the action


  4. Open the Insert menu and select Full Page Check Action


  5. Enter a value in the Visual Match Requirement (%) and select Visual Check Type (Baseline Comparison or Previous Action)


  6. Click Insert


Limitations

Full page visual verification screenshots always start at the currently scrolled position. To ensure it starts at the top of a particular page, follow these steps:

  1. Set the scroll location using the ADV Actions Architect button
  2. Select Scroll Action


  3. Then scroll to the desired location on the website for setting the top of the screenshot, click the Close button on the Architect sidebar panel

Note: The full page visual verification may not always capture the entire screenshot. Certain sites behave differently or are particularly large, causing us to capture only partial screenshots.