The baseline is what you have at the beginning (in our case - the picture we want to validate) and it is used for comparison with later data (in our case - the picture our test found). If the baseline picture is sufficiently different from the picture our test found then the validation fails.
The same picture can look different on different operating systems, on different browsers, and in different resolutions, therefore, every picture has its own baseline for each: OS x Browser x Resolution combination.
Let's check what other cool things we can do in the image editor:
- Google "Online Calculator" and start a new test.
- Click 5 + 2 =
- Add a new step Validate - Pixels (Viewport).
- Delete the + step.
- Record action after 5 and click on -.
- Run the test and see that it fails:
- Double click on the verification step to get back into the Advanced Image Editor:
The Image Comparison Editor
Let's go over some of the major things we can do here:
Visually marks the differences between the baseline and the new image:
Zoom to error
Use the left and right arrows to move between the differences:
Click the top right button for a side-by-side view of the baseline and the new image:
Here you can choose how "strict" the validation will be.
- Strict - mimics human eyes so only significant visual changes will be spotted, while small changes that are not visible to a human eye will be ignored.
- Content - ignores style and anti-aliasing differences, while spotting content changes. (the content level can be useful if your website includes different styles which are not relevant for your tests).
- Layout - ignores content changes, and detects only layout changes. (useful for pages with dynamic content and localized pages).
Lets you define which regions will be considered as part of the pixel validations and which are not.
- Ignore Region - select a region of the picture which you want the validation to ignore:
The validation will now pass successfully even if the picture changes, as long as the change was in the ignore region. This is useful when you know where things are going to be different.
Note that you can re-size the region by clicking on one of the miniature rectangles on the sides and dragging it. You can also drag the region after it was made by clicking and dragging it.
On the top right side of the ignore region there are two small buttons:
The right button is used to copy the region and the left to delete it. Now, delete the ignore region.
- Floating region - select an inner region and an outer region:
In our example, we allowed the number 3 (enclosed in the yellow rectangle) to be anywhere within the entire answer box of the calculator (blue rectangle).
- Copying regions - you can easily create more regions by copy (control-c) and paste (control-v) existing regions. Note that you need to select the region you wish to copy.