Visual checks

Check that an element is there, gone, or there a given number of times.

How a visual check works

A visual check holds a small picture of an element, its visual target: a button, an icon, a field, a logo.While the test runs, the GTS Engine + AI finds that element on the live screen, first by asking the application where it is, through its accessibility information, then by sight when the application does not say, and compares it with the picture.

Your appSearch areaSave

1. Find

2. Compare

Expected

Save

what you recorded

Found now

Save

on the live screen

Same element, same look: passed

Every visual check works in two steps.While the test runs, the GTS Engine finds the element, wherever it stands in its search area, through the app's accessibility information or by sight.Then it compares what it found with the picture you recorded: harmless noise is ignored, and real regressions are caught.

The comparison is smart: it does not fail a test because a screen renders a shade lighter or an edge a little softer than last time.It does fail when a person would see a difference.

Sign inSign inA slightly softer edge, a shade lighterPasses
Sign inSign InA letter changed caseFails
Total: 42Total: 43One digit changedFails
The GTS Engine ignores the tiny differences every screen has from one run to the next, and catches the changes a person would call a bug.

Visual Assert

Checks that an element is on screen and looks right.It is the check a recording creates before each click, and the most common check of all.

ExampleBefore clicking Save

A Visual Assert on the Save button, just before the click: the run waits until the button shows up, makes sure it is the right button, and only then clicks it.If the button never appears, or looks different, the test stops there and the report shows why.

Show it what to look for

  1. 1

    Select the check and click Edit Visual Target

    The Visual Target Editor opens on the frame of the recording at that moment.To cut the visual target from another moment, click Use Another Frame....Its line turns amber while the frame shown is not the check's own.

  2. 2

    Draw a rectangle around the element

    Drag a rectangle around the element you want to check, a little beyond its edges.Move it by its middle, resize it by its handles, or nudge it with the arrow keys.You can also drag a picture in from Content Files, or capture one from your screen.

  3. 3

    Check the search area

    The dashed rectangle is the search area: where the run looks for the element.It follows the visual target when you move it; click its padlock to keep it where it is.See below.

  4. 4

    Apply

    The Properties panel now shows the visual target.

The search area

RecordingSearch areaSaveThe next runSaveMoved a little: still found
The search area is where the test looks for the element.If the element moves a little, it is still found, as long as it stays inside the area.Make the area larger for an element that moves around, or tick Search Entire Screen when it can be anywhere.

Visual Absent Assert

Waits until an element is gone: a spinner, a "please wait" banner, a dialog that must close.It passes once the element has stayed away for a moment, and fails if it is still on screen when its time runs out.

ExampleWait for the spinner, not for a guess

After clicking Generate Report, a spinner turns for 2 to 20 seconds.A Visual Absent Assert on the spinner with a 30-second timeout lets the test go on the moment the report is ready: no fixed wait, no wasted time.

Visual Count Assert

Counts how many times an element is on screen and holds the total to a rule.

Invoice 2041Paid1
Invoice 2042Paid2
Invoice 2043Paid3

3 found

Rule: exactly 3 · holds

A count check finds every place an element appears, numbers them, and holds the total to your rule: exactly, at least, at most or between two numbers.
RuleExample
ExactlyExactly 5 stars in a rating
At leastAt least 1 search result
At mostAt most 0 error icons
BetweenBetween 2 and 4 items in a basket

In the editor, every place the element is found is numbered on the frame, and a line under it says whether the rule holds on that frame: you know before you run.

How strict the comparison is

Each visual check has a Verification Strictness.Standard is right for almost everything.

StrictnessUse it for
ExactPictures that must not change by a single pixel.
StrictSmall text and fine details where any change matters.
StandardEveryday buttons, labels and icons.The default.
RelaxedLarge areas and busy screens, such as a whole page or a game scene.

Ignore Color checks the shape alone, whatever the colours: useful when a theme changes colours you do not want to test.

Clicks follow the element

When a Visual Assert finds its element somewhere else than in the recording, the clicks that come after it are aimed at where the element is now, not where it was.A small layout change does not send a click into empty space.

ExampleA button that moves

A new banner pushes the page down by 40 pixels.The check finds the Save button 40 pixels lower, and the click after it lands on the button.

Text checks can do the same with their Move Mouse To option: the clicks after the check are aimed at the text it found.

See also Timeouts, search areas and failures.

Still stuck?Tell us what you were trying to do, and we answer within one working day.Ask our team