WebUI.verifyImagePresent keyword fails when image on HTML is resized

kazurayam · August 17, 2022, 2:52pm

I have published a GitHub project

This project will demonstrate how WebUI.verifyImagePresent(TestObject) keyword fails
when an image on HTML is resized by CSS property.
This keyword will certainly disappoint users who naively expects the keyword work
regardless how the image is scaled.

Reproducing problem

Target HTML Page

This project contains a Google Logo image named GoogleGLogo-1.png, which looks like this:

This project provides 2 HTML files. One is named page_with_image_in_original_width.html where the Logo is displayed in its original size. It looks like this:

Another HTML is named page_with_image_resized_quater.html where the Logo is displayed smaller than its original size, which looks like this: quater

Please note that both HTML refer to the same PNG image file but display it in different size.

Test Case TC1

I have made 2 Test Case scripts.

TC1 opens the page_with_image_in_original_width.html and applies WebUI.verifyImagePresent() keyword.

import java.nio.file.Path
import java.nio.file.Paths
import java.time.LocalDateTime
import java.time.ZoneOffset
import java.time.format.DateTimeFormatter
import java.time.temporal.ChronoUnit

import com.kms.katalon.core.configuration.RunConfiguration
import com.kms.katalon.core.testobject.ConditionType
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

Path projectDir = Paths.get(RunConfiguration.getProjectDir())

/**
 * Case where HTML displays the image in its original size
 */
Path html1 = projectDir.resolve("page_with_image_in_original_width.html")

WebUI.openBrowser(html1.toFile().toURI().toURL().toExternalForm())
WebUI.delay(3)
WebUI.verifyImagePresent(findTestObject("GoogleLogo"))   // this will pass

// close the page
WebUI.closeBrowser()

TC1 will pass.

Test Case TC2

TC2 is almost identical to TC1. The only difference is that TC2 opens the page_with_image_resized_quater.html page. TC2 will always fail.

2022-08-17 23:09:15.847 DEBUG testcase.TC2_resized                     - 5: verifyImagePresent(findTestObject("GoogleLogo"))
2022-08-17 23:09:18.729 ERROR c.k.k.core.keyword.internal.KeywordMain  - ❌ Image: 'GoogleGLogo-1.png' is NOT present (Root cause: com.kms.katalon.core.exception.StepFailedException: Image: 'GoogleGLogo-1.png' is NOT present
	at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.stepFailed(WebUIKeywordMain.groovy:64)
	at com.kms.katalon.core.webui.keyword.builtin.VerifyImagePresentKeyword$_verifyImagePresent_closure1.doCall(VerifyImagePresentKeyword.groovy:92)
	at com.kms.katalon.core.webui.keyword.builtin.VerifyImagePresentKeyword$_verifyImagePresent_closure1.call(VerifyImagePresentKeyword.groovy)
	at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.runKeyword(WebUIKeywordMain.groovy:20)
	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 TC2_resized.run(TC2_resized:23)
	at com.kms.katalon.core.main.ScriptEngine.run(ScriptEngine.java:194)
	at com.kms.katalon.core.main.ScriptEngine.runScriptAsRawText(ScriptEngine.java:119)
	at com.kms.katalon.core.main.TestCaseExecutor.runScript(TestCaseExecutor.java:445)
	at com.kms.katalon.core.main.TestCaseExecutor.doExecute(TestCaseExecutor.java:436)
	at com.kms.katalon.core.main.TestCaseExecutor.processExecutionPhase(TestCaseExecutor.java:415)
	at com.kms.katalon.core.main.TestCaseExecutor.accessMainPhase(TestCaseExecutor.java:407)
	at com.kms.katalon.core.main.TestCaseExecutor.execute(TestCaseExecutor.java:284)
	at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:142)
	at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:133)
	at com.kms.katalon.core.main.TestCaseMain$runTestCase$0.call(Unknown Source)
	at TempTestCase1660745344576.run(TempTestCase1660745344576.groovy:25)
)
2022-08-17 23:09:19.162 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 TC2_resized.run(TC2_resized:23)
	at com.kms.katalon.core.main.ScriptEngine.run(ScriptEngine.java:194)
	at com.kms.katalon.core.main.ScriptEngine.runScriptAsRawText(ScriptEngine.java:119)
	at com.kms.katalon.core.main.TestCaseExecutor.runScript(TestCaseExecutor.java:445)
	at com.kms.katalon.core.main.TestCaseExecutor.doExecute(TestCaseExecutor.java:436)
	at com.kms.katalon.core.main.TestCaseExecutor.processExecutionPhase(TestCaseExecutor.java:415)
	at com.kms.katalon.core.main.TestCaseExecutor.accessMainPhase(TestCaseExecutor.java:407)
	at com.kms.katalon.core.main.TestCaseExecutor.execute(TestCaseExecutor.java:284)
	at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:142)
	at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:133)
	at com.kms.katalon.core.main.TestCaseMain$runTestCase$0.call(Unknown Source)
	at TempTestCase1660745344576.run(TempTestCase1660745344576.groovy:25)
