The Compare baselines editor

You can use the compare baselines editor to view the differences between two variations of a baseline. This editor is used in two ways:

When opened from the baseline history page, using the compare with .... options, you can see the images and annotations of the two revisions. You can not make any changes to the revisions.
When opened from the compare and merge page, you can view the difference between a baseline in a source and target branch. In this case, you can also add, change and delete annotations and you can copy annotation from the target baseline to the source baseline.

This page described the functionality available to you from the context of the compare and merge page. The baselines revision comparison UI works similarly although it can only be used to compare baselines and not to make changes. See The Compare baselines viewer for details.

You navigate to this page from the compare & merge page by clicking on any row in the list of differences between the two branches. See Checking changes and resolving conflicts.

Using the tools in the editor, you can:

Control what information is displayed on the page.
Find the baseline steps that are different in the source and target or are only in the source.
Find the pixels and annotations that are different in a given step.
Copy annotations from the target to the source.
Add, change or delete annotations.
Restore annotations to their previous values.
Save the changes you have made.

Layout

The screenshot below shows the compare baseline editor after it has been opened from the Compare and merge page.

Displayed in the center of the browser window are two images, which represent corresponding steps from the two baselines being compared (referred to as the source and target baselines). These show the captured images, overlaid with annotations made by your team. In some cases only one of these images will be displayed (see below).

There are controls that allow you to refine what you see:

Use the select image down arrow menu to select if you see only the target image, only the source image, or if you see both images side by side.
You can toggle between seeing only the source or only the target by clicking on the middle of the button instead of opening the menu with the down arrow. Doing this quickly can sometimes make the differences between them standout.
You can select what information is overlaid on the step image using the select visible layer control . You can choose from the following options:

Diffs

If you select this option, then pixels with significant differences between the source and target are colored pink.

Remarks & Issues

Select this option to display remarks and issues added by your team.

Regions

Select this option to display match level regions added by your team.

Viewport

Select this option to add a boundary box that represents the viewport size relative to the image size (relevant when the image is large than the viewport size).
You can use the zoom buttons to adjust the size of the images, i.e. to see the entire image or to zoom in on some detail. This is useful for example if the image is a large scrolled window. See Test editor zoom controls for more details.

Information

The editor displays textual information about the baselines in three places:

In the summary panel:

The information shown is:
- The name of the test (Helo World test)
- Merge target and source branches (v1.0 <- default)
- The application name (Helo World App)
- The execution environment An execution environment is defined as a triplet of <OS, browser, viewport size>. When a test runs, its execution environment is defined by the platform on which the test runs, or, if run on the Ultrafast Grid, by the configuration of the Ultrafast Grid. A baseline is also associated with an execution environment. By default, the baseline chosen for a test is the baseline that has the same application name, test name, and execution environment as the test. Note that if the initial page in a test is not a secure web page, the execution environment may report the wrong OS or browser version..
To the left of the target image the page displays:

The information shown is:
The same type of information is displayed to the left of the source.
If you click on the information button then a dialog will open with the following information:
- The application and test names
- The execution environment
- Details of the source and target baselines (ID, Revision number, Saved, Saved by, Branch)

Finding differences

The editor provides various ways to identify the differences between the two baselines easily and efficiently:

Use the step navigator to view the steps one by one in either direction. You can also step only through the steps that don't match, and you can move to any arbitrary step.
Steps that are different have a mismatch icon near the top left corner of the image. Steps that are the same have a match icon.
Pixels and annotations that are different in the target and source are colored in pink.
You can use the highlighting control to quickly find where the differences are in the images and annotations.

These are explained in further detail below.

Step navigator

Use the step navigator to select which step in the baseline you want to see, or to playback an animation that runs through all the steps.

The steps that have differences will be colored orange, those that are the same are colored green. You can use the Prev diff and Next diff buttons to navigate only between the steps that have differences, skipping the steps that match. These buttons will be gray if there are no more differences in that direction. See Step navigator control for more details about this tool.

Diff navigator

Click to highlight differences in the images. Circles will flash wherever differences are found. If a difference is outside the current field of view, a circle flashes, and a blurred pink strip appears on the edge of the view to indicate the direction you need to scroll to see the difference.

Click or press the . key to move to the next difference. Click or press the , key to view the previous difference. After you view the last difference, the zoom level returns to its previous setting.

Annotations

A step in the two baselines being compared can be different in two ways:

Differences in the captured image. The pixels that are different are highlighted in pink.
Differences in user annotations. Remarks, comments, and match level regions which are different in the two baselines, or only appear in one baseline are colored in a dark pink - see the table below for examples:

Annotation	Same in both baselines	Different or only in one baseline
Remark
Issues
Ignore region
Floating region
Layout region
Strict region

Changing the source annotations

You can add annotations to the baseline in the source branch using the annotations buttons in the same way that you do so in the test results editor
You can delete an annotation by clicking on it and then clicking the icon.
Clicking on the button will offer you the following options :

Add annotations to source

Adds all the annotations in the current target step to the source step, keeping any existing annotations in the source.

Replace source annotations with targets

Adds all of the target annotations in the current target step to the source step, deleting any existing annotations in the source step.

Restore source annotations

If you previously changed or delete the source annotations, then this option will restore them to the state they were when last saved.

Change match level

You can see if a change in the match level would change the outcome of any differences detected in the image using the Match button which is found to the left of the zoom buttons. This button initially shows the match level that was used during the test. Clicking on the button and selecting a different match level will reprocess the images with the selected level and update the display. Note that this has no impact on the match level used for test runs - these depend on the match level set in the SDK and via the match level annotations.

Wrapping up

If you have made any changes, you must click the save button to persist the changes and to apply them to the source baseline. When you press on the save button the display will revert to the Compare and merge branches page. The status on the row you saved will now be Resolved.

To exit the baseline compare editor and go back to the page from which you opened the editor, discarding any changes, press the browser back button or the Eyes Test Manager return button:

Exiting this way, and not via the save button, means that any changes that you have made in the baseline compare editor will be lost.