Visual Testing (image comparison) with Katalon Studio 7.8.0 and Katalon TestOps

Community Discussion Tips & Tricks
#65
#66
#68

Hi @leah_lambert,

You could check this link for more information.

Best,
Vu Tran

#69

Hi all, I have one question; I would like to do Visual Testing by comparing screenshots - one would be Image from Designer and my test environment ; so it is not comparing screenshots from test environment vs prod, or checking image vs image on web . Anyone succeed with this or it i not possible ??

#70

What is “Designer” you mean?

#71

No matter what your “Designer” is, I suppose it would be appropriate to assume that you have a set of image files (PNG?) in some folder which your Test Case script can read. Assuming this is the case, I would write what I guess possible.

See the official doc

where “how to use Visual Test in TestOps” is explained.

In this document they write

Set up visual testing​
Follow these steps:

  1. Enable screenshot capture in Katalon Studio. See Capture Screenshots.

The source code of [WebUI] Take Screenshot As Checkpoint is here:


at LINE#3006

Possibly you can create your own custom keyword that does similar to “[WebUI] Take Screenshot As Checkpoint”. And your own custom keyword will pick up an image file that were created by you Designer, and put it into Katalon’s Checkpoint (though I do not know what Checkpoint is …).

I suppose, TestOps would not mind how the image file was created — either as a Web page screenshot or an image created by your Designer. So TestOps should happily accept any images in the Checkpoint。

So, I think, you want to invent your custom keyword for yourself to utilize the Visual Testing feature of TestOps as you want.

Putting the images created by your “Designer” software into Checkpoint will be just a start of your works before you gain an output from the TestOps Image Comparison feature. It would require a lot of tuning.

For example, 2 images MUST have just the same width x height pixels. 2 images will be compared pixel-by-pixcel. So the comparison software will report that 2 images with different scale have significant difference — say, 90%. The difference of 90% — it is just useless information for you as you can not find what’s the difference.

Therefore you need to adjust the width x height of your test fixtures. Are you aware of the WxH of the image created by “Designer”? — may be not. We are never so strict when we work on “Designer” type of software. I am afraid, adjusting WxH of images one by one manually is not very efficient.

Comparing 2 images with your eyes would be more productive.

1 Like
#72

If you just want to compare 2 PNG images, then the following might be easier to try

https://store.katalon.com/product/56/Image-Comparison-using-aShot-Keywords

I haven’t tried this keyword. I am not sure its quality.

The original AShot project is here

As you see at LINE#98 https://github.com/pazone/ashot/blob/master/src/main/java/pazone/ashot/comparison/ImageDiffer.java

ImageDiffer class implements a method to compare a pair of BufferedImage objects.

    public ImageDiff makeDiff(BufferedImage expected, BufferedImage actual) {
        return makeDiff(new Screenshot(expected), new Screenshot(actual));
    }

One image could be a screenshot and another could be a image created by your “Designer” software.

#73

Hi, is this implemented?
I am using the trial version and in the documentation it looks like it is possible to manage different baseline collections. But I cannot figure out how.

Thank you?