A Simple Pixel Validation

  • The test we created for this tutorial is 1 + 1 =  (testing it on Google Calculator).
  • Click on the '+' button and then on the "Validations" menu.
  • Select Element Pixel:
  • In the recorded app: select the result (2):
  • Run the test and see that it is successful.
  • Now delete the "Click +"' step and run the test again - see that it fails.

Changing the Image Baseline

Here we can see why the validation failed. The validation expected an image of the number 2 but instead got an image of the number 11.
You can constantly update the Baseline you would expected to get. For example: we got "11" and would like to accept it as the updated Baseline instead of "2":
Double click on the validation step.
A new advanced validation screen appears.

Click on the top right box with the alt text "Show the baseline and new image side by side":

  • On the left is the baseline image of 2.
  • On the right is the actual image you got of 11.

You now have the option of accepting 11 as a correct answer, so that future tests would not fail when they get 11. To do that, simply click on the Accept button on the top left:

Run the test again - see that it is successful:

Note that you could have clicked the Decline button to keep the baseline image unchanged:

For more about how to use this editor check the Advanced Image Validation article.

My pixel validation steps fail. What could be the reason?

Make sure there is a baseline to compare too

The expected image (baseline image to compare to) is usually different for each configuration (resolution, browser or OS), so although you recorded a baseline for that step in some configuration, you might be running it now on another configuration, where there's no expected image. In these cases, the pixel validation will probably fail.

What can I do?

  1. Update the Baseline
    You can edit (double click) the pixel validation step, and click the "Update Baseline" button (located at the top right corner).
  2. Make sure you test on a "safe" resolution:
    Sometimes, the browser can't resize to a specific resolution (on several operating systems the minimal width is 400px). So make sure you test on a wider resolution than 400px width.

Did this answer your question?