Can't click in Katalon because object is too zoomed in

Product Forums Katalon Recorder
1

Hello!
I am testing an application in Katalon. When I click to go to the landing page of the site, the “log in” button is too zoomed in an i have to zoom out before I can click it. I then went an update my chrome zoom settings so that they were at 75% instead of 100%
However - when recording in katalon, the chrome browser still pops up at 100%. I zoomed out and continued with my recording but when i went to run it is said the element was not interactable.
is there a way to katalon to either automatically set the zoom settting to 75% or somehow able to see the button even though it is too zoomed in?

Thanks!

1 Like
2

I think you shouldn’t use zooming.

Why?

I would show you what I tried.

My test case code:

import org.openqa.selenium.JavascriptExecutor
import org.openqa.selenium.WebDriver

import com.kms.katalon.core.testobject.ConditionType
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webui.driver.DriverFactory
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

TestObject makeTestObject(String xpath) {
	TestObject tObj = new TestObject(xpath)
	tObj.addProperty("xpath", ConditionType.EQUALS, xpath)
	return tObj
}

WebUI.openBrowser('')
WebUI.setViewPortSize(1200, 1000)
WebUI.navigateToUrl("http://demoaut.katalon.com/")
TestObject button = makeTestObject("//a[@id='btn-make-appointment']")

// (1) no zoom
WebUI.verifyElementPresent(button, 8)
WebUI.delay(3)

// (2) change the view port size narrower
WebUI.setViewPortSize(600, 200)
WebUI.delay(3)

// (3) scroll the window so that it shows the button
WebUI.scrollToElement(button, 3)
WebUI.delay(3)

// (4) zoom in 50%
WebDriver driver = DriverFactory.getWebDriver();
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("document.body.style.zoom='50%'");
WebUI.delay(3)

// click the button
WebUI.scrollToElement(button, 3)
WebUI.waitForElementVisible(button, 3)
WebUI.click(button)
WebUI.delay(3)

WebUI.closeBrowser()

This failed:

2022-11-24 07:55:13.975 DEBUG testcase.swinston1                       - 11: driver = getWebDriver()
2022-11-24 07:55:13.994 DEBUG testcase.swinston1                       - 12: js = driver
2022-11-24 07:55:14.002 DEBUG testcase.swinston1                       - 13: js.executeScript("document.body.style.zoom='50%'")
2022-11-24 07:55:14.083 DEBUG testcase.swinston1                       - 14: delay(3)
2022-11-24 07:55:17.111 DEBUG testcase.swinston1                       - 15: scrollToElement(button, 3)
2022-11-24 07:55:17.148 DEBUG testcase.swinston1                       - 16: waitForElementVisible(button, 3)
2022-11-24 07:55:17.335 DEBUG testcase.swinston1                       - 17: click(button)
2022-11-24 07:55:49.564 ERROR c.k.k.core.keyword.internal.KeywordMain  - ❌ Unable to click on object '//a[@id='btn-make-appointment']' (Root cause: com.kms.katalon.core.exception.StepFailedException: Unable to click on object '//a[@id='btn-make-appointment']'
	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.ClickKeyword.click(ClickKeyword.groovy:74)
	at com.kms.katalon.core.webui.keyword.builtin.ClickKeyword.execute(ClickKeyword.groovy:40)
	at com.kms.katalon.core.keyword.internal.KeywordExecutor.executeKeywordForPlatform(KeywordExecutor.groovy:74)
	at com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords.click(WebUiBuiltInKeywords.groovy:620)
	at com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords$click$5.call(Unknown Source)
	at swinston1.run(swinston1:41)

So, I commented out the lines of // (4) zoom in 50%

...
// (4) zoom in 50%
//WebDriver driver = DriverFactory.getWebDriver();
//JavascriptExecutor js = (JavascriptExecutor) driver;
//js.executeScript("document.body.style.zoom='50%'");
//WebUI.delay(3)

// (5) click the button
...

This time the test case passed. It successfully clicked the button.

1 Like
3

As you see, WebUI.click() in the above sample script failed. I think that zooming the browser window by js.executeScript("document.body.style.zoom=xxx") somehow confuses the WebUI keywords. The following error occured:

Caused by: org.openqa.selenium.ElementClickInterceptedException: 
    element click intercepted: 
        Element <a id="btn-make-appointment" href="./profile.php#login" class="btn btn-dark btn-lg">...</a> 
            is not clickable at point (555, 23). 
        Other element would receive the click: <div class="text-vertical-center">...</div>

This message suggests to me that the WebUI keywords assumes the viewport is displayed always with fixed zoom rate=100% and Katalon Studio does not trace the effect of zooming by javascript.

Possibly you shouldn’t use zooming to bring the login button visible in the view port.

Instead you can use WebUI.scrollToElement(TestObject) to bring the login button in the viewport and make it clickable.

1 Like
4

Now, I noticed, you are using Katalon Recorder, not Katalon Studio.

Sorry, I don’t know Katalon Recorder at all.

1 Like