# Verify image and take screen shot keyword doesn't work?

**URL:** <https://forum.katalon.com/t/verify-image-and-take-screen-shot-keyword-doesnt-work/108573>\
**Category:** Web Testing\
**Tags:** katalon-studio\
**Created:** [November 27, 2023, 9:34pm UTC](https://forum.katalon.com/t/verify-image-and-take-screen-shot-keyword-doesnt-work/108573 "2023-11-27T21:34:57Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ashraf.madina](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/ashraf.madina/32/20464_2.png) [@ashraf.madina](https://forum.katalon.com/u/ashraf.madina)\
**Post date:** [November 27, 2023, 9:34pm UTC](https://forum.katalon.com/t/verify-image-and-take-screen-shot-keyword-doesnt-work/108573/1 "2023-11-27T21:34:57Z")

</div>

So I read one post that this function does not work properly…but there was no solution or end result for this problem. I wonder if anyone figured it out.. so I’m posting this here to check before I log a formal ticket for this.

I need to verify an image in a test and after playing around with it… that method does not work. Only thing I can do is verify the img src which is dumb because it wouldn’t verify a broken image or an incorrect img.

So what is the point of verify image feature?

 ![image](https://europe1.discourse-cdn.com/katalon/original/3X/8/e/8e51c29b077a0616ba64a0fc9ec934d99f4a76b8.jpeg)  
 ![image](https://europe1.discourse-cdn.com/katalon/original/3X/d/c/dcce731ab0c476e05e110d2e091eea7f1ae55f80.jpeg)

and why is it the obj spy fails to take screenshot? I’m assuming taking a SS adds that image to the image selection method?

 ![image](https://europe1.discourse-cdn.com/katalon/original/3X/5/1/51b93bef26526dfa0b7b36dd49dd9974668c3d07.jpeg)

---

<div class="post-metadata">

**Author:** ![Elly\_Tran](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/elly_tran/32/21874_2.png) [@Elly\_Tran](https://forum.katalon.com/u/Elly_Tran)\
**Post date:** [November 28, 2023, 7:35am UTC](https://forum.katalon.com/t/verify-image-and-take-screen-shot-keyword-doesnt-work/108573/2 "2023-11-28T07:35:28Z")

</div>

Hi,

I will take a look and find a workaround. back to you soon

---

<div class="post-metadata">

**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\
**Post date:** [November 30, 2023, 4:54am UTC](https://forum.katalon.com/t/verify-image-and-take-screen-shot-keyword-doesnt-work/108573/3 "2023-11-30T04:54:39Z")

</div>

Here I would show some sample codes and explain my thoughts.

You can see the URLs as test target in [here](https://kazurayam.github.io/ks_verifyImagePresent/)

## “Test Cases/test\_page1” passed

Please read the source code of “Test Cases/test\_page1”:

```auto
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

WebUI.openBrowser("https://kazurayam.github.io/ks_verifyImagePresent/page1.html")
WebUI.verifyImagePresent(findTestObject("apple"))
WebUI.closeBrowser()

```

[source](https://github.com/kazurayam/ks_verifyImagePresent/blob/develop/Scripts/test_page1/Script1701309121815.groovy)

This script queries the remote web page at [https://kazuraaym.github.io/ks\_verifyImagePresent/page1.html](https://kazuraaym.github.io/ks_verifyImagePresent/page1.html) which looks like

The `test_page1` script tries to verify if an image of apple is displayed in it. The Test Object “apple” points the element `<img id="apple">` as follows:

When I ran this, it just passes as I expected.

## “Test Cases/test\_page2” failed

Please read the source code of “Test Cases/test\_page2”:

```auto
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

WebUI.openBrowser("https://kazurayam.github.io/ks_verifyImagePresent/page2.html")
WebUI.verifyImagePresent(findTestObject("apple"))
WebUI.closeBrowser()

```

[source](https://github.com/kazurayam/ks_verifyImagePresent/blob/develop/Scripts/test_page2/Script1701309170129.groovy)

The only difference from the `test_page1` script is the URL to query. `page1.html` → `page2.html`. The page looks like

When I ran the `test_page2`, it failed with the following message:

```auto
2023-11-30 12:52:57.648 DEBUG testcase.test_page2 - 2: verifyImagePresent(findTestObject("apple"))
2023-11-30 12:52:58.477 ERROR c.k.k.core.keyword.internal.KeywordMain - ❌ Unable to verify image present (Root cause: com.kms.katalon.core.exception.StepFailedException: Unable to verify image present
	at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.stepFailed(WebUIKeywordMain.groovy:64)
	at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.runKeyword(WebUIKeywordMain.groovy:26)
	at com.kms.katalon.core.webui.keyword.builtin.VerifyImagePresentKeyword.verifyImagePresent(VerifyImagePresentKeyword.groovy:94)
	at com.kms.katalon.core.webui.keyword.builtin.VerifyImagePresentKeyword.execute(VerifyImagePresentKeyword.groovy:67)
	at com.kms.katalon.core.keyword.internal.KeywordExecutor.executeKeywordForPlatform(KeywordExecutor.groovy:74)
	at com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords.verifyImagePresent(WebUiBuiltInKeywords.groovy:2794)
	at com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords$verifyImagePresent$0.call(Unknown Source)
	at test_page2.run(test_page2:6)
...

```

The message tell just the keyword `WebUI.verifyImagePresent` failed without any diagnostics.

But I can tell you the reason. The apple image was resized by CSS width property. You can find the following line in the [page2.html](https://kazuraaym.github.io/ks_verifyImagePresent/page2.html):

```auto
    <img id="apple" src="./a-bite-in-the-apple.png" alt="as_is" style="width: 100px">

```

The original image in the `a-bite-in-the-apple.png` file has the width = 200px. But the page2.html specifies resizing the image by `style="width: 100px"`. So, in the browser’s view port, the image looks different from the original PNG file. Therefore the `WebUI.verifyImagePresent` keyword failed to find the apple. How poor the keyword is!

## “Test Cases/test\_page3” failed

Please read the source code of “Test Cases/test\_page3”:

```auto
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

WebUI.openBrowser("https://kazurayam.github.io/ks_verifyImagePresent/page3.html")
WebUI.verifyImagePresent(findTestObject("apple"))
WebUI.closeBrowser()

```

[source](https://github.com/kazurayam/ks_verifyImagePresent/blob/develop/Scripts/test_page3/Script1701312229772.groovy)

The only difference from the `test_page1` script is the URL to query. `page1.html` → `page3.html`. The page looks like

When I ran the `test_page3`, it failed with messages just like the `test_page2`, which tell the keyword `WebUI.verifyImagePresent` failed without any detail diagnostics.

But I can tell you the reason. The [page2.html](https://kazuraaym.github.io/ks_verifyImagePresent/page2.html) contains a lot of long paragraphs before the `<img>` element so that the apple image is positioned out of the browser’s view port when the page is loaded.

```auto
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tellus at urna condimentum mattis. Cras adipiscing enim eu turpis egestas. Lectus proin 
    ....
    <img id="apple" src="./a-bite-in-the-apple.png" alt="as_is">

```

The `WebUI.verifyImagePresent` keyword tries to find the target image in the screenshot of the current desktop. It does not automatically scroll the browser’s view port to the target `<img>` element. The `WebUI.verifyImagePresent` keyword was unabled to find the apple image out of the view port. How poor the keyword is!

## Why the message from the keyword is so poor?

As the above samples show, the error message emitted by the `WebUI.verifyImagePresent` keyword is poor. It tells nothing about why the keyword failed to find the image you specified. Therefore when the keyword failed, almost always, the users will loose their way to find out what’s wrong. I think that this poorness of diagnostics from the keyword is the most serious defect of the keyword. The verifyImagePresent keyword is too difficult to use rightly.

Why the message is so poor?

You can study the source code and find the reason. You can find the source code of `WebUI.verifyImagePresent` keyword at the following:

- [https://github.com/katalon-studio/katalon-studio-testing-framework/blob/master/Include/scripts/groovy/com/kms/katalon/core/webui/keyword/builtin/VerifyImagePresentKeyword.groovy](https://github.com/katalon-studio/katalon-studio-testing-framework/blob/master/Include/scripts/groovy/com/kms/katalon/core/webui/keyword/builtin/VerifyImagePresentKeyword.groovy)

The `VerifyImagePresentKeyword` class delegates the task of “verifying if the image is present in the web page” to the Sikuli project’s library. (The version of Sikuli’s bundled in Katalon Studio seem to be very old. I could not find an appropriate URL to refer to for the further information). Ultimately the following class does the task.

- [https://github.com/katalon-studio/katalon-studio-testing-framework/blob/master/Include/scripts/groovy/com/kms/katalon/core/webui/common/ScreenUtil.java](https://github.com/katalon-studio/katalon-studio-testing-framework/blob/master/Include/scripts/groovy/com/kms/katalon/core/webui/common/ScreenUtil.java)

```auto
import org.sikuli.api.DesktopScreenRegion;
import org.sikuli.api.ImageTarget;
import org.sikuli.api.ScreenRegion;
import org.sikuli.api.Target;

public class ScreenUtil {

    private ScreenRegion mainScreen;
    
    private double similarity = 0.75; // Default value

    public ScreenUtil() {
        mainScreen = new DesktopScreenRegion();
    }
    ....
    private ScreenRegion findImage(String imagePath) throws Exception {
        File imgFile = new File(imagePath);
        if (imgFile.exists()) {
            Target target = new ImageTarget(imgFile);
            target.setMinScore(this.similarity);
            ScreenRegion reg = this.mainScreen.find(target);
            return reg;
        } else {
            throw new Exception(StringConstants.COMM_EXC_IMG_FILE_DOES_NOT_EXIST);
        }
    }

```

The point is this single line:

```auto
            ScreenRegion reg = this.mainScreen.find(target);

```

Katalon’s `WebUI.verifyImagePresent` keyword is a thin wrapper of the [org.sikuli.api.DefaultScreenRegion.find(ScreenRegion)](https://javadox.com/org.sikuli/sikuli-api/1.0.2/org/sikuli/api/DefaultScreenRegion.html#find(org.sikuli.api.Target)). The `DefaultScreenRegion.find()` method just returns null when it found no “apple” image in the desktop screenshot. It does not give any diagnostics. The `WebUI.verifyImagePresent` keyword checks if the result is null or not. When null, the keyword fails. It does no more than that.

## My Conclusion

The `WebUI.verifyImagePresent` keywords quite often fails due to many causes. I would enumerate just some:

1. Your test code does not wait the page to load completely
2. The `<img>` element can be resized by CSS, therefore the image is displayed diffent from the image file
3. The `<img>` element may be located outside the view port of the browser. You may need to scroll the view port to the target `<img>` element explicitly.

When `WebUI.verifyImagePresent` keyword failed, Katalon Studio won’t given any diagnostics why it failed. Katalon Studio can give you no clue to fix the failure.

Is it possible for Katalon to improve the diagnostics from the `WebUI.verifyImagePresent` keyword in future? — I don’t think it is possible. The first reason is that Katalon would not be able to change the Sikuli library. The second reason is that even Sikuli libary would NOT be able to tell you why it found no “apple” in the target desktop screenshot. How can Sikuli library detect the true causes = CSS witdth etc? Only God knows.

I think that the idea of trying to find an image in the desktop screenshot is a poor idea; it will never be productive. Don’t take it.

I personally will never use the `WebUI.verifyImagePresent` keyword.

When I want to assert an image is displayed in an HTML page, I would take other approach. I would verify the presence of `<img src="...">` element. It would be almost enough. If I want to do further and make sure the image is displayed, then I would get the `src="url"` value and make an HTTP request to the URL and see if it returns HTTP Status 200.

---

<div class="post-metadata">

**Author:** ![ashraf.madina](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/ashraf.madina/32/20464_2.png) [@ashraf.madina](https://forum.katalon.com/u/ashraf.madina)\
**Post date:** [November 30, 2023, 2:04pm UTC](https://forum.katalon.com/t/verify-image-and-take-screen-shot-keyword-doesnt-work/108573/4 "2023-11-30T14:04:05Z")

</div>

> [@kazurayam](#):
>
> I would verify the presence of `<img src="...">` element. It would be almost enough. If I want to do further and make sure the image is displayed, then I would get the `src="url"` value and make an HTTP request to the URL and see if it returns HTTP Status 200.

The thing is img src is not reliable… because it never verifies the actual img… i’ve tried that. i’ve done bunch of testing around an img and at no point any of the test method actually verifies/compares the img. The reason \<img src=\> is not reliable is because if an image renders blurry or broken in the UI, the test will not fail since it’s only checking the img src.  
On your apple logo page, can you do a `transform: rotateY(180deg);` and see if your test passes or fails - i’m thinking it will pass cuz it might only be verifying the resolution/size of the img, not the actual img.

---

<div class="post-metadata">

**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\
**Post date:** [November 30, 2023, 2:46pm UTC](https://forum.katalon.com/t/verify-image-and-take-screen-shot-keyword-doesnt-work/108573/5 "2023-11-30T14:46:55Z")

</div>

> [@ashraf.madina](#):
>
> i’ve done bunch of testing around an img and at no point any of the test method actually verifies/compares the img.

I have never been asked to do such test scenario. Honestly I can not imagin why you need to do it.

---

<div class="post-metadata">

**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\
**Post date:** [November 30, 2023, 2:54pm UTC](https://forum.katalon.com/t/verify-image-and-take-screen-shot-keyword-doesnt-work/108573/6 "2023-11-30T14:54:16Z")

</div>

Katalon Studio provides a keyword that takes a screenshot of HTML elements, like `<img>`, and save it into a PNG file.

> **[\[WebUI\] Take Element Screenshot | Katalon Docs](https://docs.katalon.com/docs/katalon-studio/keywords/keyword-description-in-katalon-studio/web-ui-keywords/webui-take-element-screenshot)**
>
> Description

Once you get a screenshot PNG file of `<img>` element and the _base_ image file as base, you should be able to write a simple class that compares 2 images files to make a diff object.

I use Ashot to take diff of 2 images

> <https://github.com/pazone/ashot/issues/120>
>
> Hi , 
> 
> I am working on Ashot from past 5 days. I found it very useful for co…mparing two screenshot images. When I had see what is the difference in the image , there is no clear way to find difference in image. I copied my code below and attached screenshots what i am referring to. 
> 
> 
> package sikulixapi;
> 
> import java.awt.image.BufferedImage;
> import java.io.File;
> import java.io.IOException;
> import java.util.concurrent.TimeUnit;
> 
> import javax.imageio.ImageIO;
> 
> import org.openqa.selenium.By;
> import org.openqa.selenium.WebDriver;
> import org.openqa.selenium.WebElement;
> import org.openqa.selenium.chrome.ChromeDriver;
> 
> import ru.yandex.qatools.ashot.AShot;
> import ru.yandex.qatools.ashot.Screenshot;
> import ru.yandex.qatools.ashot.comparison.ImageDiff;
> import ru.yandex.qatools.ashot.comparison.ImageDiffer;
> import ru.yandex.qatools.ashot.shooting.ShootingStrategies;
> import ru.yandex.qatools.ashot.util.ImageTool;
> 
> public class FullScreenshot {
> 
> public static void main(String\[\] args) throws IOException, InterruptedException {
> // TODO Auto-generated method stub
> 
> 		
> System.setProperty("webdriver.chrome.driver", "D:\\\\SeleniumDriver\\\\chromedriver.exe");
> WebDriver driver=new ChromeDriver();
> 
> driver.manage().timeouts().implicitlyWait(150,TimeUnit.SECONDS);
> 
> driver.get("file:///C:/Users/Haritha/Desktop/example.html");
>         
>        
>         
> BufferedImage expectedImage = ImageIO.read(new File(System.getProperty("user.dir")+"/imgs/aShot/colorChange.png"));
> 
> System.out.println("\\n expectedImage= "+expectedImage );
> Thread.sleep(5000);
>         
> Screenshot screenshot = new AShot().shootingStrategy(
> ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);
> BufferedImage image = screenshot.getImage();
> ImageIO.write(image, "PNG", new File(System.getProperty("user.dir")+"/imgs/aShot/localDemo.png"));
>         
> 
> 
> BufferedImage actualImage = screenshot.getImage();
>         
>  
>         
> ImageDiffer imgDiff = new ImageDiffer();
> 
> ImageDiff diff = imgDiff.makeDiff(expectedImage,actualImage);
>         
>        
>         
> BufferedImage diffImage = diff.getDiffImage();
> ImageIO.write(image, "PNG", new File(System.getProperty("user.dir")+"/imgs/aShot/diffImage.png"));
>         
> System.out.println("\\n diffImage= "+diffImage.getColorModel() );
> 
>         
> if(diff.hasDiff()){
> System.out.println("Images are not same");
> }else { 
> System.out.println("Images are same");
> }
>         
> diff = imgDiff.makeDiff(diffImage,actualImage);
> //diff.getDiffImage()
> if(diff.hasDiff()){
> System.out.println(" diff Image & actual image are not same"+ diff.getDiffImage().getData());
> }else { 
> System.out.println("Images are same");
> }
>         
> diff = imgDiff.makeDiff(diffImage,expectedImage);
>         
> if(diff.hasDiff()){
> System.out.println(" diff Image & xpected image are not same");
> }else { 
> System.out.println(" expected & Diff Images are same");
> }
>         
>  
>         
> driver.quit();
> 
> }
> 
> }
> 
> !\[colorchange\](https://user-images.githubusercontent.com/17870693/37146540-07a37ea8-22ea-11e8-97bf-11178670b072.png)
> !\[localdemo\](https://user-images.githubusercontent.com/17870693/37146546-0cce6d84-22ea-11e8-976c-63caa77f6774.png
> 
> 
> In the above code, colorChange.png 's text color is blue and localDemo.png text color is black. How can i get this info from diffImage class. 
> 
> How can i know that the text color is the difference in expected and actual image. 
> 
> 
> Similarly, I wanted to know how can i get if some text missing from expected to actual or alignment issues. 
> 
> Thanking you in advance,
> 
> aWaiting for your reply.

---

<div class="post-metadata">

**Author:** ![ashraf.madina](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/ashraf.madina/32/20464_2.png) [@ashraf.madina](https://forum.katalon.com/u/ashraf.madina)\
**Post date:** [November 30, 2023, 2:55pm UTC](https://forum.katalon.com/t/verify-image-and-take-screen-shot-keyword-doesnt-work/108573/7 "2023-11-30T14:55:32Z")

</div>

I blame it on the FE… but to answer, our app does have several areas where we have “image preview” of UI overlays… think of it like skins or stencils that gets dropped on top of the UI. there’s been bugs with the img preview where it renders blurry, zoomed out, or doesn’t match the actual “Stencil”…and I wanted to capture those edge cases.

I can certainly live without it…really not high priority but it’s always nice to cover or catch these types of issues to promote the maturity of test automation.

---

<div class="post-metadata">

**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\
**Post date:** [November 30, 2023, 3:01pm UTC](https://forum.katalon.com/t/verify-image-and-take-screen-shot-keyword-doesnt-work/108573/8 "2023-11-30T15:01:11Z")

</div>

I suppose that `WebUI.verifyImagePresent` keyword would not help you.

---

<div class="post-metadata">

**Author:** ![kazurayam](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/kazurayam/32/333_2.png) [@kazurayam](https://forum.katalon.com/u/kazurayam)\
**Post date:** [December 10, 2023, 1:54pm UTC](https://forum.katalon.com/t/verify-image-and-take-screen-shot-keyword-doesnt-work/108573/9 "2023-12-10T13:54:25Z")

</div>

@ashraf.madina

Please have a look if you are still interested

> [@Visual Inspection of HTML elements in Katalon Studio](http://forum.katalon.com/t/visual-inspection-of-html-elements-in-katalon-studio/110250):
>
> In [Verify image and take screen shot keyword doesn't work? - #7 by ashraf.madina](http://forum.katalon.com/t/verify-image-and-take-screen-shot-keyword-doesnt-work/108573/7), @ashraf.madina wrote: our app does have several areas where we have “image preview” of UI overlays… think of it like skins or stencils that gets dropped on top of the UI. there’s been bugs with the img preview where it renders blurry, zoomed out, or doesn’t match the actual “Stencil”…and I wanted to capture those edge cases. Here I will demostrate my solution to this type of requirement. I created a demo projec…