Test manager UI overview

This page provides a general description of the Eyes Test Manager GUI and it's main elements. You will find that many of the pages and editors have a common look and feel, this page summarizes the basic controls and tools that you will find on many of the pages.

The page navigator

This control is used to navigate between the main pages of the test manager, and shows the name of the current page. See The page navigator for more information.

The branch selector

You will find this control on pages that show information that is branch specific. The branch selector is used to select and display the current branch. When you change the current branch, it will apply to all pages that have a branch navigator. See Selecting a branch on a page for more information.

Sort rows by column type

You can sort the rows of the table by any column. When your cursor is positioned over a column title an or icon is displayed. Click on the icon and the column is sorted in ascending or descending order. Click again, and the column is sorted in the opposite direction. The appropriate icon is displayed next to the column header that determines the current sorting order.

Filter control

Many pages that display information allow you to filter the data so that you can focus on the data that meets criteria you specify. On these pages, clicking the  button will allow you to select from multiple criteria, where each criteria may have one or more options. An item will be displayed by the filter if, for every criterion that has one or more option selected, that item matches one of those options.

The set of criteria that you can choose from depends on the page.

Group by control

Pages that display information often provide a "group by" control. This allows you to organize the information hierarchically, based on various criteria. For example, you can show test results grouped by the browser, and within each browser, they can be further grouped by operating system. Clicking the icon opens a dialog with all the criteria defined for that page, after you click a criteria the data will be grouped by that criteria. Clicking on the + again, will allow you to select different criteria and then the data will be displayed hierarchically, the top level will be first criteria you chose, and the next level will be the second criteria you chose. You can have as many layers as there are criteria.

Page refresh

This button appears on various pages where the information displayed may become out of date as test runs in the background, and more information, such as test results, become available. The button is animated when more data is available. When you click on it, the screen will be updated with the latest information available.

Select/Deselect all visible rows

On pages that display rows of data, this button allows you to select or deselect all the visible rows. Click on the checkbox to toggle the current state, click on the triangle menu icon to choose between selecting all of the visible items or none of them.

For example, on many pages this feature can be used together with a Delete selected itemsbutton (see below) to delete the selected rows.

This button is often used together with the filter tool, to select or deselect rows that have some required attributes.
  1. To select rows with required attributes, use the filter to set the appropriate attributes, and then select "All" from the menu.
  2. To select all rows apart from those with the required attributes, first choose "All" from the menu, then apply the appropriate filter, then choose "None" from the menu, and finally turn the filter off.

Usually the items being selected also have a checkbox and you can use that to fine tune which items are selected.

Delete selected items

On many pages you can select items and then click on this button to delete them. Depending on the page you may, or may not get a warning dialog.

The step thumbnail.

You will find this control on several pages and views. In all these pages it shows a small thumbnail of either the baseline image or the captured image and sometimes other information. On same page, other features are also available when you hover over the thumbnail:

  1. A dialog is displayed to the right of the image that provides additional information.
  2. A button bar is available at the bottom that offers various features and a menu button .
  3. You can enlarge the image by clicking on it. This will open a viewer or editor that allows you to zoom in on parts of the images, as well as other page specific functionality.

Step timeline control

This control is available in various editors that give you access to the steps of a test or baseline. Th playback control provides a way to navigate between the steps of a test, and to "play them back" as an animation. See Step navigator control for more details.

Select visible layer control

This control is available in several viewers and editors, and allows you to control what information is overlaid on the baseline or captured image. You can choose to view or not differences, remarks and issues, regions and the viewport borders. See Test editor select visible layer for more information

Editor image zoom level

This control is available in several viewers and editors, and allows you to control the zoom level of the baseline or captured image. See Test editor zoom controls for more details.