Caused by: com.kms.katalon.core.exception.StepFailedException: Image: 'GoogleGLogo-1.png' is NOT present
	at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.stepFailed(WebUIKeywordMain.groovy:64)
	at com.kms.katalon.core.webui.keyword.builtin.VerifyImagePresentKeyword$_verifyImagePresent_closure1.doCall(VerifyImagePresentKeyword.groovy:92)
	at com.kms.katalon.core.webui.keyword.builtin.VerifyImagePresentKeyword$_verifyImagePresent_closure1.call(VerifyImagePresentKeyword.groovy)
	at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.runKeyword(WebUIKeywordMain.groovy:20)
	... 17 more
)
2022-08-17 23:09:19.180 ERROR c.k.katalon.core.main.TestCaseExecutor   - ❌ Test Cases/TC2_resized FAILED.
Reason:
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 TC2_resized.run(TC2_resized:23)
	at com.kms.katalon.core.main.ScriptEngine.run(ScriptEngine.java:194)
	at com.kms.katalon.core.main.ScriptEngine.runScriptAsRawText(ScriptEngine.java:119)
	at com.kms.katalon.core.main.TestCaseExecutor.runScript(TestCaseExecutor.java:445)
	at com.kms.katalon.core.main.TestCaseExecutor.doExecute(TestCaseExecutor.java:436)
	at com.kms.katalon.core.main.TestCaseExecutor.processExecutionPhase(TestCaseExecutor.java:415)
	at com.kms.katalon.core.main.TestCaseExecutor.accessMainPhase(TestCaseExecutor.java:407)
	at com.kms.katalon.core.main.TestCaseExecutor.execute(TestCaseExecutor.java:284)
	at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:142)
	at com.kms.katalon.core.main.TestCaseMain.runTestCase(TestCaseMain.java:133)
	at com.kms.katalon.core.main.TestCaseMain$runTestCase$0.call(Unknown Source)
	at TempTestCase1660745344576.run(TempTestCase1660745344576.groovy:25)
Caused by: com.kms.katalon.core.exception.StepFailedException: Image: 'GoogleGLogo-1.png' is NOT present
	at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.stepFailed(WebUIKeywordMain.groovy:64)
	at com.kms.katalon.core.webui.keyword.builtin.VerifyImagePresentKeyword$_verifyImagePresent_closure1.doCall(VerifyImagePresentKeyword.groovy:92)
	at com.kms.katalon.core.webui.keyword.builtin.VerifyImagePresentKeyword$_verifyImagePresent_closure1.call(VerifyImagePresentKeyword.groovy)
	at com.kms.katalon.core.webui.keyword.internal.WebUIKeywordMain.runKeyword(WebUIKeywordMain.groovy:20)
	... 17 more

2022-08-17 23:09:19.195 INFO  c.k.katalon.core.main.TestCaseExecutor   - END Test Cases/TC2_resized

Why WebUI.verifyImagePresent fails in TC2?

You can read the Groovy source code of WebUI.verifyImagePresent keyword here. If you read the code, you would find how this keyword works.

The keyword requires user to give reference to the original image file.
The keyword takes a full page screenshot of the target web page.
The keyword looks for the original image to appear somewhere in the screenshot. No image scaling is taken into account.

Now you should review this design. This design naively assumes that the original image is rendered “as is” without any resizing in the web page.

If the target HTML specifies image to be resized like

<img src="GoogleGLogo-1.png" style="width:25%;" alt="logo">

then the `WebUI.verifyImagePresent() keyword will always fail to find the image to be present in the page.

Applicabiliy

In almost all of web pages, an images is resized. For example, the avator image of this page is resized by the width and height attribute of <img> tag:

The WebUI.verifyImagePresent keyword never passes for the avator image in this site.

Conclusion

The WebUI.verifyImagePresent() keyword naively assumes an image is not resized by HTML/CSS. But I think that this assumption is not practical. Therefore I would argue that katalon users should not use WebUI.verifyImagePresent keyword at all.

I haven’t checked it but I guess Mobile.verifyImagePresent keyword is similar. You shouldn’t use it as well.

Russ_Thomas · August 18, 2022, 11:56am

verifyImagePresent() has even more problems:

Moving this to bug-reports.

kazurayam · August 18, 2022, 12:21pm

@vu.tran

I would suggest to Katalon Team that they should deprecate WebUI.verifyImagePresent() and Mobile.verifyImagePresent() keywords. Or just remove them out of the official documentation so that new comers are not trapped.

Katalon Team does not have to mind backward compatibility much, as I believe that nobody has ever found the keywords useful / satisfactory; because, I believe, almost all of web pages resize the images.

vu.tran · August 19, 2022, 7:49am

Thank you @kazurayam for sharing. I will let our product team know. I’ll inform you if we update this. Much appreciated!

Topic		Replies	Views
How I can verify image in webUI using groovy Bugs Report katalon-studio , web-testing	2	1080	April 28, 2023
WebUI.verifyImagePresent keyword does not work in the Katalon Studio Arm64 v9.0 due to "no jniopencv_core in java.library.path" Bugs Report bugs-report	7	390	November 29, 2023
Verify image present accuracy Katalon Studio katalon-studio , bugs-report	4	1125	July 23, 2022
Verify image present - my solution Tips & Tricks katalon-studio , tips-tricks	5	2025	August 8, 2022
issue: not able to use WebUI.verifyImagePresent(findTestObject('Page_xxx/img_LOGO')) on latest 5.1.0 Bugs Report katalon-studio , bugs-report	11	1286	October 29, 2019