There are two ways to do Visual Verifications, using Computer Vision:
We take a machine learning approach to compare images, meaning it is faster, and takes into consideration trivial changes that can occur within the browser. Imagine the browser rendering an image off by a few pixels each execution! Our baselines occur per browser to make sure that browser-specific false negatives don't occur.
Both of these visual verifications work similarly:
- Your project has a default Match Requirement Default % set to 92% for both types of verification. We leave this tolerance in for common variations, but of course you can modify this value higher or lower. The default value will be passed into Architect and can be overwritten on an action by action basis when creating the test, or from the UI once the test as been executed.
- Both verifications work with Baselining. Baselines for the image are set upon the first successful run, per browser, however Element baselines have chrome's default set when creating a test with Architect.
Visual Verification: Full Page Verification
A full page visual verification, called a Visual Page Check allows you to verify that an entire screenshot, even when not in the current viewport, always looks like your baseline.
Visual Verification: Element Based Verification
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.