Click offset doesn't work as mentioned in documentation

In the documentation of the click offset it says:
Click on the given element with the relative position (x, y) from the top-left corner of that element.

So according this example click offset (0,0) should be in the top left corner. But when you use the example code of the click offset it seems like it starts in the middle. The example explains it should click in the upper left box of the tic-tac-toe, instead it clicks in the bottom right box.

We experience the same issues with our elements. We want to click on the left side of our element, to do so we have to use negative coordinates.

Our code for click offset:
WebUI.clickOffset(findTestObject(‘object’), -25, 0)

1 Like

If you enter this into your dev tools console it will give you the x and y of each element on your web page. You then should be able to put those co-ordinates into the clickOffset keyword as expected.

document.onmousemove = function(e){
var x = e.pageX;
var y = e.pageY;
e.target.title = "X is "+x+" and Y is "+y;
};
1 Like

https://forum.katalon.com/u/elwin.poelhekken Thank you for posting this clarification. It doesn’t even require a “fix” for the keyword by Katalon, simply a correction to the documentation. My team was wrestling with this and beginning to figure it out, but your post definitely confirmed our suspicions.

the clickOffset of katalon click on the center of the element (there were an update regarding selenium “moveToElement”. I find a work around using selenium to click on top left element as before. Add a keyword on katalon using the code below :
(first keyword for right click and second keyword is for simple click)

import static com.kms.katalon.core.checkpoint.CheckpointFactory.findCheckpoint
import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import com.kms.katalon.core.annotation.Keyword
import com.kms.katalon.core.checkpoint.Checkpoint
import com.kms.katalon.core.cucumber.keyword.CucumberBuiltinKeywords as CucumberKW
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
import com.kms.katalon.core.model.FailureHandling
import com.kms.katalon.core.testcase.TestCase
import com.kms.katalon.core.testdata.TestData
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import internal.GlobalVariable

import org.openqa.selenium.interactions.Actions
import com.kms.katalon.core.webui.driver.DriverFactory
import org.openqa.selenium.WebDriver
import org.openqa.selenium.WebElement
import org.openqa.selenium.By

public class ClickOffset {

@Keyword
// RightClickOffset
// xpath : this is the xpath of the element
// getTopLeftX : this is the X position of the element (coordinate X)
// getTopLeftY : this is the Y position of the element (coordinate Y)

        def RightClick (xpath, int getTopLeftX,int getTopLeftY) {

  WebDriver driver = DriverFactory.getWebDriver()
  Actions actions = new Actions(driver)
  WebElement ele = driver.findElement(By.xpath(xpath))
  actions.moveByOffset(getTopLeftX, getTopLeftY).contextClick().build().perform()

}

@Keyword
// LeftClickOffset

        def Click (xpath,int getTopLeftX,int getTopLeftY) {

  WebDriver driver = DriverFactory.getWebDriver()
  Actions actions = new Actions(driver)
  WebElement ele = driver.findElement(By.xpath(xpath))
  actions.moveByOffset(getTopLeftX, getTopLeftY).click().build().perform()

}

}