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

**URL:** <https://forum.katalon.com/t/cant-click-in-katalon-because-object-is-too-zoomed-in/80901>\
**Category:** Web Testing\
**Tags:** katalon-recorder\
**Created:** [November 23, 2022, 2:16pm UTC](https://forum.katalon.com/t/cant-click-in-katalon-because-object-is-too-zoomed-in/80901 "2022-11-23T14:16:14Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![swinston](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/swinston/32/20464_2.png) [@swinston](https://forum.katalon.com/u/swinston)\
**Post date:** [November 23, 2022, 2:16pm UTC](https://forum.katalon.com/t/cant-click-in-katalon-because-object-is-too-zoomed-in/80901/1 "2022-11-23T14:16:14Z")

</div>

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!

---

<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 23, 2022, 10:58pm UTC](https://forum.katalon.com/t/cant-click-in-katalon-because-object-is-too-zoomed-in/80901/2 "2022-11-23T22:58:44Z")

</div>

I think you shouldn’t use zooming.

Why?

I would show you what I tried.

* * *

My test case code:

```auto
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:

```auto
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%`

```auto
...
// (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.

---

<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 23, 2022, 11:00pm UTC](https://forum.katalon.com/t/cant-click-in-katalon-because-object-is-too-zoomed-in/80901/3 "2022-11-23T23:00:28Z")

</div>

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:

```auto
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.

---

<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 25, 2022, 1:45am UTC](https://forum.katalon.com/t/cant-click-in-katalon-because-object-is-too-zoomed-in/80901/4 "2022-11-25T01:45:37Z")

</div>

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

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