# Snapshot comparison
Snapshot comparison allows you to compare screenshots between previous and current versions of your application. It is useful for spotting visual errors that cannot easily be identified through automated tests alone, such as unwanted changes on styling or page element positioning.
# Capturing checkpoint snapshots
You can capture the state of your application at any point by performing an execution using
Capture checkpoint snapshots. Virtuoso will then capture snapshots for each checkpoint encountered while executing your goal.
To capture and compare a new snapshot go to the Project dashboard page, click on the context menu icon
Capture new snapshot (which is a shortcut for clicking on
Execute advanced... and marking the option
Capture checkpoint snapshots), and then click on
Using "Capture checkpoint snapshots" always
Goals have a setting to define when Virtuoso should capture new checkpoint snapshots. You can change it under the Goal settings page to one of the next values:
Never. Setting it to
Always will make Virtuoso capture checkpoint snapshots whenever the goal is executed.
Wait for the execution to finish and then go to the Goal view and click on
Comparison on the right-side panel:
If this is the first time viewing this snapshot comparison the pages will be sorted alphabetically, and it will also start a background task which compares all pages in the comparison, calculating how different each page is from the corresponding page in the previous snapshot. Once this calculation is complete a new sort option becomes available,
Level of change, which places the pages that changed more towards the top of the list.
You can also filter which page comparisons can be seen here using the filter icons in the top menu bar. From left to right, the filters are as follows: Added pages, Removed pages, Changed pages, and pages with no change. By default, pages with no change are hidden.
Lastly on the snapshot comparison page in each row the left screenshot shows the previous version and the right screenshot shows the current version of the application. You can use the checkboxes on the left to select rows and then decide whether the change on your application is an expected (thumbs up icon) or unexpected (thumbs down icon). Comparisons reviewed will be hidden by default, showing only the rows that need to be reviewed, but you can use the toggle
Show reviewed to show all comparisons.
We may need more detail to evaluate whether a page change is correct or not. For this, we can click on any comparison to see a more detailed view.
# Detailed comparison view
The detailed comparison view is available by clicking on any of the page rows of a screenshot comparison, it has multiple modes that can be used to identify changes on a page, allows you to place comments/start conversations with other users with access to the project, and if the comparison was marked as expected or unexpected shows you who marked a comparison and at what time.
# Side by side mode
In the side by side mode you can see a screenshot of the previous application version on the left and the more recent version on the right, and you can also see the elements in the page by clicking on the
All elements option in the bottom bar:
Clicking on the
Changed elements option will only show elements which have changed, and clicking on the currently selected option will remove element highlighting.
# Overlay mode
You can activate this mode by clicking on
Overlay mode and Virtuoso will will place the current application version screenshot on top of the previous screenshot. This mode enables the use of certain effects to detect changes (e.g., swipe, fade and comparison).
The screenshot of the previous application version stops at the slider labeled "Swipe" on the screen and is displayed on the left side of the slider. The differences between the new application screenshot and the previous one can be compared by moving the slider left and right to see where parts of the screenshot are added/removed.
The screenshot of the new application version is placed over the top of the previous application version, and by default with 50% transparency. You can use the transparency slider in the bottom menu to blend between the new and old application version to see where parts of the screen change.
With this option Virtuoso computes the difference between the old and new version of the application screenshot, and shows it in the form of an image.
Grey parts of the image are unchanged and non-gray parts are different between the old and new screenshots. In the example above, you can see that the
Add to bag button is shown in the difference, and this is the part of the screenshot which has changed.
This is similar to the comparison mode, but differences will be highlighted in a red to black colour scale, depending on the difference amount and with red being the greatest difference. In the example above, you can see that the "Add to bag" button is red, showing a large difference here between to previous and current application screenshots.
# Discussing comparisons collaboratively
You may want to log your findings, or start conversations for clarification about certain differences. For this, you can add reviews to screenshots in the detailed comparison view:
Other team members can reply to these reviews, and add their own reviews. Once you have decided whether a change is expected, you can mark the review as expected or unexpected using the thumbs up and thumbs down icon in the top right of this page.
If you want to review all pages that have changed, you can use the page switcher in the top menu bar underneath the title
Snapshot Comparison to navigate to the previous/next comparison. This allows for quicker reviewing of changes as it changes the page but remains in the detailed view.