Comparing a displayed image to a reference image

I would like to set up tests to determine if my website has been defaced. In particular I want to check that certain images are really the correct images. So, I am not sure how to do two things:

  1. How to compare two images and determine if they are the same or not
  2. Whether the reference image to which the scraped imaged is compared needs to be itself recorded with a storeImage command, or if it must be provided by some other means.

I consider that any change at all is unwonted and signifies a problem to fix.

In other words, I would like to use logic like:

store (?) something reference_image
storeImage some_xpath displayed_image
if displayed_image == reference_image
	echo All is well
else
	echo Displayed image does not match reference image
end

…but I don’t know if this approach is possible.

1 Like

Use this:

visualAssert | reference_image.png

OK, thanks. But how do I get reference_image.png into the system in the first place?
Here is what I tried, but it does not work:

  1. I used the storeImage command to find the image on the page and stored it to reference_image.png
  2. I checked the image in the Screenshots tab to make sure the image looked OK. It did.
  3. I clicked on the image in the Screenshots tab and saved reference_image.png somewhere.
  4. I clicked on Load image in the Visual tab and loaded that saved image. Again, it looked OK
  5. I opened the URL concerned and executed the command visualAssert with target=reference_image.png
  6. The macro timed out and indicated an error. !STATUSOK was set to false.

Looking at the demo macro DemoVisualUITest, I note that the file name is followed by @0.70. I do not understand the use and the relevance of that suffix, if any.

storeImage is a command for web scraping images. You do not need it for automated visual testing.

To create an input image for visualAssert use the SELECT button. This video explains it:

This value is the “similarity” value (also called confidence value). It tells UI Vision how similar two images need to be for visualAssert to consider them the same (0.99 means exactly the same, 0.1 means anything goes). Usually 0.8 - 0.9 is a good value for automated visual testing.

1 Like

Thank you for this added information.
The video to which you refer explains how to validate that an image contains the expected text. This is NOT at all what I want to do. The text is irrelevant. I want to confirm that the image as a whole, including its color, patterns, the logo it contains and everything else corresponds to the authorized image. That authorized, reference image must be provided somehow in advance of the actual test (although I suppose it could be read in from a local file).

If you would only want to validate the text, then use OCR. But what the video above shows is how to search for a reference image inside the web page.

including its color, patterns, the logo it contains

You are right that you can not check the complete website with one visualVerify.

What I would do this to use several visualVerify commands, each checking for the a key area of your website.